Conversor de OKLCH y generador de paletas
Convierte entre OKLCH, hex, RGB y HSL, y construye rampas que se ven uniformes porque la luminosidad y el croma se mantienen mientras el tono gira. Los colores fuera de sRGB se mapean reduciendo el croma, no recortando canales: la diferencia está en si tu púrpura sigue siendo púrpura.
Por qué la luminosidad en OKLCH sí significa algo
En HSL, cambiar el tono a luminosidad fija cambia lo brillante que se ve el color: el amarillo al 50% se ve 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 se corresponde con lo que percibe el ojo. Fija L y C, gira H, y cada muestra pesa lo mismo a la vista: esa es toda la razón para construir 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 el croma manteniendo luminosidad y tono hace que el color siga siendo reconocible como 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 se recuperan exactos al ir y volver. El mapeo de gama se comprobó igual con cuatrocientos ochenta colores fuera de gama y en el peor de ellos no se desvía más de 1 sobre 255. Quien lee OKLCH nota una matriz mal puesta, así que pareció que valía la pena 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() · Comprobador de contraste WCAG · Todas las herramientas gratuitas