Conversor de Formatos de Cor
Cor
Escolha uma cor com o seletor nativo ou cole um HEX e veja na hora em todos os formatos CSS comuns — HEX, RGB moderno separado por espaços, RGB clássico com vírgulas, HSL, HSV, OKLCH (o espaço perceptualmente uniforme preferido pelo CSS moderno) e uma variável CSS pronta para colar. Cada valor com seu próprio botão de copiar.
- HEX
#3B82F6 - RGB
rgb(59 130 246) - RGB (legacy)
rgb(59, 130, 246) - HSL
hsl(217 91% 60%) - HSV
hsv(217, 76%, 96%) - OKLCH
oklch(62.3% 0.188 259.8) - Variável CSS
--color: #3B82F6;
Como usar
- Use o seletor ou cole um HEX (3 ou 6 dígitos, # opcional).
- Todos os formatos atualizam instantaneamente.
- Copie o formato que precisar com o botão à direita.
Perguntas frequentes
- O que é OKLCH?
- Um espaço de cor perceptualmente uniforme — distâncias numéricas iguais parecem distâncias visuais iguais. O CSS moderno suporta nativamente e ferramentas como Figma 2024+ estão adotando para gradientes mais suaves e melhor contraste.
- Por que duas linhas RGB?
- O CSS moderno usa espaços 'rgb(59 130 246)'; o legado e navegadores antigos esperam vírgulas 'rgb(59, 130, 246)'. Produzem a mesma cor.
- E a transparência (RGBA/HSLA)?
- Esta ferramenta foca cores opacas. Para transparência, adicione '/ 0.5' na sintaxe moderna (ex: 'rgb(59 130 246 / 0.5)') ou use a clássica 'rgba(…, 0.5)'.
- HSV é o mesmo que HSB?
- Sim — HSV (Value) e HSB (Brightness) são dois nomes para o mesmo modelo. CSS não aceita hsv() diretamente; use HSL nas folhas de estilo.
Ferramentas relacionadas
Paleta de Cor a partir de Imagem
Solte uma imagem e a ferramenta extrai uma paleta de cores dominantes via Canvas — copie HEX ou pegue o conjunto inteiro.
Simulador de Daltonismo
Veja como sua imagem se parece para pessoas com cada um dos 8 tipos de deficiência visual cromática (CVD).
Gerador de CSS Box Shadow
Desenhe box-shadow CSS visualmente em várias camadas, com pré-visualização ao vivo e saída CSS / Tailwind pronta para copiar.
Gerador de Gradientes CSS
Crie gradientes CSS lineares ou radiais com várias paradas de cor e copie o código.
Gerador de Paleta de Cores
Crie paletas harmoniosas a partir de uma cor base em seis esquemas.
Verificador de Contraste de Cor
Verifique o contraste texto/fundo nos níveis WCAG AA e AAA.