Conversor de cores

Escolha uma cor ou escreva-a em qualquer formato (HEX, RGB, HSL, OKLCH, um nome como «tomato»…) e obtenha de imediato o seu valor em todos os outros, pronto a colar no seu CSS. Ajuste a transparência e verifique se se lê bem sobre branco e sobre preto.

Formatos de cor

HEX (#RRGGBB) é o formato mais habitual na web: três pares de algarismos hexadecimais com a quantidade de vermelho, verde e azul, de 00 a FF. RGB exprime o mesmo em decimal, de 0 a 255. HSL descreve a cor pelo tom (0-360°), pela saturação e pela luminosidade em percentagem, o que facilita criar variantes mais claras ou mais escuras da mesma cor.

CMYK (ciano, magenta, amarelo e preto) é o modelo da tipografia e da impressão. A conversão a partir de RGB é aproximada: para imprimir com precisão é preciso usar o perfil de cor da gráfica.

Transparência, HWB e OKLCH

A transparência indica-se com um quarto valor, o canal alfa: #FF880080 (HEX de 8 algarismos), rgba(255, 136, 0, 0.5) ou, com a sintaxe moderna, rgb(255 136 0 / 50%). 0 é totalmente transparente e 1 (ou 100%) totalmente opaco.

HWB (tom, branco e preto) e OKLCH (luminosidade, croma e tom) são formatos do CSS Color 4 que todos os navegadores atuais já suportam. O OKLCH é percetualmente uniforme: duas cores com a mesma luminosidade parecem igualmente claras, o que o torna ideal para criar paletas e variantes. O HSV/HSB não existe em CSS, mas é o modelo usado pelo Photoshop, pelo Figma e por outros programas de design.

O CSS define ainda 148 nomes de cores (tomato, rebeccapurple, steelblue…). Se a sua cor não tiver nome, mostramos o nome CSS mais parecido.

Contraste e acessibilidade

As diretrizes de acessibilidade WCAG exigem um contraste mínimo entre o texto e o fundo para que as pessoas com baixa visão o consigam ler: 4,5:1 para o texto normal no nível AA e 7:1 no nível AAA (3:1 e 4,5:1 para texto grande). O contraste vai de 1:1 (a mesma cor) a 21:1 (preto sobre branco).