Conversor de cores — conversor online de HEX, RGB, HSL _

O que é conversão de cores?

Cada cor que o seu navegador apresenta é, em última análise, um trio sRGB — três números entre 0 e 255 para os canais vermelho, verde e azul, mais um alfa opcional. A especificação CSS Color Level 4 define vários formatos de texto que se reduzem ao mesmo trio, mais o espaço perceptualmente uniforme OKLCH. Esta ferramenta lê qualquer um deles, converte para todos eles e indica o rácio de contraste WCAG 2.1 contra uma segunda cor, para que possa entregar interfaces acessíveis com confiança.

Como funciona a conversão de cores?

A conversão é uma série de transformações lineares e não lineares bem definidas. Cada passo corre no seu navegador — nenhuma entrada chega aos nossos servidores:

1. A sua entrada é analisada. A ferramenta detecta automaticamente HEX de 3, 4, 6 ou 8 dígitos, as formas funcionais rgb()/rgba()/hsl()/hsla()/hsv()/hwb() em sintaxe legada com vírgulas ou sintaxe moderna com barra de alfa, ou qualquer uma das 150 cores nomeadas do CSS (incluindo rebeccapurple).
2. A cor analisada é normalizada para sRGB canónico — quatro valores em vírgula flutuante {r, g, b, a}, cada um no intervalo 0–1. Esta é a única fonte de verdade da qual todos os formatos de saída são derivados.
3. O HEX resulta de arredondar cada canal ao seu valor de byte 0–255 e juntar os dígitos hexadecimais. RGB / RGBA imprimem os mesmos bytes. HSL e HSV aplicam os algoritmos padrão de coordenadas cilíndricas do W3C; o HWB deriva a matiz do HSV, a brancura de min(r, g, b) e a pretidão de 1 - max(r, g, b).
4. O CMYK é uma aproximação ingénua — k = 1 - max(r, g, b), e depois c, m, y a partir dos canais residuais. É adequado para pré-visualização no ecrã, mas não para impressão: uma saída CMYK real exige um perfil ICC que esta ferramenta intencionalmente não inclui.
5. O OKLCH segue o caminho directo da css-color-4: o sRGB é linearizado, multiplicado pela matriz LMS, é-lhe extraída a raiz cúbica, multiplicado pela matriz LMS-para-OKLab, e finalmente convertido de OKLab rectangular para OKLCH polar. O OKLCH é perceptualmente uniforme, o que faz dele o espaço certo para desenhar paletas que parecem equilibradas ao olho humano.

Por que usar este conversor de cores?

• Privacidade: cada conversão corre no seu navegador usando JavaScript puro. A cor que cola nunca sai do seu dispositivo, o que importa para trabalho de marca por divulgar, sistemas de design internos e maquetes para clientes sob NDA.
• Passagem de design para desenvolvimento: cole o HEX do Figma e leia de volta a cadeia rgb() para uma configuração Tailwind, a cadeia hsl() para uma propriedade CSS personalizada, ou a cadeia oklch() para uma paleta moderna — todos os formatos num só sítio, sem copiar e colar entre separadores.
• Precisão WCAG: o verificador de contraste usa a fórmula exacta de luminância relativa WCAG 2.1 e os limiares publicados AA (4,5 / 3,0) e AAA (7,0 / 4,5) para texto normal e grande. O rácio indicado coincide com as calculadoras manuais até 0,01.
• Derivação de modo escuro e paletas: HSL e OKLCH expõem a luminosidade como um único canal, por isso é simples deslocar uma cor de marca para cima ou para baixo no eixo da luminosidade para derivar tokens combinados de modo escuro ou gerar uma rampa de paleta de 10 passos a partir de uma única semente.

Quais são as aplicações comuns da conversão de cores?

A conversão de cores aparece em desenvolvimento web, design e trabalho de acessibilidade:

• Sistemas de design: converter um HEX de marca nos tokens HSL e OKLCH combinados para uma escala de propriedades CSS personalizadas e, depois, verificar que cada combinação de tokens passa o WCAG AA contra o fundo da página.
• Auditorias de acessibilidade: colar um par de primeiro plano e fundo de um ecrã de produto real e ler num só relance o rácio de contraste e os veredictos AA/AAA tanto para texto de peso normal como de peso grande.
• Idas e voltas entre ferramentas: tirar uma cor de um selector de captura de ecrã (HEX), colá-la aqui e copiar a cadeia hsl() ou oklch() directamente para o Tailwind, para tokens do Figma ou para um tema CSS-in-JS.

Como é um exemplo de conversão de cores?

Pegue no famoso rebeccapurple. A pesquisa de cor nomeada resolve-o para #663399. A conversão para RGB dá rgb(102, 51, 153). A conversão para HSL dá hsl(270, 50%, 40%) — uma matiz violeta, com meia saturação e quatro décimos de luminosidade. Verificar essa cor contra branco puro com a ferramenta de contraste devolve um rácio perto de 7,39, que cumpre AAA (7,0) para texto normal e AAA (4,5) para texto grande — uma escolha de primeiro plano forte e acessível. Passar #663399 por RGB → HSL → RGB → HEX devolve a cadeia original exactamente, byte a byte.

Use este conversor como referência rápida para qualquer cor que encontre — em código, em ficheiros de design ou numa captura de ecrã — e o verificador de contraste como verificação de sanidade antes de entregar. Tudo corre localmente, nada é registado e a matemática da conversão segue as especificações publicadas do W3C e da WCAG, por isso os números coincidem com o que a sua ferramenta de auditoria ou as devtools do navegador indicariam.