Converter cores HEX para RGB e HSL online — ferramenta grátis
Trabalhar com múltiplas linguagens e ferramentas de design frequentemente exige converter cores entre diferentes formatos. Um designer pode trabalhar em HEX no Figma e precisar converter para RGB para usar em uma animação JavaScript. Um desenvolvedor pode receber uma cor em HSL de uma especificação de design system e precisar do equivalente HEX para um arquivo CSS legado. O Seletor de Cor da WikiPlus resolve essa necessidade instantaneamente: converta qualquer cor entre HEX, RGB e HSL com um único clique, sem cálculos manuais e sem erros de conversão.
As matemáticas por trás das conversões de cor
Entender como as conversões funcionam ajuda a usá-las com mais confiança. HEX é simplesmente RGB escrito em base 16 (hexadecimal). #FF5733 equivale a R=255, G=87, B=51. A conversão de RGB para HSL é mais complexa matematicamente: envolve normalizar os valores RGB para 0-1, calcular o máximo e mínimo, determinar o matiz baseado em qual componente é dominante, e derivar saturação e luminosidade. Por exemplo, rgb(255, 87, 51) tem R dominante, resultando em H≈11°, S≈100%, L≈60%. A conversão inversa (HSL para RGB) usa fórmulas trigonométricas baseadas em setores de 60° do círculo cromático. A ferramenta da WikiPlus aplica essas fórmulas com precisão aritmética de ponto flutuante, garantindo conversões exatas sem arredondamentos problemáticos.
Quando usar cada formato de cor em seus projetos
A escolha do formato de cor deve ser guiada pelo contexto de uso. HEX é o formato padrão em HTML/CSS por sua compacidade e familiaridade — praticamente todo designer e desenvolvedor web reconhece um código HEX. Use HEX quando precisar de uma cor exata especificada por um brand guideline (ex: #0011FF para a WikiPlus). RGB é preferível quando precisa manipular cores em código JavaScript, especialmente ao ler pixels de imagens via Canvas API (que retorna valores RGB) ou ao criar gradientes programáticos. HSL é a melhor escolha para criar e manter design systems, pois torna trivial gerar tons e sombras consistentes. Muitos designers modernos usam HSL como formato primário e convertem para outros formatos apenas quando necessário para integração.
Conversão de cores em CSS e JavaScript
CSS aceita cores em qualquer formato nativo, sem necessidade de conversão: color: #ff5733; color: rgb(255, 87, 51); color: hsl(11, 100%, 60%) — todos produzem exatamente o mesmo resultado visual. Em JavaScript, a Web Colors API pode ajudar com conversões, mas para a maioria dos projetos, uma função simples de conversão ou uma biblioteca como chroma.js ou color.js é suficiente. Para CSS custom properties em design systems, armazenar as variáveis em HSL facilita criar temas: --hue: 220; --color: hsl(var(--hue), 80%, 50%); --color-light: hsl(var(--hue), 80%, 80%). Mudando apenas a variável --hue, toda a paleta muda de cor. O Seletor de Cor da WikiPlus ajuda a encontrar os valores iniciais corretos para cada cor do sistema.
Acessibilidade e relação de contraste entre cores
Uma das aplicações mais importantes da conversão de cores é o cálculo de contraste para acessibilidade. As diretrizes WCAG 2.1 exigem relação de contraste mínima de 4.5:1 para texto normal e 3:1 para texto grande. O cálculo de contraste usa a luminância relativa de cada cor, que é derivada dos valores RGB. Para verificar se uma combinação de cores passa nos critérios de acessibilidade, você precisa dos valores RGB de ambas as cores — o Seletor de Cor da WikiPlus fornece esses valores imediatamente. Em geral, combinações de cores muito similares em luminosidade têm contraste insuficiente. Usar HSL para selecionar cores com diferença significativa de luminosidade (L) é um bom ponto de partida para garantir acessibilidade antes de verificar formalmente.
Perguntas frequentes
- Os valores HSL no seletor usam graus, porcentagem ou valores absolutos?
- O Seletor de Cor da WikiPlus exibe HSL no formato padrão CSS: Hue em graus (0-360), Saturation em porcentagem (0%-100%) e Lightness em porcentagem (0%-100%). Este é o formato diretamente utilizável em CSS sem nenhuma conversão adicional.
- Como pegar a cor exata de um elemento na tela?
- Para capturar a cor de um elemento na tela, use a ferramenta de seleção de cor do seu sistema operacional (ex: Digital Color Meter no macOS, PowerToys Color Picker no Windows) ou a ferramenta de inspeção do navegador (DevTools > inspeção de elemento > clique na amostra de cor). Depois cole o código HEX obtido no Seletor de Cor da WikiPlus para obter os equivalentes em outros formatos.
- Existe diferença entre #RGB e #RRGGBB em CSS?
- Sim. #RGB é uma notação abreviada onde cada dígito é duplicado: #F53 equivale a #FF5533. Só é possível usar a forma curta quando ambos os dígitos de cada canal são iguais. O Seletor de Cor da WikiPlus sempre fornece a forma completa de 6 dígitos (#RRGGBB), que é compatível com todos os contextos CSS.