Conversor de cores HEX, RGB, HSL, CMYK e OKLCH

Formatos suportados e quando usar cada um

O conversor aceita texto livre: HEX com 3 ou 6 dígitos (com ou sem #), rgb(), hsl(), hsv() ou hsb() e cmyk(). Se preferir escolher visualmente, use o seletor de cor nativo do navegador. Assim que a cor é reconhecida, todos os formatos aparecem juntos, cada um com seu botão de copiar. A tabela abaixo usa #FF5733 como exemplo.

Os valores de LAB e OKLCH podem variar na casa decimal conforme o arredondamento e o ponto branco de referência. Além dos formatos, a ferramenta gera uma variável CSS pronta para colar no seu :root.

Como converter HEX para RGB (e de volta) à mão

Um código HEX é só o RGB escrito em base 16. Os seis dígitos formam três pares: vermelho, verde e azul. Cada dígito vale de 0 a F (onde A=10, B=11, C=12, D=13, E=14 e F=15), e cada par é convertido multiplicando o primeiro dígito por 16 e somando o segundo:

• FF → 15 × 16 + 15 = 255
• 57 → 5 × 16 + 7 = 87
• 33 → 3 × 16 + 3 = 51

Resultado: #FF5733 = rgb(255, 87, 51). No formato curto de 3 dígitos, cada dígito é duplicado: #F53 equivale a #FF5533.

O caminho inverso é a divisão por 16: 87 ÷ 16 = 5, com resto 7, e por isso 87 vira 57. Faça isso para os três canais e junte os pares.

Como converter RGB para HSL, com exemplo

A conversão para HSL reorganiza os mesmos dados em matiz (a posição no círculo cromático), saturação e luminosidade. Vamos seguir com rgb(255, 87, 51):

1. Normalize os canais dividindo por 255: R = 1, G ≈ 0,341, B = 0,2.
2. Encontre o máximo e o mínimo: máx = 1, mín = 0,2. A diferença (Δ) é 0,8.
3. Luminosidade: L = (máx + mín) ÷ 2 = 1,2 ÷ 2 = 0,6, ou 60%.
4. Saturação: S = Δ ÷ (1 − |2L − 1|) = 0,8 ÷ (1 − 0,2) = 1, ou 100%.
5. Matiz: como o máximo é o vermelho, H = 60 × ((G − B) ÷ Δ) = 60 × (0,141 ÷ 0,8) ≈ 10,6°, arredondado para 11°. Se o máximo fosse o verde, a fórmula seria 60 × ((B − R) ÷ Δ + 2); se fosse o azul, 60 × ((R − G) ÷ Δ + 4).

Resultado: hsl(11, 100%, 60%). O HSV usa o mesmo matiz, mas define V = máx (100%) e S = Δ ÷ máx (80%), por isso fica hsv(11, 80%, 100%). A diferença entre os modelos é explicada no guia de códigos de cor.

RGB para CMYK e os limites da impressão

A fórmula simples usada por conversores online parte dos canais normalizados:

K = 1 − máx(R, G, B)
C = (1 − R − K) ÷ (1 − K)
M = (1 − G − K) ÷ (1 − K)
Y = (1 − B − K) ÷ (1 − K)

Para o nosso exemplo, K = 0, C = 0, M ≈ 0,66 e Y = 0,8, ou seja, cmyk(0%, 66%, 80%, 0%).

O cálculo é exato, mas não prevê como a cor vai sair no papel. RGB é um modelo aditivo de luz, enquanto CMYK é subtrativo, feito de tinta. Várias cores de tela, sobretudo verdes e azuis muito saturados e laranjas neon, ficam fora da gama de impressão e saem mais apagadas. O resultado real depende do perfil ICC da gráfica (por exemplo, FOGRA ou GRACoL), do tipo de papel e da tinta. Use o valor do conversor como ponto de partida e peça uma prova de cor. O guia RGB x CMYK aprofunda o assunto.

LAB e OKLCH: cores pensadas para o olho humano

HEX, RGB e HSL descrevem como a tela produz a cor, não como nós a percebemos. Um exemplo deixa isso claro: amarelo #FFFF00 e azul #0000FF têm os dois 50% de luminosidade em HSL, mas o amarelo parece muito mais claro. Em OKLCH, a luminosidade do amarelo é de cerca de 97% e a do azul, cerca de 45%, o que corresponde bem ao que o olho vê.

O CIE LAB foi criado para ser perceptualmente uniforme: distâncias iguais entre valores devem corresponder a diferenças visuais parecidas. É a base de medidas como o Delta E, usado em controle de qualidade de cor. O OKLCH é uma versão mais recente e mais precisa dessa ideia, escrita em luminosidade, croma e matiz. Ele é suportado pelos navegadores atuais e permite criar escalas com passos visualmente regulares:

:root { --brand: oklch(68% 0.21 33.7); }
.botao:hover { background: oklch(60% 0.19 33.7); }

Para saber mais sobre oklch(), color-mix() e os novos espaços de cor, veja o guia de cores no CSS moderno e a referência da MDN.

Nome da cor, cor de texto e link compartilhável

Além das conversões, o conversor mostra o nome da cor nomeada mais próxima, o que ajuda a descrever a cor em uma conversa ou a encontrá-la no catálogo de cores. Ele também indica se o texto sobre essa cor fica mais legível em preto ou em branco, calculado pela luminância. Para validar outras combinações, use o verificador de contraste.

A URL da página é atualizada com o parâmetro ?c= seguido do HEX, por exemplo ?c=FF5733. Basta copiar o endereço para mandar a cor exata para um colega ou salvá-la nos favoritos.