O que é Conversor de Cores?
Um conversor de cor é uma ferramenta indispensável para desenvolvedores web, designers gráficos e qualquer pessoa que trabalhe com cores digitais.
Quando Usar Esta Calculadora
- Você está convertendo uma especificação de cor de designer do Figma ou Sketch em valores compatíveis com CSS.
- Você está criando um design system.
- Você está criando uma paleta de cores com HSL.
- Você está verificando acessibilidade em relação aos padrões WCAG.
- Você está convertendo um valor de cor antigo em um formato diferente.
- Você está depurando problemas de cor CSS e verificando como uma cor realmente aparece.
Passos:
- Insira um valor de cor em qualquer formato.
- Selecione o formato de entrada com as guias HEX / RGB / HSL.
- Veja os valores convertidos nos três formatos abaixo do campo de entrada.
- Copie o valor desejado com o botão de copiar.
- Verifique o badge de contraste WCAG para acessibilidade.
Fórmula
HEX → RGB: Divida #RRGGBB em valores decimais
RGB → HSL: Normalize RGB → Encontre Tom/Saturação/Luminosidade
HSL → RGB: Use a fórmula de crominância para converter
Casos de uso
- Converter valores de cor CSS
- Criar paletas de cores a partir de uma cor base
- Combinar cores do sistema de design
- Entender relações de cor com HSL
Benefícios Principais
- Conversão instantânea e precisa entre formatos HEX, RGB e HSL
- Pré-visualização de cor ao vivo em tempo real enquanto você digita
- Badges automáticos AA e AAA para verificação de contraste WCAG
- Acesso a um histórico de conversões com suas cores recentes
- Copie qualquer valor de formato com um clique
- Funciona completamente no seu navegador sem enviar dados para servidores
Dicas Profissionais
- Use HSL para criar variações de cor
- Use sempre HEX em CSS e HTML
- Verifique sua escolha de cor com os requisitos de contraste WCAG
- Defina sua paleta base em HSL ao criar um design system
- Lembre-se de que valores HEX não são case-sensitive
Erros Comuns a Evitar
- Esquecer o prefixo # ao inserir cores HEX
- Usar valores de canal RGB fora da faixa 0-255
- Confundir a faixa de tom HSL com a faixa de canal RGB
- Assumir que luminosidade HSL e brilho RGB são equivalentes
Termos Chave Explicados
- HEX: Uma notação de cor hexadecimal usada em CSS e design web, escrita como #RRGGBB.
- RGB: O modelo de cor Vermelho-Verde-Azul onde cada cor é definida por três valores numéricos.
- HSL: O modelo de cor Tom-Saturação-Luminosidade.
- Espaço de cor: Um modelo matemático para organizar e representar cores.
- Razão de contraste WCAG: Uma medida numérica da diferença de luminosidade entre a cor de primeiro plano e o fundo.
Conceitos relacionados
- Conversor de unidades CSS: Converta px, rem, em, vw e outras unidades CSS.
- Encoder/Decoder Base64: Codifique e decodifique strings Base64.
- Formatador JSON: Formate e valide dados JSON.
- Testador de regex: Testar expressões regulares contra texto de amostra
- Encoder/Decoder URL: Codifique e decodifique strings seguras para URL.
Exemplo
Entrada: #FF5733 (HEX) → RGB: rgb(255, 87, 51) → HSL: hsl(11, 100%, 60%). Entrada: hsl(200, 50%, 50%) → RGB: rgb(64, 149, 191) → HEX: #4095BF.
Interpretação dos seus resultados
O conversor mostra sua cor em três formatos simultaneamente. HEX é o formato mais comum para desenvolvimento web. RGB oferece controle direto sobre os canais de cor. HSL é o mais natural para compreensão humana.