Conversor de cores CSS
Cole uma cor em qualquer sintaxe do CSS: o conversor devolve a mesma cor em hex, rgb(), hsl(), oklch(), lab() e display-p3, e avisa quando ela não cabe no sRGB.
Veja
Cabe no sRGB: todas as sintaxes descrevem a mesma cor.
Copie o código
- Hex
#ffd600Ajustada ao sRGB - RGB
rgb(255 214 0)Ajustada ao sRGB - HSL
hsl(50.4 100% 50%)Ajustada ao sRGB - HWB
hwb(50.4 0% 0%)Ajustada ao sRGB - OKLCH
oklch(88.48% 0.1816 94.9)Ajustada ao sRGB - OKLab
oklab(88.48% -0.0155 0.181)Ajustada ao sRGB - LCH
lch(87.22% 86.46 87.75)Ajustada ao sRGB - Lab
lab(87.22% 3.39 86.39)Ajustada ao sRGB - Display P3
color(display-p3 0.974 0.8452 0.2844)Ajustada ao sRGB
O problema
Cada ferramenta entrega a cor numa sintaxe: o arquivo de design em hex, o manual da marca em RGB, um artigo recente em oklch(). No CSS todas valem, mas descrevem espaços de cor diferentes, e passar de uma para outra à mão pede matriz, raiz cúbica e trigonometria.
Nem toda cor cabe em toda sintaxe. As telas atuais mostram cores mais vivas que o sRGB, e hex, rgb(), hsl() e hwb() só descrevem o sRGB.
Como funciona
A conversão passa por um espaço de referência: a cor sai da sintaxe de origem, vira coordenadas absolutas (XYZ) e é escrita na sintaxe de destino. Em OKLCH, as coordenadas são as que a gente enxerga:
oklch(L C H) L é a luminosidade percebida (0% a 100%), C é o croma (0 é cinza) e H é o matiz, em graus.
Quando a cor não cabe no sRGB, o conversor faz o que o navegador faz: reduz o croma no OKLCH, mantendo luminosidade e matiz, até ela caber. É o mapeamento de gamut do CSS Color 4, e é por isso que o hex de uma cor muito viva sai um pouco mais apagado.
OKLCH é perceptualmente uniforme: o mesmo passo de L parece o mesmo passo de claridade em qualquer matiz, o que não acontece com o L do HSL. Por isso ele é a melhor escolha para tokens e escalas.
As sintaxes
| Sintaxe | Alcance | Bom para |
|---|---|---|
| #rrggbb | sRGB | Copiar de ferramentas de design e escrever fallbacks |
| rgb() | sRGB | Transparência e cores relativas (rgb(from ...)) |
| hsl() | sRGB | Girar o matiz à mão |
| hwb() | sRGB | Misturar um matiz com branco e preto |
| oklch() | Todas as cores visíveis | Tokens e escalas, com luminosidade previsível |
| oklab() | Todas as cores visíveis | Misturas e gradientes sem cinza no meio |
| lab() e lch() | Todas as cores visíveis | Cores vindas de impressão e de ferramentas de cor |
| color(display-p3 ...) | Display P3 | Cores vivas nas telas atuais |
Quando usar
- Levar uma cor do arquivo de design ou do manual da marca para OKLCH antes de montar os tokens.
- Conferir se uma cor em
oklch()cabe no sRGB e qual hex os navegadores antigos vão mostrar. - Escrever o fallback em hex de uma cor moderna.
- Entender uma cor que chegou em
lab()oucolor(display-p3 ...)num código que não é seu.
Outras ferramentas
Escala de cores OKLCH
Gere os tons de 50 a 950 a partir de uma cor, com luminosidade uniforme em OKLCH, o contraste de cada tom e as custom properties prontas.
CorGerador de gradientes CSS
Monte gradientes lineares, radiais e cônicos e compare a interpolação em sRGB, OKLab e OKLCH, sem o cinza no meio.
CorGerador de sombras CSS
Monte uma box-shadow em camadas, tingida com o tom do fundo, e leve a cor numa custom property pronta para trocar.