Conversor de cores (HEX, RGB, HSL)
Converta cores entre HEX (#RRGGBB), RGB (0–255) e HSL (matiz, saturação, luminosidade) em tempo real. Ajuste o seletor ou os valores de tipo para ver todos os formatos atualizados juntos - ideal para CSS, transferência de Figma e diretrizes de marca. HSL torna ajustes intuitivos (mais claro/mais escuro sem mudança de matiz) mais fáceis do que editar dígitos hexadecimais.
Cor
Resultado
HEX: #6f9b96
RGB: rgb(111, 155, 150)
HSL: hsl(173, 18%, 52%)
Como converter cores
1. Escolha uma cor visualmente ou digite valores HEX, RGB ou HSL.
2. Veja valores equivalentes em todos os formatos suportados instantaneamente.
3. Ajuste a luminosidade do HSL para estados de foco enquanto mantém a marca matiz.
4. Copie o formato que sua pilha precisa (#hex para CSS, rgb() para navegadores modernos).
Exemplos de conversão de cores
Marca azul #2563EB
RGB rgb(37, 99, 235); HSL hsl(217, 84%, 53%). Escureça o foco: hsl (217, 84%, 45%) sem adivinhar hexadecimal.
CSS rgb para HEX para SVG
rgb(255, 87, 51) → #FF5733 para preenchimento SVG e recursos de cores XML do Android.
Cinza neutro para bordas
hsl(220, 10%, 90%) → cinza frio muito claro; aumente ligeiramente a saturação para fundos de interface de usuário coloridos.
Quando usar esta ferramenta
• Quando você traduz tokens de design entre HEX no Figma e HSL em variáveis CSS.
• Quando você cria temas claros/escuros consistentes mudando a luminosidade do HSL.
• Quando você documenta paletas de marca para desenvolvedores e profissionais de marketing.
Quando escolher outra coisa
• Quando você deve verificar Contraste WCAG - use o verificador de contraste.
• Quando você precisar de CMYK ou Pantone para impressão - use ferramentas específicas de impressão.
• Quando você gerar gradientes completos - use o gerador de gradiente CSS.
Teoria das cores para trabalho de UI
As cores complementares ficam opostas na roda de matiz (180° de distância) — alto contraste, use com moderação para CTAs. Tons análogos (±30°) parecem harmoniosos nos painéis. O cromo neutro da UI geralmente usa azuis ou cinzas de baixa saturação (hsl 220, 10%, 96%) em vez de #EEE puro, que pode parecer quente/frio em telas diferentes. Limite a paleta da marca a um matiz primário, 2–3 neutros e verdes/vermelhos semânticos para status.
A acessibilidade começa na conversão
Um lindo roxo #7C3AED em branco pode falhar no contraste para textos pequenos. Depois de escolher as cores aqui, execute os pares de primeiro plano/fundo no verificador de contraste. Prefira ajustes de HSL para corrigir falhas: escurecer o texto ou clarear o fundo enquanto preserva o matiz. Não confie apenas na cor para erros - combine com ícones e rótulos (WCAG 1.4.1).
Perguntas frequentes
Para que serve o HSL?
Ajustar a luminosidade e a saturação enquanto mantém o matiz estável - por exemplo, primário, foco primário, silenciado primário de um valor de matiz.
Abreviação HEX #RGB?
#F53 se expande para #FF5533. Aceitamos hexadecimal de 3 ou 6 dígitos (# opcional).
sRGB vs display-P3?
Esta ferramenta usa sRGB, padrão para web CSS. Exibições de ampla gama podem ser renderizadas de maneira um pouco diferente.
Alfa / transparência?
HEX de 8 dígitos (#RRGGBBAA) e rgba() podem ser suportados onde a ferramenta expõe alfa - verifique os campos da UI.
Por que minhas somas RGB parecem erradas em hexadecimal?
Cada canal tem 0–255 → dois dígitos hexadecimais. 255 = FF, não “255” concatenado.
Os dados são enviados para um servidor?
Não.
A ferramenta é gratuita?
Sim.