Conversor de Cores (HEX, RGB, HSL)
Converta cores entre HEX, RGB, HSL e OKLCH.
Digite uma cor em qualquer formato (HEX, RGB, HSL, OKLCH) e os outros formatos atualizam ao vivo. Perfeito para design tokens, variáveis CSS e brand kits.
rgb(10 124 255)
hsl(212 100% 52%)
oklch(0.608 0.215 257.4)
Melhor contraste com
texto preto → razão 5.34:1 (WCAG AA exige 4,5:1)
Como usar
Digite uma cor em qualquer formato
HEX, rgb(), hsl() ou oklch() no campo correspondente. Os outros formatos atualizam ao vivo.
Ajuste os canais direto
Mexa nos sliders R/G/B ou nos componentes HSL para refinar o tom.
Copie o formato que precisa
Use o botão de copiar ao lado do formato esperado pelo seu destino.
O que é?
Um conversor de cores traduz entre os formatos que CSS, ferramentas de design e editores de imagem usam de forma um pouco diferente. HEX (#0a7cff) é o atalho legado de um triplo RGB. RGB descreve intensidades vermelho/verde/azul. HSL é mais intuitivo para ajustar tonalidades. OKLCH é o novo modelo perceptualmente uniforme do CSS Color Level 4.
Quando usar
Quando uma cor migra entre contextos: copiar uma cor de marca de um SVG (HEX) para um sistema de variáveis CSS (HSL ou OKLCH), traduzir um pixel de screenshot (RGB) em token, gerar variantes acessíveis. Útil também para checar contraste WCAG.
Erros comuns
Não assuma que a luminosidade do HSL é perceptual - não é. hsl(60 100% 50%) (amarelo) e hsl(240 100% 50%) (azul) têm a mesma luminosidade no número mas luminâncias muito diferentes; OKLCH corrige. E não trunque canais HEX no meio da conversão: arredonde no fim.
FAQ
- Por que OKLCH?
- OKLCH é o novo formato do CSS Color Level 4. Diferente do HSL, é perceptualmente uniforme: ajustar luminosidade ou croma não desloca o tom.