Conversor de Cores: HEX, RGB, HSL, CMYK, OKLCH

As notações e quando usar cada uma

HEX

#rrggbb, ou #rrggbbaa com alfa. A forma curta #rgb duplica cada dígito. O padrão em ferramentas de design e no CSS.

RGB

Vermelho, verde e azul de 0 a 255. O CSS moderno escreve rgb(42 157 143 / 50%); o antigo rgba(42, 157, 143, 0.5) continua funcionando em todo lugar.

HSL

Matiz em graus, saturação e luminosidade em porcentagem. Fácil de ajustar à mão, mas 50% de luminosidade não tem o mesmo brilho em todos os matizes: o amarelo parece bem mais claro que o azul.

HSV / HSB

Matiz, saturação e valor (ou brilho). O modelo por trás dos seletores de cor do Photoshop, do Figma e da maioria dos apps de design. Não é válido em CSS.

HWB

Matiz mais a quantidade de branco e preto a misturar. CSS válido desde o Color Level 4 e intuitivo para criar variantes pastel ou apagadas.

CMYK

Porcentagens de tinta ciano, magenta, amarela e preta (key) para impressão. Os valores aqui usam a fórmula de dispositivo padrão; a cor impressa real depende do papel e do perfil de cor da impressora.

OKLCH

Luminosidade, croma e matiz em um espaço perceptualmente uniforme. A mesma luminosidade parece igualmente clara em todos os matizes, o que o torna a melhor escolha para criar escalas de cor e paletas acessíveis. Suportado em todos os navegadores atuais.

Nomes CSS

As 148 palavras-chave como tomato, rebeccapurple e slategray. O conversor mostra a mais próxima e indica quando a correspondência é exata.

HEX para RGB à mão

Uma cor HEX são três pares de dígitos em base 16. Divida #2a9d8f em 2a, 9d e 8f e converta cada par: 2a é 2 × 16 + 10 = 42, 9d é 9 × 16 + 13 = 157 e 8f é 8 × 16 + 15 = 143, então a cor é rgb(42, 157, 143). No sentido contrário, divida cada canal por 16: o quociente é o primeiro dígito e o resto, o segundo. Um HEX de 8 dígitos acrescenta um quarto par para o alfa, em que ff é totalmente opaco e 80 é cerca de 50%.

As conversões entre HEX, RGB, HSL, HSV e HWB são exatas, tirando o arredondamento. O CMYK é por natureza uma aproximação, e cores OKLCH que ficam fora da faixa sRGB que uma tela consegue mostrar são trazidas de volta reduzindo o croma, mantendo a luminosidade e o matiz que você pediu.

Qual notação usar no CSS?

Todos os navegadores atuais entendem HEX, rgb(), hsl(), hwb() e oklch(), então a escolha é sobre o que é mais fácil de ler e manter. HEX é compacto e é o que os designers entregam, por isso continua sendo o padrão seguro para valores avulsos. HSL é prático quando você quer ajustar uma cor à mão, por exemplo um estado de hover um pouco mais claro.

Para um design system, o OKLCH é cada vez mais a melhor escolha. Como sua luminosidade é perceptual, um conjunto de cores de marca com o mesmo valor L realmente parece igualmente claro, e você pode derivar uma escala inteira mudando só um número. Ele também descreve as cores mais vivas das telas P3 de gama ampla, o que HEX e rgb() não conseguem. Lembre que HSV, HSB e CMYK não são CSS válido: estão aqui para levar valores entre ferramentas de design e de impressão.

Tons claros, tons escuros, tons acinzentados e harmonias

Um tom claro mistura a cor com branco, um tom escuro com preto e um tom acinzentado com cinza. As três linhas avançam a partir da cor original em passos de 10%, o que dá estados de hover, bordas e fundos que claramente combinam.

As harmonias giram o matiz no círculo cromático: complementar é o matiz oposto, análoga são os vizinhos a 30° de cada lado, triádica são três matizes a 120° um do outro, complementar dividida são os dois matizes ao lado do complementar e tetrádica são quatro matizes a 90°. São um ponto de partida para cores de destaque, não uma regra: sempre confira as cores de texto no verificador de contraste. Para montar uma paleta a partir de uma foto, use o gerador de paleta de cores.