HEX, RGB, HSL, HSV, CMYK, LAB e XYZ em uma tela só.
Muita gente pesquisa esse tema para descobrir a diferença entre HEX e RGB, entender quando usar HSL ou saber por que a mesma cor aparece em formatos diferentes no CSS, no design e na edição de imagem. Esta ferramenta recebe uma cor em qualquer um desses formatos, HEX, RGB(A), HSL(A), HSV(A), CMYK, LAB, XYZ ou nome CSS, e mostra todas as outras representações sincronizadas ao mesmo tempo, incluindo o canal alpha de transparência. Por baixo, tudo passa por RGB e usa fórmulas de referência (EasyRGB e CSS Color 4), com LAB e XYZ adotando o iluminante padrão D65. HEX e RGB descrevem a cor pelos canais vermelho, verde e azul; HSL e HSV reorganizam isso em matiz e brilho; CMYK pensa em tinta; e LAB/XYZ são espaços perceptuais independentes de dispositivo. Entender qual formato usar em cada contexto evita retrabalho e explica por que a mesma cor pode 'parecer' diferente entre tela e impressão.
HEX e RGB descrevem a cor pela intensidade dos canais vermelho, verde e azul, HEX em hexadecimal (#RRGGBB) e RGB em números de 0 a 255; são a mesma informação em notações diferentes. HSL e HSV reorganizam esses canais em matiz (0–360°) mais duas medidas: no HSL a terceira é a luminosidade (ponto médio entre a cor mais clara e a mais escura), no HSV é o valor (o brilho máximo do canal). Por isso 'saturação 100%' significa coisas ligeiramente diferentes nos dois modelos.
CMYK inverte a lógica para tinta: ciano, magenta, amarelo e preto (key), com o preto calculado como k = 1 − max(R,G,B). LAB e XYZ são espaços independentes de dispositivo: XYZ é a base perceptual da CIE e LAB (aqui no iluminante D65) separa a luminosidade (L) de dois eixos de cor (a e b), o que o torna útil para medir diferença de cor de forma mais próxima do olho humano.
O azul #0EA5E9 vira rgb(14, 165, 233), hsl(199, 89%, 48%) e hsv(199, 94%, 91%), o mesmo tom em três organizações. Repare que a saturação difere entre HSL (89%) e HSV (94%): não é erro, é a definição de cada modelo. O canal alpha aparece nas variantes com 'a', como rgba(14, 165, 233, 0.5) para 50% de opacidade.
Uma conversão HEX → HSL passo a passo: para #0EA5E9, os canais normalizados são R≈0,055, G≈0,647, B≈0,914; o maior é B e o menor é R, então o matiz gira em torno do azul (~199°), a luminosidade é a média entre máximo e mínimo (~48%) e a saturação vem da diferença entre eles. É exatamente essa conta que a ferramenta faz e sincroniza em todos os campos ao mesmo tempo.
Use HEX para código e handoff (compacto), HSL para gerar temas e estados girando matiz e luminosidade, CMYK como referência para impressão e LAB quando precisar comparar cores de forma perceptual. O canal alpha entra em overlays, sombras e estados de interface que precisam deixar o fundo aparecer parcialmente.
Nem toda conversão é perfeita: RGB e CMYK cobrem gamas de cor diferentes, então uma cor vibrante de tela pode não ter equivalente exato em tinta, e o arredondamento de cada etapa (HEX tem 8 bits por canal) pode introduzir pequenas diferenças no ida e volta. Para fidelidade alta, trate os valores convertidos como referência e valide no meio final, tela calibrada ou prova de impressão.
Cole o código no seu HTML e a ferramenta aparece na sua página, sem a navegação e sem os anúncios do J-Kit. Ela continua rodando no navegador de quem visita o seu site.
<iframe
src="https://jkit.tools/embed/pt-BR/conversor-cores"
width="100%"
height="600"
style="border:0"
loading="lazy"
title="Conversor de Cores"
></iframe>Estas referências ajudam a contextualizar fórmulas, padrões, APIs e limitações usadas nesta página. Elas não substituem validação profissional quando o resultado tiver impacto jurídico, financeiro, médico ou operacional.
Sim. A proposta é mostrar representações equivalentes da mesma cor em formatos diferentes, facilitando uso em CSS, design systems, documentação visual e integração entre ferramentas de design e desenvolvimento. Você digita em um formato e recebe todos os outros sincronizados ao mesmo tempo, incluindo HSV, CMYK, LAB e XYZ.
#0ea5e9#0ea5e9ffrgb(14, 165, 233)rgba(14, 165, 233, 1)hsl(199, 89%, 48%)hsla(199, 89%, 48%, 1)hsv(199, 94%, 91%)hsva(199, 94%, 91%, 1)cmyk(94%, 29%, 0%, 9%)lab(64.07, -11.09, -43.86)xyz(28.338, 32.883, 81.928)A conversão é puramente matemática e local. Nada é enviado para o servidor.