Cor e design

Utilitários de cor para designers e programadores.

Para que serve

A cor é das poucas decisões de design que afetam ao mesmo tempo a estética e a possibilidade de as pessoas lerem o que escreveste. Escolher bem não é questão de gosto: há relações matemáticas que explicam por que umas cores combinam e limiares mensuráveis que determinam se um texto se lê ou não.

A isso acrescenta-se um problema prático que surge assim que se trabalha com mais de uma ferramenta: a mesma cor escreve-se de formas distintas conforme o destino. HEX na web, RGB nos editores, CMYK na gráfica, HSL quando queres ajustar um tom à mão. Traduzir entre eles à mão é lento e sujeito a erros.

Esta secção cobre as três necessidades habituais: converter entre formatos, encontrar combinações que funcionem e confirmar que o resultado cumpre os mínimos de acessibilidade antes de publicar.

De que ferramenta preciso

Tenho uma cor e preciso dela noutro formato
O conversor de cor traduz de imediato entre HEX, RGB, HSL e CMYK.
Não sei que cores usar no meu projeto
O gerador de paletas propõe cinco cores harmónicas repartidas pelo círculo cromático. Carrega várias vezes até encontrares a combinação certa.
Quero saber se o meu texto se lê bem
O verificador de contraste calcula o rácio entre texto e fundo e diz-te se cumpre os níveis AA e AAA das normas WCAG.
Preciso das cores de uma imagem ou logótipo
Extrair cores de imagem, na secção de imagem, analisa o ficheiro e devolve os tons dominantes.
Quero uma versão mais clara da minha cor de marca
Usa o conversor, passa a cor a HSL e sobe a luminosidade mantendo o tom. É muito mais preciso do que tentar em RGB.

Perguntas frequentes

Que contraste mínimo preciso?

Para texto normal, 4.5:1 cumpre o nível AA, que é o habitualmente exigido e o que a legislação de acessibilidade impõe a muitos sites públicos. O nível AAA pede 7:1.

Porque é que as minhas cores ficam diferentes ao imprimir?

Os ecrãs trabalham em RGB com luz e o papel em CMYK com tinta. Há cores, sobretudo verdes e azuis muito saturados, que simplesmente não se conseguem reproduzir.

Uma paleta harmónica garante boa leitura?

Não. Harmonia e contraste são coisas distintas: duas cores podem combinar na perfeição e ficarem ilegíveis uma sobre a outra. Confirma sempre o contraste à parte.