Conversor de Cores – HEX, RGB, HSL, HWB e OKLCH
Converta uma cor entre HEX, RGB, HSL, HWB e OKLCH ao mesmo tempo, com variações de tom prontas para usar no CSS.
#8b5cf6
HEX
#8b5cf6
HEX + alpha
#8b5cf6ff
RGB
rgb(139, 92, 246)
HSL
hsl(258.3, 89.5%, 66.3%)
HWB
hwb(258 36.1% 3.5%)
OKLCH
oklch(60.56% 0.2189 292.72)
Contraste sobre branco
4.23:1
AA apenas para texto grande
Contraste sobre preto
4.96:1
AA para texto normal
Escala de tons
Clique em um tom para usá-lo como cor principal. A escala mantém matiz e saturação, variando a luminosidade.
Como usar esta ferramenta
- Informe a cor em qualquer formato ou use o seletor
- Veja a conversão simultânea em todos os formatos
- Explore as variações de tom geradas
- Copie o valor no formato que o seu CSS usa
Sobre esta ferramenta
O que é
Cada formato descreve a mesma cor de um jeito. HEX e RGB falam em quantidade de vermelho, verde e azul; HSL e HWB falam em matiz, saturação e luminosidade; OKLCH é perceptualmente uniforme, o que torna as variações de tom mais previsíveis.
Quando usar
- Traduzir a cor de um layout para o formato usado no CSS
- Gerar variações claras e escuras de uma cor da marca
- Montar design tokens de um sistema de design
- Converter cores de uma biblioteca para outra
- Entender por que dois tons parecem diferentes com a mesma luminosidade
Perguntas frequentes
- Por que usar OKLCH em vez de HSL?
- Porque em HSL duas cores com a mesma luminosidade podem parecer bem diferentes aos olhos. OKLCH é perceptualmente uniforme, então clarear ou escurecer produz resultado consistente entre matizes.
- HEX com oito dígitos é o quê?
- É HEX com canal alfa: os dois últimos dígitos representam a opacidade, de 00 (transparente) a FF (opaco).
- Todos os formatos funcionam em qualquer navegador?
- HEX, RGB e HSL funcionam em tudo. HWB e OKLCH exigem navegadores recentes — vale declarar um fallback quando o público inclui versões antigas.