Ferramentas de Design grátis

Qual delas você precisa?

Quatro delas são sobre cor e quatro sobre as formas e medidas ao redor dela. Do lado da cor, o conversor move um valor entre hex, RGB e HSL, o gerador de paletas monta um conjunto que se sustenta, e o verificador de contraste é o que decide se alguma coisa disso dá para ler. Passe o verificador antes de se comprometer com uma paleta, e não depois, porque um par que falha em 4,5:1 costuma falhar por margem suficiente para que nenhum ajuste salve as duas cores.

Do outro lado, os geradores de gradiente, sombra e canto arredondado existem porque essas três propriedades têm uma sintaxe fácil de ler e chata de escrever de memória. A calculadora de proporção e o conversor de unidades resolvem contas que aparecem o tempo todo e que ninguém gosta de fazer duas vezes.

O que esta categoria não faz

Nenhuma delas tem opinião sobre um design ser bom. O gerador de paletas produz combinações relacionadas matematicamente, o que não é o mesmo que apropriadas para o seu assunto, e o verificador de contraste impõe um piso, não uma meta. Passar no WCAG AA significa que o texto é legível, não que seja confortável de ler por mil palavras.

Também não há edição de imagem nem ferramenta de diagramação aqui. Estas produzem valores que você cola no CSS, e os textos de design cobrem o que cada um desses valores realmente controla.

Perguntas frequentes

Qual razão de contraste eu preciso para cumprir o WCAG?

Para texto corrido normal, 4,5:1 contra o fundo atende ao AA e 7:1 atende ao AAA. Texto grande, ou seja, de 24px para cima, ou 18,66px em negrito, precisa de 3:1 para AA e 4,5:1 para AAA. Componentes de interface e gráficos com significado precisam de 3:1. A razão vai de 1:1 até um máximo de 21:1, que é preto puro sobre branco puro.

É melhor escrever as cores em hex, RGB ou HSL?

Elas descrevem as mesmas cores, então depende do que você está fazendo. O hex é compacto e universal. RGB é como a tela trabalha. HSL é o que vale usar quando você precisa gerar uma variação, porque clarear algo ou reduzir a saturação é mudar um número em vez de três.

Por que meu gradiente tem uma faixa cinza no meio?

Porque o navegador interpola entre as duas cores em sRGB, e o caminho entre dois tons saturados passa por um meio dessaturado. Acrescentar uma parada de cor intermediária no ponto do meio, ou escolher dois tons mais próximos entre si, evita essa zona morta.