Como usar o conversor de cores

Clique na amostra de cor ou no seletor para escolher uma cor visualmente.
Ou escreva diretamente um valor em um campo de formato, HEX, RGB, HSL ou OKLCH, e os outros se atualizam instantaneamente.
Clique em Copiar ao lado de qualquer formato para copiá-lo para a área de transferência.

HEX, RGB, HSL, OKLCH, quais são as diferenças?

HEX (#RRGGBB) é o formato de cor mais comum na web. Cada par de dígitos é um valor hexadecimal de 00 (0) a FF (255), representando os canais vermelho, verde e azul. Exemplo: #3498db é um azul médio. A forma abreviada #RGB existe para cores onde cada par se repete (ex. #fff = #ffffff).

RGB (vermelho, verde, azul) expressa cada canal como um número de 0 a 255. CSS aceita tanto rgb(52, 152, 219) quanto a sintaxe moderna rgb(52 152 219).

HSL (matiz, saturação, luminosidade) é o formato mais intuitivo para designers. A matiz é um ângulo na roda de cores (0-360°). A saturação controla a intensidade (0% = cinza). A luminosidade ajusta o brilho (0% = preto, 100% = branco). Incrementar ou decrementar a luminosidade cria tons e sombras da mesma matiz.

OKLCH (luminosidade, croma, matiz) é o espaço de cor perceptual moderno definido no CSS Color Level 4. Seu valor de luminosidade é perceptualmente uniforme e cobre uma gama de cores mais ampla que sRGB, incluindo as cores P3 das telas modernas.

Qual formato usar em CSS?

Use HEX para referências rápidas e tokens de design, compacto e universalmente compreendido
Use HSL para sistemas de temas onde você gera variantes ajustando um único valor
Use OKLCH para sistemas de design CSS modernos com rampas de cores consistentes e suporte wide-gamut
Use RGB com canvas, WebGL ou bibliotecas que esperam canais numéricos