¿Por qué mi color muestra "fuera de sRGB"?

Monitores estándar solo pueden mostrar una porción limitada del color visible humano (sRGB). OKLCH es un espacio más amplio, perceptualmente uniforme, así te deja especificar colores que simplemente no caben en una pantalla sRGB. Los navegadores los recortan al match sRGB más cercano — la previa hex muestra el resultado recortado.

¿Por qué preferir oklch() sobre hsl()?

HSL fue construido sobre RGB así su luminosidad es desigual a través de matices (amarillo se ve mucho más brillante que azul al mismo L). OKLCH fue afinado contra datos de percepción reales, así animaciones, tokens de tema y ratios de accesibilidad quedan predecibles al cambiar matiz.

Selector de Color OKLCH

Color

OKLCH es el espacio de color que CSS Color 4 usa para que luminosidad, saturación y matiz se comporten como el ojo realmente espera: mover el matiz a L+C fijo mantiene el brillo percibido estable, mientras el viejo HSL cambiaría dramáticamente. Este selector expone los tres canales más alpha y te deja ver la forma exacta CSS oklch(), el hex / rgb / hsl sRGB equivalente, el desglose OKlab a/b, y una advertencia cuando tu color está tan saturado que cae fuera del gamut del monitor sRGB (los navegadores caen al color sRGB más cercano en ese caso).

—

Presets

#0099f0

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

Gamut sRGBfuera 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)

Luminosidad 0–1 (0 = negro, 1 = blanco). Croma 0 es gris neutro; valores sobre 0.3 a menudo caen fuera de sRGB.

Cómo usar

Arrastra L, C, H para marcar el color — mantén ojo en el badge de gamut.
Baja un poco la croma cuando el badge se ponga ámbar si quieres que el swatch en pantalla sea exacto.
Copia la forma que tu hoja de estilos necesite: stacks modernos deberían usar la cadena oklch().

Preguntas frecuentes

¿Por qué mi color muestra "fuera de sRGB"?: Monitores estándar solo pueden mostrar una porción limitada del color visible humano (sRGB). OKLCH es un espacio más amplio, perceptualmente uniforme, así te deja especificar colores que simplemente no caben en una pantalla sRGB. Los navegadores los recortan al match sRGB más cercano — la previa hex muestra el resultado recortado.
¿Por qué preferir oklch() sobre hsl()?: HSL fue construido sobre RGB así su luminosidad es desigual a través de matices (amarillo se ve mucho más brillante que azul al mismo L). OKLCH fue afinado contra datos de percepción reales, así animaciones, tokens de tema y ratios de accesibilidad quedan predecibles al cambiar matiz.