Converter cores
O Conversor de cores lê uma cor em qualquer notação — hex com ou sem a cerquilha, rgb(), hsl(), hsb(), oklch() ou um dos 148 nomes de cores CSS — e a imprime de volta em todas de uma vez. Ele aceita a sintaxe com vírgula e a com espaço, mantém o alfa sempre que o formato de destino pode guardá-lo, e não retorna nada em vez de preto quando a entrada não é uma cor que ele consiga ler.
Digite uma cor à esquerda. São aceitos valores hexadecimais com ou sem cerquilha, rgb(), hsl(), oklch() e nomes de cores CSS.
Como funciona o Converter cores?
Tudo passa pelo sRGB. O que você digitar é interpretado em três canais e um alfa, e toda saída é renderizada a partir deles. É isso que torna as conversões consistentes: há uma representação no meio, não quinze fórmulas par a par que podem discordar entre si.
O que o parser aceita
Hex de três, quatro, seis ou oito dígitos, com ou sem a cerquilha inicial — o hex sem cerquilha importa porque é assim que valores chegam de uma planilha ou de um arquivo de design tokens. As duas sintaxes CSS: rgb(255, 136, 0) e rgb(255 136 0 / 50%). Porcentagens, que em rgb() resolvem contra 255 e não contra 100. hsl(), hsb() / hsv(), oklch(), e todas as 148 palavras-chave de cores CSS.
O que ele faz com algo que não consegue ler
Ele avisa. Uma ferramenta de cores que transforma silenciosamente um erro de digitação em preto é pior do que uma que recusa a entrada, porque você recebe uma amostra, acredita nela e publica. Um hex de comprimento errado — cinco dígitos, sete dígitos — é um erro de digitação e não uma cor, e é rejeitado em vez de ser preenchido até virar algo plausível.
Quais conversões são exatas e quais não são
Hex, RGB, HSL e HSV são os mesmos três bytes em coordenadas diferentes. Essas vão e voltam de forma exata, limitadas apenas pelas casas decimais com que a saída é impressa.
OKLCH é exata também na outra direção, mas pode descrever cores que o sRGB não consegue mostrar. oklch(0.7 0.3 140) é uma coordenada perfeitamente válida sem nenhum pixel sRGB por trás dela, e convertê-la recorta — então dois valores OKLCH diferentes podem voltar como o mesmo hex. Isso é uma propriedade do gamute, não um bug na aritmética.
CMYK é a aproximação. Uma conversão real precisa de um perfil ICC para a prensa, o papel e a tinta, e o mesmo valor sRGB vira percentuais de tinta diferentes no papel couché do que no papel-jornal. O número aqui é a fórmula independente de dispositivo que todo conversor online usa: certa para escolher uma amostra, errada para uma especificação de impressão.
Qualquer notação
#ff8800 rgb(255, 136, 0) hsl(32 100% 50%) darkorange FF8800
Todas
hex #ff8800 rgb rgb(255 136 0) hsl hsl(32 100% 50%) hsv hsv(32 100% 100%) oklch oklch(0.7538 0.1751 55.94) cmyk cmyk(0% 47% 100% 0%)
Quais opções e casos-limite o Converter cores suporta?
| Parâmetro | Tipo | Padrão | Comportamento e casos-limite |
|---|---|---|---|
| HEX | entrada / saída | exato | 3, 4, 6 e 8 dígitos, com ou sem a hashtag. Não diferencia maiúsculas de minúsculas. |
| RGB | entrada / saída | exato | Ambas as sintaxes, inteiros ou porcentagens, com alfa após uma barra ou como quarto argumento. |
| HSL | entrada / saída | exato | Os mesmos três bytes em coordenadas polares. O matiz é contínuo, então 370 é o mesmo que 10. |
| HSV / HSB | entrada / saída | exato | No qual a maioria das ferramentas de design é baseada. Não é CSS válido, então é lido, mas nunca é a saída recomendada. |
| OKLCH | entrada / saída | corta | Uniforme perceptualmente e mais amplo que sRGB. Uma coordenada fora do gamut é truncada no caminho de volta. |
| CMYK | saída | aproximado | A fórmula independente do dispositivo. Uma impressora fará a conversão real com seu próprio perfil. |
| Nomes de cores | entrada | 148 | Toda palavra-chave CSS, além de `transparent`. |
| Alfa | 0–1 | mantido | Preservado em todos os formatos que podem expressá-lo. CMYK não pode, e o descarta. |
Perguntas frequentes
Que formatos de cor posso colar?
Hex de três, quatro, seis ou oito dígitos, com ou sem a cerquilha; rgb() e rgba() na sintaxe com vírgula ou com espaço; hsl() e hsla(); hsb() ou hsv(); oklch(); e qualquer um dos 148 nomes de cores CSS. Porcentagens funcionam onde quer que o CSS permita. Se interpretar, todos os outros formatos aparecem imediatamente.
Por que o meu valor OKLCH volta como uma cor diferente?
Porque OKLCH descreve mais cores do que uma tela sRGB consegue mostrar. oklch(0.7 0.3 140) é uma coordenada válida sem nenhum pixel sRGB por trás dela, então convertê-la recorta o croma até caber — e dois valores OKLCH vívidos diferentes podem recortar para o mesmo hex. É o gamute, não a aritmética. Se você precisa da versão dentro do gamute, o seletor deste site limita em vez de recortar e diz o que mudou.
Posso confiar nos números CMYK para impressão?
Como ponto de partida, não como especificação. CMYK depende do dispositivo: o mesmo valor sRGB vira percentuais de tinta diferentes no papel couché do que no não revestido, e diferentes de novo em outra prensa. Nenhum conversor online pode saber qual é a prensa. Mande para a gráfica o sRGB ou a referência Pantone e deixe que ela converta com o perfil do trabalho.
O que acontece se eu colar algo que não é uma cor?
Nada é produzido e o campo diz que não conseguiu ler a entrada. Isso é de propósito. Um conversor que retorna preto silenciosamente diante de um erro de digitação entrega a você uma amostra sem motivo para dúvida, e um hex de comprimento errado — cinco ou sete dígitos — é um erro de digitação, não uma cor que precise ser preenchida.
Alguma coisa disso é enviada a um servidor?
Não. Toda conversão aqui é aritmética nesta aba. A página não faz nenhuma requisição de rede depois de carregar, o que você pode verificar abrindo o painel de rede, ou mais simplesmente desligando a sua conexão e vendo que ela continua funcionando.
Qual formato de cor eu devo realmente usar no CSS?
HEX para uma cor de marca fixa, HSL quando você quer derivar uma variante mais clara ou mais escura movendo um número, e OKLCH quando a uniformidade perceptual importa — um passo de dez pontos de luminosidade em OKLCH parece o mesmo passo em qualquer matiz, o que não é verdade no HSL. Os três descrevem as mesmas cores; o que difere é qual ajuste é fácil de fazer à mão.