Conversor de Cores: Transforme Formatos de Cor Online
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
Acesse o Conversor de Cores
Tudo roda nesta página — não há nada para instalar e não é preciso criar conta para usar as ferramentas gratuitas.
- 2
Insira seu código de cor
Cole ou digite seus valores no painel acima. A ferramenta atualiza enquanto você digita para acelerar seu trabalho.
- 3
Confira o resultado
Verifique o resultado, copie com um clique e ajuste as opções até ficar exatamente como seu sistema precisa.
- 4
Vá além
Use as dicas de formatação abaixo para deixar o resultado pronto para produção e libere recursos extras pelo formulário.
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.