Conversor de Cores: HEX para RGB, HSL e OKLCH
Conversão de HEX, RGB, HSL e OKLCH com preview em tempo real.
HEX
#22c55e
RGB
rgb(34 197 94)
HSL
hsl(142.1 70.6% 45.3%)
OKLCH
oklch(0.723 0.192 149.6)
Join the Veojson dispatch
Quer nosso kit inicial de design tokens baseado em OKLCH? Entre na lista.
One email, no spam, unsubscribe any time.
Sobre esta ferramenta
Diferentes espaços de cor servem para tarefas distintas: HEX para handoff, HSL para ajustes rápidos e OKLCH para paletas perceptualmente uniformes onde a luminosidade se mantém consistente entre matizes.
Por que o OKLCH é importante
No HSL, duas cores com o mesmo valor de luminosidade podem parecer muito diferentes. O OKLCH é perceptualmente uniforme, garantindo paletas geradas sempre equilibradas.
Criando tons e sombras
Mantenha o croma e a matiz, variando apenas a luminosidade. Isso gera uma escala coerente muito mais rápido do que ajustar valores HEX manualmente.
Como usar Color Converter
- 1
Informe uma cor
Digite um valor HEX ou use o seletor — um HEX de 8 dígitos inclui o canal alfa.
- 2
Veja todos os formatos
Os equivalentes em RGB, HSL e OKLCH aparecem na hora, com prévia ao vivo.
- 3
Copie o valor CSS
Copie com um clique a notação de que sua folha de estilos precisa.
- 4
Confira o contraste
Verifique a cor na tabela de contraste WCAG abaixo antes de publicar.
Boas práticas
- Mantenha um formato padrão para sua equipe e aplique-o automaticamente via linters, e não em comentários de PR.
- Atenção ao encoding: UTF-8 na entrada e saída, sem caracteres BOM perdidos.
- Valide casos de borda — valores vazios, strings muito longas e caracteres especiais.
- Automatize a conversão no seu pipeline de build assim que o resultado estiver correto aqui.
Color Converter — Por que isso importa
Tarefas de formatação e conversão parecem simples, mas consomem horas preciosas de engenharia toda semana.
Realizá-las de forma instantânea e padronizada elimina uma categoria inteira de erros de copiar e colar.
Ferramentas relacionadas, grátis e pagas
| Ferramenta | Tipo | Principais recursos | Link |
|---|---|---|---|
| CoolorsOferta | Freemium | Geração e exportação rápida de paletas | Acessar |
| Adobe Color | Free | Regras de harmonia e testes de acessibilidade | Acessar |
| oklch.com | Free | Color picker OKLCH perceptivo para CSS moderno | Acessar |
| FigmaOferta | Freemium | Design tokens e estilos de cor compartilhados | Acessar |
Alguns links marcados como Oferta são links de parceiros. Não custam nada a mais para você e ajudam a manter estas ferramentas gratuitas.