Conversor de Cores

Conversor de Cores

Converta instantaneamente entre os formatos de cor HEX, RGB, HSL e HSV. Seja escrevendo CSS, criando no Figma ou no Photoshop ou montando a paleta de cores de uma marca, este conversor traduz qualquer valor de cor para todos os outros formatos, para que você sempre tenha o código exato que sua ferramenta espera.

Como Funciona a Conversão de Cores

Todos os modelos de cor de tela codificam as cores como três componentes numéricos que representam a mesma cor subjacente.

RGB para HEX -- converta cada um dos três valores decimais de 0-255 em um par hexadecimal de 2 dígitos e concatene com um prefixo #. Exemplo: rgb(255, 87, 51) torna-se FF (255), 57 (87), 33 (51) = #FF5733.

RGB para HSL -- normalize cada canal para 0-1, encontre os valores máximo (M) e mínimo (m) e, então: Matiz = ângulo baseado em qual canal é o máximo, Saturação = (M - m) / (1 - |2L - 1|), Luminosidade = (M + m) / 2. Exemplo: rgb(255, 87, 51) converte-se para hsl(11, 100%, 60%).

HEX para RGB -- interprete cada par hexadecimal de 2 caracteres como um número na base 16. #1A8FE3 dá R = 0x1A = 26, G = 0x8F = 143, B = 0xE3 = 227.

Exemplos Resolvidos

Exemplo 1 -- Auditoria de cor de marca. Uma diretriz de marca especifica o Pantone 485 C, aproximadamente #DA291C. Um desenvolvedor precisa da versão rgb() em CSS para um gradiente: rgb(218, 41, 28). Um designer precisa da versão HSL para criar uma tonalidade mais clara: hsl(4, 76%, 48%). Aumentar a luminosidade para 70% dá hsl(4, 76%, 70%) = uma tonalidade rosa-salmão, tudo a partir do mesmo hex original.

Exemplo 2 -- Verificação de acessibilidade. Um botão usa o texto #767676 sobre um fundo #FFFFFF. Convertendo para RGB, temos rgb(118, 118, 118) vs rgb(255, 255, 255). A luminância relativa de #767676 é cerca de 0.216 e a do branco é 1.0, resultando em uma razão de contraste de 4.54:1 -- passando por pouco no WCAG AA para texto normal (mínimo de 4.5:1).

Exemplo 3 -- Geração de paleta para modo escuro. Uma interface usa #0057B8 (HSL: 214, 100%, 36%) como seu azul primário em fundos claros. Para o modo escuro, mantenha o matiz em 214, mantenha a saturação em 100% e aumente a luminosidade para 60% para obter #3399FF -- um azul visivelmente mais claro que preserva o matiz da marca mas funciona em superfícies escuras.

Tabela de Referência

Quando Usar

• Copiar uma cor HEX de um arquivo de design e precisar da versão rgb() ou hsl() para variáveis CSS ou configuração do Tailwind.
• Gerar tonalidades de uma paleta de cores ajustando a luminosidade no HSL enquanto mantém o matiz e a saturação fixos.
• Verificar se duas cores em formatos diferentes são de fato a mesma cor antes de finalizar um design system.
• Converter um valor hex exportado do Photoshop para RGBA com um canal alfa para efeitos de sobreposição em CSS.
• Combinar uma cor da web com uma especificação de impressão convertendo para o equivalente CMYK mais próximo para uma gráfica.

Erros Comuns

1. Usar HEX de 3 dígitos como se fosse de 6 dígitos. #F53 é a forma abreviada de #FF5533, não de #F05030. Cada dígito em um código hex de 3 dígitos é duplicado, então só use a forma abreviada quando os dois dígitos de cada par de canal forem idênticos.
2. Tratar a luminosidade do HSL e o valor do HSV como a mesma coisa. Uma cor com luminosidade HSL de 50% e valor HSV de 100% parecem muito diferentes -- HSL 50% é um meio-tom totalmente saturado, enquanto o valor HSV de 100% é a tonalidade mais brilhante possível daquele matiz. Confundir esses valores ao trocar de ferramenta produz cores erradas.
3. Ignorar o canal alfa nas conversões RGBA. Converter rgba(255, 87, 51, 0.5) para HEX exige 8 dígitos: #FF573380. Descartar o alfa produz #FF5733, que é totalmente opaco -- um resultado visual completamente diferente sobre qualquer fundo não branco.
4. Erros de arredondamento acumulando-se ao longo de várias conversões. Converter de RGB para HSL e de volta pode introduzir erros de arredondamento de 1 unidade (por exemplo, rgb(255, 87, 51) pode retornar como rgb(255, 86, 51)). Guarde os valores originais e converta apenas uma vez antes do uso.

Aplicações no Mundo Real

As propriedades personalizadas do CSS funcionam bem com HSL porque gerar uma paleta completa a partir de uma cor base é simples -- defina --brand-hue: 214 e calcule todas as tonalidades variando a luminosidade de 10% a 90%. Design systems de empresas como GitHub, Stripe e Atlassian documentam publicamente seus tokens de cor tanto em HEX (para referências estáticas) quanto em HSL (para geração por programação). Os cálculos de contraste da WCAG exigem converter qualquer formato de cor em luminância relativa, que é derivada dos valores RGB lineares, tornando este conversor uma etapa prática nas auditorias de acessibilidade.

Dicas

1. Memorize as 6 cores dos vértices: #FF0000 vermelho, #FFFF00 amarelo, #00FF00 verde, #00FFFF ciano, #0000FF azul, #FF00FF magenta. Todos os outros matizes ficam entre dois destes na roda de cores.
2. Para clarear qualquer cor sem alterar seu matiz, converta para HSL e aumente o valor L. Para escurecê-la, reduza o valor L. Mantenha H e S inalterados.
3. Qualquer cor HEX em que os três pares são iguais (#333333, #AAAAAA, #F5F5F5) é um tom de cinza. Quanto maior o valor, mais claro o cinza.
4. Use propriedades personalizadas do CSS -- --brand-color: #FF5733 -- para definir uma cor uma vez e reutilizá-la. Alterar um valor atualiza toda a folha de estilos.
5. No design para modo escuro, evite texto #FFFFFF puro sobre fundos #000000 puros. Experimente #E8E8E8 sobre #1A1A1A (luminosidade HSL de ~91% sobre ~10%) para reduzir o cansaço visual com essencialmente a mesma razão de contraste.
6. Códigos hex de oito dígitos acrescentam um canal alfa como os dois dígitos finais: #FF573300 é totalmente transparente e #FF5733FF é totalmente opaco. Valores como #FF573380 dão cerca de 50% de opacidade.