Conversor de OKLCH y generador de paletas
Convierte entre OKLCH, hex, RGB y HSL, y construye rampas que se ven parejas porque la luminosidad y el croma se mantienen mientras el tono gira. Los colores fuera de sRGB se mapean reduciendo croma, no recortando canales: la diferencia está en si tu púrpura sigue siendo púrpura.
Por qué la luminosidad en OKLCH significa algo
En HSL, cambiar el tono a luminosidad fija cambia lo brillante que se ve el color: el amarillo al 50% se lee mucho más claro que el azul al 50%, y por eso las rampas HSL parecen desiguales por más que las espacies con cuidado. OKLab se ajustó a datos perceptuales, así que su eje de luminosidad sigue lo que informa el ojo. Fija L y C, gira H, y cada muestra pesa lo mismo a la vista: esa es toda la razón para armar paletas aquí y no en HSL.
El mapeo de gama es lo que importa
Muchísimos valores OKLCH no tienen equivalente en sRGB, y el arreglo ingenuo es meter cada canal a la fuerza en el rango. Eso desplaza el tono de forma visible: un púrpura intenso recortado canal a canal se va hacia el azul. Reducir croma manteniendo luminosidad y tono deja el color reconociblemente el mismo y solo quita la saturación que la pantalla no podía mostrar. Esta página usa el algoritmo de CSS Color 4: búsqueda binaria sobre el croma, aceptando el recorte en cuanto queda dentro de una diferencia apenas perceptible respecto al color reducido.
Comprobado con una referencia
Las conversiones se compararon con una implementación independiente sobre una rejilla de cuatro mil colores: luminosidad y croma coinciden hasta la millonésima, el tono hasta la diezmilésima de grado, y todos los valores hex vuelven exactos. El mapeo de gama se comprobó igual contra cuatrocientos ochenta colores fuera de gama y en el peor cae dentro de una parte en 255. Quien lee OKLCH nota una matriz mal puesta, así que pareció justo contar cómo se verificó.
Usar el resultado
Las propiedades personalizadas se escriben en OKLCH con el hex al lado en un comentario, porque ese es el par que quieres en revisión: el valor que tu build publica y el valor que puedes pegar en cualquier otra cosa. Todos los navegadores en uso entienden la sintaxis OKLCH; si aún soportas alguno que no, el comentario es tu alternativa.
Preguntas frecuentes
¿Por qué el croma llega solo a 0,4?
Porque nada en sRGB se le acerca. El color más saturado de sRGB es el azul, en torno a 0,313, y el deslizador va más allá para que veas qué queda fuera y cómo vuelve a mapearse.
¿Qué es aquí una diferencia apenas perceptible?
Un delta E de 0,02 en OKLab, que es el umbral que usa CSS Color 4. Por debajo de él, recortar y reducir croma son indistinguibles, así que el algoritmo se queda con el color recortado y conserva el croma extra.
¿Admite P3 o Rec2020?
Todavía no. Aquí todo apunta a sRGB, que es lo que significan los avisos de gama. Las gamas más amplias necesitan sus propios primarios y otro juego de matrices.
¿Se envía algo de esto a algún sitio?
No. Las conversiones se hacen en esta página.
Hecho por el equipo de GO AI. Calculadora de CSS clamp() · Todas las herramientas gratuitas