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

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.

Guias sobre este tema

Contraste de cor e paletas acessíveis O que as razões de contraste da WCAG realmente medem, por que uma cor que parece boa ainda pode reprovar, como o daltonismo muda o quadro e como montar uma paleta que se sustenta.

Ferramentas relacionadas

Pré-visualização de CSS color-mix()

Compare como a função moderna CSS color-mix() mistura duas cores em diferentes espaços de interpolação (srgb, hsl, oklch, lab, lch, hwb, oklab, srgb-linear) — amostras ao vivo, hex computado, faixa de gradiente completa por espaço e CSS copiável.

Cor 0 0

Buscador de nome de cor

Encontre o nome de cor CSS, Tailwind ou XKCD mais próximo de qualquer hex/RGB — ordenado por distância perceptual em OKLab.

Cor 0 0

Conversor de Formatos de Cor

Converta qualquer cor entre HEX, RGB, HSL, HSV, OKLCH e uma variável CSS.

Cor 0 0

Distância de Cor (ΔE)

Escolha duas cores e veja quão perceptualmente diferentes são — CIE76 ΔE, CIEDE2000 ΔE e distância RGB simples com swatch lado a lado.

Cor 0 0

Interpolação de Cor / Passos de Gradiente

Escolha duas cores hex, obtenha N passos intermediários discretos — em sRGB, linear RGB, OKLab ou HSL — com easing opcional.

Cor 0 0

Gerador de Gradientes CSS

Crie gradientes CSS lineares ou radiais com várias paradas de cor e copie o código.

Cor 0 0