Como converter HEX para RGB, HSL e OKLCH, e qual colar em cada lugar

Converter uma cor é aritmética. Decidir qual dos resultados colar é a parte em que as pessoas erram, porque as notações não são intercambiáveis naquilo que permitem fazer depois.

Converta uma cor com a ferramenta

1. Abra o conversor de cores e digite ou cole no campo Any CSS colour (qualquer cor CSS). Ele lê hex com ou sem a cerquilha, nomes de cores do CSS e valores rgb(), hsl() e oklch(). A amostra à esquerda do campo abre um seletor de cores, se você preferir escolher a olho.
2. Confira a amostra grande logo abaixo. Ela mostra a cor num tamanho em que dá para avaliar, com o código hex escrito em preto ou branco, o que tiver contraste maior com ela.
3. Encontre o grupo do lugar para onde o valor vai: Paste into CSS (colar no CSS), Paste into a design tool (colar numa ferramenta de design) ou Going to print (vai para impressão). Cada linha traz uma nota de uma linha sobre quando usá-la.
4. Clique numa linha para copiá-la. A linha inteira é o botão, e o rótulo dela muda para “copied”. Para levar tudo de uma vez, pressione Copy all formats (copiar todos os formatos) na barra no pé da página (ou a tecla C), que copia todas as conversões, uma por linha.
5. Antes de confirmar, leia Contrast as text (contraste como texto). Ele mostra a razão da sua cor como texto sobre branco e sobre preto, com os rótulos “AA body”, “AA large only” ou “fails AA”. Ao lado, Colour vision (visão de cores) mostra a mesma cor em oito amostras: a visão típica e sete deficiências simuladas.

Uma cor em todas as notações

A ferramenta abre com #2563EB. Veja o que ela dá para essa cor e onde cada valor deve ir.

Notação	#2563EB escrito como	Cole em
HEX	#2563EB	Qualquer propriedade CSS; qualquer lugar onde um valor simples basta
RGB	rgb(37 99 235)	CSS quando você precisa de transparência, como rgb(37 99 235 / 50%); canvas e dados de imagem
OKLCH	oklch(54.6% 0.215 262.9)	Design tokens, escalas, variantes mais claras e mais escuras
HSL	hsl(221 83% 53%)	Um ajuste rápido à mão, nunca um sistema
HEX, sem cerquilha	2563EB	Campos de cor do Figma, do Sketch e do Canva
Variável CSS	--color: #2563eb;	Um arquivo de tokens
CMYK	cmyk(84% 58% 0% 8%)	Uma conversa com a gráfica, não uma especificação

Uma notação de cor é uma forma de escrever uma cor, e não uma cor diferente. Todas as linhas acima são o mesmo azul. O que muda é o que os números permitem raciocinar: o HEX não diz nada só de olhar, o RGB é o que a tela faz, o HSL é fácil de ajustar à mão, e o OKLCH é aquele cujo eixo de luminosidade corresponde ao que você vê.

Esse último ponto merece um número, em vez de repetir o argumento inteiro. Com luminosidade HSL de 50%, o amarelo puro tem luminância relativa de 0.928 e o azul puro de 0.072, quase treze vezes de diferença com a mesma luminosidade nominal. Por que isso descarta o HSL para qualquer coisa sistemática, e o que o OKLCH faz no lugar, está explicado em OKLCH para designers.

O que dá errado na conversão

O HSL arredondado não volta para o mesmo hex

O conversor arredonda o HSL para números inteiros, como quase toda ferramenta e folha de estilo faz. Esse arredondamento perde informação. Leve hsl(221 83% 53%) de volta para RGB e o canal vermelho dá 255 × (0.53 − 0.83 × 0.94 ÷ 2) = 255 × 0.1399 = 35.7, que arredonda para 36. O original era 37. Então #2563EB sai como HSL e volta como #2463EB.

Ninguém consegue ver uma diferença de um no canal vermelho. Uma auditoria de tokens que compara strings, ou um arquivo de design que confere um hex exato da marca, vai ver sempre. Guarde o valor HEX ou OKLCH como fonte da verdade e trate o HSL como uma forma de visualizá-lo.

A transparência não sobrevive

Cole um hex de oito dígitos como #2563EB80 e todos os formatos voltam opacos, porque o conversor trabalha com a cor e descarta o canal alfa. Se você precisa da transparência, acrescente-a de volta na forma RGB, rgb(37 99 235 / 50%), que é o que a nota da ferramenta na linha RGB sugere.

CMYK não é uma cor de impressão

CMYK de dispositivo é uma conversão direta do RGB da tela para porcentagens de tinta sem perfil ICC, então ela não sabe nada sobre o papel, a impressora ou as tintas. A conta é simples o bastante para conferir à mão. Para #2563EB, o preto é K = 1 − 235 ÷ 255 = 8%, e o ciano é (1 − 37 ÷ 255 − 0.078) ÷ (1 − 0.078) = 84%. Todo conversor da web faz esse mesmo cálculo ingênuo, por isso a ferramenta o rotula como ponto de partida. Para impressão, converta num software que conheça o perfil do seu papel e da sua impressora.

A notação não muda o contraste

Converter nunca melhora a legibilidade de uma cor. Luminância relativa é a medida do WCAG para a quantidade de luz que uma cor emite, de 0 para o preto a 1 para o branco, e as razões de contraste são calculadas a partir dela. #2563EB tem luminância relativa de 0.1532, seja qual for a forma de escrevê-la. Como texto sobre branco, isso dá (1 + 0.05) ÷ (0.1532 + 0.05) = 5.17, que a ferramenta mostra como 5.16:1 porque trunca em vez de arredondar, para que uma razão logo abaixo de um limite nunca apareça como aprovada. Sobre preto, dá (0.1532 + 0.05) ÷ 0.05 = 4.06:1: só texto grande. Se uma cor reprova, a solução é uma mudança de luminosidade, que é o que o verificador de contraste procura.

Outras formas de fazer isso

No CSS, talvez você nem precise converter. HEX, rgb(), hsl() e oklch() são todos valores de cor válidos no CSS, então um valor vindo de um arquivo de design normalmente pode ser colado como está.

HEX para RGB é fácil à mão, porque cada par de dígitos hex é um número em base 16. Para #2563EB: 25 é 2 × 16 + 5 = 37, 63 é 6 × 16 + 3 = 99, e EB é 14 × 16 + 11 = 235. Isso dá rgb(37 99 235).

OKLCH não é prático à mão. Exige linearizar cada canal, duas multiplicações de matriz e uma raiz cúbica, um trabalho para código. Não indicamos aqui nenhum método nativo do sistema operacional, porque não verificamos nenhum que produza todas essas notações.

Como verificar que nada saiu da página

A conversão roda na aba, e a cor que você digita é gravada na barra de endereços depois de um #. Essa parte da URL nunca é enviada ao servidor, e é também por isso que um link copiado reabre a mesma cor. Para conferir, abra as ferramentas de desenvolvedor do navegador, escolha o painel Network e digite algumas cores: você não verá nenhuma requisição levando esses valores. O beacon de analytics da própria página informa o caminho da página, não o fragmento.

Próximo passo

Abra o conversor de cores e cole a cor que você está prestes a usar. Se ela vai entrar num sistema, e não numa regra isolada, o gerador de escalas e tokens transforma um valor OKLCH em onze passos com papéis atribuídos pelo contraste medido.