Saltar al contenido
nearnull

Selector de Color OKLCH

Elegí colores en OKLCH con sliders de luminosidad, croma y tono, verificá el gamut sRGB y obtené respaldos en HEX y rgb(). Funciona enteramente en tu navegador: no se envía nada a ningún servidor.

Color
Resultado

CSS con respaldo

color: #2563eb;
color: oklch(54.6% 0.215 262.9);

¿Qué es OKLCH?

OKLCH es una forma de describir colores por luminosidad (L), croma (C, qué tan colorido es) y tono (H, el ángulo en el círculo cromático), construida sobre el espacio de color OKLab para que cambios iguales se vean igual de distintos. A diferencia de HSL, dos colores con la misma L realmente se ven igual de claros, lo que hace mucho más fácil razonar sobre paletas, estados hover y contraste accesible. CSS lo soporta como oklch(), y puede describir colores fuera del rango sRGB de la mayoría de las pantallas. Este selector te deja ajustar L, C y H con sliders, te avisa cuando un color queda fuera de sRGB y te da respaldos en HEX y rgb().

Ejemplos

Usar colores OKLCH en CSS y en código:

CSS
/* older browsers keep the HEX line */
.button {
  background: #2563eb;
  background: oklch(54.6% 0.215 262.9);
}
CSS
/* same lightness, different hue: an even, predictable palette */
--blue:   oklch(65% 0.15 250);
--green:  oklch(65% 0.15 150);
--orange: oklch(65% 0.15 60);
CSS
@supports (color: oklch(0% 0 0)) {
  :root { --accent: oklch(70% 0.25 150); }
}
JavaScript
// OKLCH to OKLab, the first step of converting to sRGB
const a = c * Math.cos((h * Math.PI) / 180);
const b = c * Math.sin((h * Math.PI) / 180);

Casos de uso

Armar paletas consistentes

Dejá fijas la luminosidad y el croma y cambiá solo el tono para obtener colores que se ven igual de brillantes, algo que HSL no logra de forma confiable.

Estados hover y presionado

Bajá unos puntos la L para un estado más oscuro sin que el tono se corra, algo que pasa seguido al oscurecer en HSL.

Colores de gamut amplio

Diseñá colores intensos para pantallas P3 en oklch() y entregá un HEX de respaldo seguro para pantallas y navegadores que no pueden mostrarlos.

Migrar un código a CSS moderno

Convertí los valores HEX existentes a oklch() uno por uno y dejá el original como línea de respaldo.

Preguntas frecuentes

¿Qué navegadores soportan oklch() en CSS?
Chrome y Edge 111, Firefox 113 y Safari 15.4 o más nuevos. Los navegadores más viejos ignoran la declaración, por eso la herramienta escribe primero la línea HEX: un navegador que no puede leer oklch() se queda con el color HEX.
¿Qué significa fuera del gamut?
Algunas combinaciones de luminosidad, croma y tono describen colores que sRGB, el rango de color de la mayoría de las pantallas, no puede mostrar. La herramienta entonces baja el croma manteniendo la luminosidad y el tono hasta que el color entra, así sigue pareciendo el mismo color, y muestra esa versión en la vista previa y en el valor HEX.
¿Por qué el croma está limitado a 0.4?
Los colores reales en las pantallas actuales quedan bastante por debajo de 0.4: los colores sRGB más saturados llegan a unos 0.32, y las pantallas P3 un poco más. Los valores más altos son CSS válido pero siempre quedan fuera del gamut.
¿En qué se diferencia OKLCH de HSL?
La luminosidad de HSL no es perceptual: el amarillo puro y el azul puro tienen los dos 50% de luminosidad pero se ven muy distintos. La luminosidad de OKLCH coincide con qué tan claro se ve un color, así el contraste y las paletas se comportan de forma predecible.
¿Mis datos se envían a algún servidor?
No. Cada conversión corre en tu navegador con JavaScript plano. No se transmite ni se guarda nada.

Herramientas relacionadas

Conversor de Colores (HEX, RGB, HSL, CMYK)Verificador de Contraste de Color (WCAG AA / AAA)Generador de Tonalidades (Tints y Shades)Generador de Degradados CSSGenerador de Paletas de Colores (Armonías)Selector de Color de Imagen