Por que minha cor mostra "fora de sRGB"?

Monitores padrão só podem mostrar uma fatia limitada da cor visível humana (sRGB). OKLCH é um espaço mais amplo, perceptualmente uniforme, então te deixa especificar cores que simplesmente não cabem numa tela sRGB. Navegadores recortam pra o match sRGB mais próximo — a prévia hex mostra o resultado recortado.

Por que preferir oklch() ao hsl()?

HSL foi construído em cima de RGB então sua luminosidade é desigual através de matizes (amarelo parece muito mais brilhante que azul no mesmo L). OKLCH foi afinado contra dados de percepção reais, então animações, tokens de tema e razões de acessibilidade ficam previsíveis ao mudar matiz.

Seletor de Cor OKLCH

Cor

OKLCH é o espaço de cor que o CSS Color 4 usa pra fazer luminosidade, saturação e matiz se comportarem como o olho realmente espera: cutucar matiz em L+C fixo mantém o brilho percebido estável, onde o HSL antigo mudaria dramaticamente. Este seletor expõe os três canais mais alfa e te deixa ver a forma exata CSS oklch(), o hex / rgb / hsl sRGB equivalente, a decomposição OKlab a/b, e um aviso quando sua cor está tão saturada que cai fora do gamut do monitor sRGB (navegadores caem na cor sRGB mais próxima nesse caso).

—

Presets

#0099f0

Luminosidade (L): 65.0%Croma (C): 0.180Matiz (H): 240.0°Alpha: 1.00

Gamut sRGBfora de sRGB (recortado)

oklch()oklch(65.0% 0.180 240.0)
Hex (recortado)#0099f0
rgb()rgb(0, 153, 240)
hsl()hsl(202, 100%, 47%)
oklab()oklab(65.0% -0.090 -0.156)

Luminosidade 0–1 (0 = preto, 1 = branco). Croma 0 é cinza neutro; valores acima de 0.3 frequentemente caem fora de sRGB.

Como usar

Arraste L, C, H pra discar a cor — fique de olho no badge de gamut.
Baixe um pouco a croma quando o badge ficar âmbar se quiser que o swatch na tela seja exato.
Copie a forma que sua folha de estilos precisa: stacks modernos devem usar a string oklch().

Perguntas frequentes

Por que minha cor mostra "fora de sRGB"?: Monitores padrão só podem mostrar uma fatia limitada da cor visível humana (sRGB). OKLCH é um espaço mais amplo, perceptualmente uniforme, então te deixa especificar cores que simplesmente não cabem numa tela sRGB. Navegadores recortam pra o match sRGB mais próximo — a prévia hex mostra o resultado recortado.
Por que preferir oklch() ao hsl()?: HSL foi construído em cima de RGB então sua luminosidade é desigual através de matizes (amarelo parece muito mais brilhante que azul no mesmo L). OKLCH foi afinado contra dados de percepção reais, então animações, tokens de tema e razões de acessibilidade ficam previsíveis ao mudar matiz.