devpack
EnglishDeutschFrançaisEspañolPortuguês (Brasil)
Auditoría web

Selector y conversor de color OKLCH

Explora el espacio de color OKLCH, perceptualmente uniforme, con deslizadores en vivo, comprueba si un color cabe en sRGB y copia los valores HEX, RGB y HSL equivalentes como fallback.

Actualizado el

Tus datos nunca salen de tu ordenador. Todo se procesa localmente en tu navegador.

Cómo usar: Conversor OKLCH

  1. Pega cualquier color (HEX, rgb(), hsl(), oklch()…) o usa el selector.
  2. Ajusta Luminosidad, Croma y Tono. Las barras de cada control muestran una vista previa de cómo cambiará el color.
  3. Fíjate en la insignia de gama: si el color queda fuera de sRGB, los valores HEX/RGB de fallback se ajustan automáticamente a la gama.
  4. Copia el valor oklch() o el fragmento «CSS con fallback» para navegadores antiguos.

¿Qué es OKLCH?

OKLCH es un espacio de color diseñado por Björn Ottosson (2020) y añadido a CSS en la especificación Color Level 4. Describe un color con tres valores intuitivos: Luminosidad (0–100%), Croma (cuán colorido es, aproximadamente de 0 a 0,37 en colores de pantalla) y Hue o tono (un ángulo de 0 a 360°). A diferencia de HSL, es perceptualmente uniforme: dos colores con la misma L se ven igual de claros para el ojo humano.

Por qué los desarrolladores dejan HSL

  • Paletas predecibles: en HSL, el amarillo al 50% de luminosidad se ve mucho más brillante que el azul al 50%. En OKLCH, cambiar solo el tono mantiene la luminosidad percibida. Esto sirve muy bien para generar estados de botones y escalas de sistemas de diseño (por eso Tailwind CSS v4 publica su paleta en OKLCH).
  • Mejores cálculos de accesibilidad: una diferencia de luminosidad fija se traduce en una diferencia de contraste bastante constante.
  • Colores de gama amplia: OKLCH puede expresar colores Display P3 que HEX y rgb() no pueden, así que las pantallas modernas muestran colores más vivos.

Gama y fallbacks

No toda combinación L/C/H existe en una pantalla sRGB. Cuando el croma es demasiado alto, esta herramienta mantiene la luminosidad y el tono, reduce el croma hasta que el color encaja y muestra ese resultado como fallback HEX/RGB. En CSS, escribe primero el fallback y después el valor OKLCH; los navegadores que entienden OKLCH usan la segunda línea:

color: #e5484d;
color: oklch(63% 0.2 25);

OKLCH frente a OKLab

OKLab es el mismo espacio en coordenadas rectangulares (L, a, b). Es ideal para mezclar y crear degradados; prueba el Mezclador de colores. OKLCH, en cambio, es más fácil de editar para las personas.

También se busca como: selector de color oklch, oklch a hex, hex a oklch, espacio de color oklch, oklch color picker, oklab, gama de color srgb.

Herramientas que combinan con: Conversor OKLCH

  • Conversor de colores — Pega cualquier color CSS —HEX, rgb(), hsl(), hwb(), oklch() o un nombre como tomato— y obtén al instante todos los demás formatos, además de una paleta 50–950 lista para usar.
  • Generador de colores de Tailwind — Pega un color de marca y obtén una escala de tonos equilibrada de 11 pasos (del 50 al 950) integrada en OKLCH, con sugerencias de contraste y opciones de exportación para Tailwind v3, v4, CSS y SCSS.
  • Conversor HEX a RGBA — Pega un código HEX, arrastra el deslizador de opacidad y copia el CSS exacto que necesitas: rgba() clásico, rgb( / alpha) moderno o HEX de 8 dígitos.
  • Verificador de contraste APCA — Calcula el contraste de luminosidad APCA (Lc) entre el texto y el fondo, consulta para qué usos es adecuado y compáralo con la proporción clásica de WCAG 2.

Preguntas frecuentes

¿Es esto un selector de color OKLCH?
Sí. Arrastra los deslizadores de luminosidad, croma y tono para elegir un color directamente en OKLCH, y cópialo como oklch(), HEX, RGB o HSL, con fallback para navegadores fuera de la gama sRGB.
¿Todos los navegadores admiten oklch()?
Todas las versiones actuales de Chrome, Edge, Safari y Firefox admiten oklch() (desde 2023). Si todavía das soporte a navegadores antiguos, añade antes una línea de fallback con HEX o rgb().
¿Cuál es el croma máximo?
Depende de la luminosidad y el tono. En sRGB, los colores más saturados llegan a aproximadamente 0,25–0,32; Display P3 llega algo más alto. Los valores fuera de la gama de la pantalla se recortan o el navegador los ajusta a la gama.
¿Por qué cambia el valor HEX cuando subo el croma más allá de cierto punto?
Porque el color ha salido de la gama sRGB. El fallback HEX se ajusta a la gama (reduciendo el croma) para quedarse lo más cerca posible de lo que elegiste.
¿OKLCH es lo mismo que CIE LCH?
No. CIE LCH se basa en CIELAB (1976) y tiene desplazamientos de tono conocidos, sobre todo en los azules. OKLCH corrige esos problemas, por eso se prefiere para trabajar con interfaces.
¿Puedo instalar Conversor OKLCH como aplicación web y utilizarla sin conexión?
Sí. Conversor OKLCH es una aplicación web instalable (PWA): se instala desde el navegador, no se descarga desde una tienda de aplicaciones. Haz clic en «Instalar aplicación» en la parte superior de esta página en Chrome o Edge (Windows, macOS, Linux, ChromeOS) o, en Android, utiliza «Compartir» → «Añadir a la pantalla de inicio» en iPhone y iPad, o «Archivo» → «Añadir al Dock» en Safari 17+ en un Mac. A continuación, se abrirá en su propia ventana con su propio icono y, como se ejecuta íntegramente en tu navegador, seguirá funcionando sin conexión. Firefox en el ordenador de sobremesa no permite instalar aplicaciones web. Cómo funciona la instalación.

Herramientas relacionadas

localConversor de coloresPega cualquier color CSS —HEX, rgb(), hsl(), hwb(), oklch() o un nombre como tomato— y obtén al instante…localGenerador de colores de TailwindPega un color de marca y obtén una escala de tonos equilibrada de 11 pasos (del 50 al 950) integrada en…localMezclador de coloresElige dos colores y un número de pasos para obtener colores de transición mezclados de forma uniforme,…localConversor HEX a RGBAPega un código HEX, arrastra el deslizador de opacidad y copia el CSS exacto que necesitas: rgba()…localVerificador de contraste APCACalcula el contraste de luminosidad APCA (Lc) entre el texto y el fondo, consulta para qué usos es…localVariables CSS a TailwindConvierte tus variables de color :root en un tema de Tailwind de un solo pegado: Tailwind v3 con…