Hex / RGB a OKLCH

Pega un color en formato #hex o rgb() y mira su descomposición en OKLCH — el espacio de color perceptualmente uniforme de CSS Color 4, donde pasos iguales en L, C o H se perciben como pasos iguales al ojo. Edita L, C o H y observa cómo se actualiza la muestra. Haz clic en cualquier chip para copiar. 100% del lado del cliente, sin subir nada.

Muestra en directo
#0d6efd
rgb(13, 110, 253)
Lecturas
Editar L, C, H

Rampa de luminosidad — L ± 0,20, fija C y H
Anillo de matices — H + 0/72/144/216/288°, fija L y C
¿Qué es OKLCH y por qué usarlo en lugar de HSL?

OKLCH es un espacio de color perceptualmente uniforme definido en CSS Color Level 4. A diferencia de HSL, donde dos colores con la misma L a menudo se ven con brillos muy distintos, los pasos iguales en la L (luminosidad) de OKLCH se perciben como pasos iguales al ojo humano. Eso lo hace ideal para generar rampas, paletas y escalas de tema — el tipo de cosa donde HSL produce habitualmente pasos "con la misma luminosidad" que en realidad no se ven iguales.

  • L — luminosidad perceptual, de 0 (negro) a 1 (blanco).
  • C — croma (intensidad de color), de 0 (gris) hasta ~0,4 para los colores más saturados dentro de la gama sRGB.
  • H — matiz en grados, de 0–360 (igual que oklch() en CSS).

La matemática es el proceso sRGB → lineal → Oklab → Oklch del artículo de 2020 de Björn Ottosson (bottosson.github.io/posts/oklab). Cada conversión se ejecuta localmente en tu navegador — nada sale de la página.