Cómo usar: Conversor HEX a OKLCH
- Pega tu color HEX, por ejemplo #2563eb.
- Ajusta la luminosidad, el croma o el tono si quieres una variación.
- Copia el valor
oklch()en tu CSS.
¿Por qué convertir HEX a OKLCH?
HEX indica al navegador qué color mostrar, pero es difícil de ajustar a mano. OKLCH separa un color en luminosidad, croma y tono, así que puedes crear un tono más oscuro cambiando un solo número. Los colores con la misma luminosidad también se ven igual de brillantes, lo que te ayuda a crear paletas coherentes.
¿Es la primera vez que usas este formato? Lee cómo usar OKLCH en CSS, o consulta la comparativa en OKLCH vs HSL.
También se busca como: hex a oklch, convertir hex a oklch, oklch desde hex, color oklch css, convertidor oklch.
Herramientas que combinan con: Conversor HEX a OKLCH
- Conversor 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.
- Convertidor OKLCH a HEX — Pega un valor oklch() y obtén su equivalente en HEX, además de RGB y HSL.
- Mezclador de colores — Elige dos colores y un número de pasos para obtener colores de transición mezclados de forma uniforme, ideales para degradados, bordes, gráficos y estados hover.
- 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.
Preguntas frecuentes
¿La conversión es exacta?
Es muy precisa. Los valores se redondean para que el CSS sea legible, así que un color puede diferir en una cantidad mínima e invisible.
¿Los navegadores son compatibles con OKLCH?
Sí. Todos los navegadores modernos principales lo soportan. Los navegadores muy antiguos necesitan un respaldo en HEX.
¿Se suben mis datos?
No. Todo se ejecuta en tu navegador.
¿Puedo instalar Conversor HEX a OKLCH como aplicación web y utilizarla sin conexión?
Sí. Conversor HEX a 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.