Conversor de cores (HEX, RGB, HSL)
Converta cores entre HEX (#RRGGBB), RGB (0–255) e HSL (matiz, saturação, luminosidade) em tempo real.
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.
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.
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.