Seletor de cores e conversor de códigos

O que significam os códigos HEX, RGB e HSL

Toda cor na tela é uma mistura de luz vermelha, verde e azul. O RGB descreve essa mistura diretamente: rgb(29, 78, 216) quer dizer pouco vermelho, um pouco de verde e muito azul, com cada canal indo de 0 a 255. O HEX traz esses mesmos três números em base 16: 29, 78 e 216 viram 1d, 4e e d8, e o código fica #1d4ed8. Um código curto como #777 é o mesmo que #777777, e um de oito dígitos ganha um quarto par para a opacidade.

O HSL descreve a mesma cor de um jeito mais fácil de ajustar na mão: o matiz como um ângulo no círculo cromático (0 é vermelho, 120 verde, 240 azul), a saturação (o quanto a cor é viva) e a luminosidade (do preto ao branco). hsl(224, 76%, 48%) é o mesmo azul de antes. O HSV, que o Photoshop e muitos apps de design chamam de HSB, usa o brilho no lugar da luminosidade, então uma cor pura fica em 100%, e não em 50%.

O OKLCH é o formato mais novo do CSS. Nele, a claridade é medida do jeito que o olho percebe, então duas cores com a mesma claridade OKLCH parecem de fato igualmente claras, o que não acontece no HSL. Ele é útil em design systems, quando você quer que uma paleta inteira vá do claro ao escuro em passos regulares.

Qual formato usar em cada situação

• HEX para CSS, programas de design e manuais de marca. É curto e quase todo app aceita.
• RGB ou rgba() quando você precisa de transparência em código antigo ou quando um programa pede três números.
• HSL para mexer numa cor na mão: subir a luminosidade para o hover ou baixar a saturação para uma versão mais apagada.
• HSV/HSB para bater com os números do seletor do Photoshop, do Figma ou de editores parecidos.
• OKLCH para paletas e temas em CSS moderno.
• CMYK só como referência aproximada para impressão, como explicado abaixo.

Por que a cor muda da tela para o papel

A tela soma luz: vermelho, verde e azul no máximo dão branco. A impressora tira luz com tintas ciano, magenta, amarela e preta (o K) sobre um papel que já é branco. Muitas cores vivas da tela, principalmente azuis e verdes bem saturados, simplesmente não podem ser impressas. Os números CMYK desta ferramenta vêm de uma fórmula básica que não leva em conta o papel nem a impressora, então uma gráfica que trabalha com um perfil de cor real pode usar valores diferentes. Para um trabalho importante, peça uma prova de cor antes de rodar a tiragem.

Noções básicas de contraste e acessibilidade

Texto com brilho parecido demais com o do fundo é difícil de ler, ainda mais no celular sob o sol ou para quem tem baixa visão. As diretrizes WCAG medem isso como uma razão de contraste que vai de 1:1 (nenhuma diferença) a 21:1 (preto no branco). O cinza #777777 no branco dá 4,47:1, um pouco abaixo dos 4,5:1 que o nível AA exige para texto normal, mas passa para títulos grandes. O verificador nunca arredonda para cima, então 4,49 não passa. E a cor não deve ser o único sinal: acompanhe as cores de status, como vermelho e verde, com palavras ou ícones.

Tons claros, escuros e cores que combinam

Os tons claros misturam a cor com branco e os escuros com preto em passos iguais, o que gera na hora variações para hover, bordas e fundos. A cor complementar fica do lado oposto do círculo cromático e chama muita atenção; as análogas ficam a 30° de cada lado e combinam de forma suave. Para ver uma cor ocupando a tela inteira, use a tela branca com uma cor personalizada. E se você está preparando imagens para um site com essa paleta, dá para comprimir as imagens e deixar os arquivos mais leves.