Conversor de cores (HEX, RGB, HSL)

Fluxos de design e desenvolvimento misturam várias formas de descrever a mesma cor na tela. HEX (#RRGGBB) é compacto em CSS e painéis de inspeção do Figma. RGB lista canais vermelho, verde e azul de 0–255 — a linguagem nativa de monitores e APIs de canvas. HSL expressa matiz em roda 0–360°, saturação como vividness 0–100% e luminosidade como brilho 0–100%, que muitos designers acham mais fácil ao ajustar tons sem desviar a matiz.

Todos os três formatos nesta ferramenta mapeiam para o mesmo gamut sRGB quando convertidos corretamente. HEX e RGB são inversos exatos em precisão de 8 bits. HSL usa matemática de ponto flutuante internamente; após conversão ida e volta você pode ver canais diferir um passo — normal em fluxos de edição HSL.

Alterne o controle segmentado Entrada entre HEX e RGB conforme o handoff fornecido. No modo HEX, digite com ou sem hash — #3B82F6 e 3B82F6 funcionam, assim como shorthand de três dígitos #3BF expandido para #33BBFF. No modo RGB, informe canais separadamente; a ferramenta gera HEX maiúsculo mais string CSS rgb() e detalhamento HSL.

Exemplo prático com o campo HEX padrão #3B82F6: vermelho = 0x3B = 59, verde = 0x82 = 130, azul = 0xF6 = 246. O resumo mostra RGB(59, 130, 246) — azul saturado comum em paletas Tailwind UI. HSL fica perto de matiz 217°, saturação 91%, luminosidade 60%. Mude para modo RGB com esses valores de canal e você obtém o mesmo HEX de volta.

HSL é útil ao construir tokens de design: aumente luminosidade para fazer #3B82F6 um estado hover sem escolher nova matiz. Reduza saturação para fundos suaves. Para temas programáticos, muitas equipes armazenam HSL em propriedades CSS customizadas porque a sintaxe alpha `hsl(217 91% 60% / 0.5)` lê claramente.

Erros comuns incluem assumir que HEX inclui alpha (oito dígitos #RRGGBBAA não é suportado aqui), misturar RGB normalizado 0–1 de algumas APIs gráficas sem multiplicar por 255, e comparar amostras Pantone impressas com hex sRGB em monitor não calibrado. Cores web são sRGB emissivo — conversão CMYK para impressão precisa perfil separado.

Shorthand HEX de três dígitos duplica cada nibble — #ABC vira #AABBCC. Caracteres inválidos ou comprimento errado retornam título traço pedindo cor válida como #3B82F6. Cores CSS nomeadas (rebeccapurple, cornflowerblue) não são interpretadas — converta para HEX no DevTools primeiro, depois cole aqui.

Limites: só sRGB opaco — sem CMYK, Lab, Display-P3 ou hex alpha de oito dígitos. Simulação de daltonismo e verificação de contraste pertencem à calculadora de contraste. Monitores WCG podem renderizar azuis saturados diferente da prévia sRGB em monitores padrão.