Convertir HEX a OKLCH
Escribe un valor HEX y obtén OKLCH al momento. Todo se calcula en tu navegador: nada se envía a un servidor.
Cómo se calcula
El HEX pasa a RGB, luego a Oklab y de ahí a luminosidad (L), croma (C) y tono (H). OKLCH se diseñó en torno a la luminosidad percibida, así que cambiar solo el tono no hace que el color parezca más claro u oscuro.
HEX
HEX es exactamente el mismo trío rojo-verde-azul que RGB, escrito en base 16 para que cada canal quepa en dos caracteres. Sobrevive en todas partes — CSS, herramientas de diseño, archivos de configuración — porque es corto e inequívoco. Las mayúsculas dan igual y #abc abrevia #aabbcc. Un HEX de ocho dígitos añade el alfa al final: por eso #FF000080 es rojo semitransparente.
OKLCH
OKLCH usa las mismas tres ideas que HSL — luminosidad, croma, tono — pero sobre un modelo de cómo funciona realmente el ojo. Dos colores con la misma L se ven igual de claros, y por eso sirve tan bien para generar escalas de tonos y para comprobar contraste. Además alcanza colores que sRGB no puede mostrar, así que un OKLCH válido puede no tener un HEX exacto; el conversor los recorta al rango visible.
De HEX a OKLCH, paso a paso
Resuelto con #FF6347. Todos los números salen del mismo motor que usa el conversor de arriba.
-
Separar en pares
#FF6347 → FF · 63 · 47 -
Leer cada par en base 16
R FF = 15×16 + 15 = 255 G 63 = 6×16 + 3 = 99 B 47 = 4×16 + 7 = 71 -
Deshacer la gamma (RGB lineal)
R 1 G 0.125 B 0.063 -
Coordenadas Oklab
L 0.696 a 0.165 b 0.105 -
A forma polar — croma y tono
C = √(a²+b²) = 0.196 H = atan2(b, a) = 32.3° -
Resultado
oklch(69.6% 0.1955 32.32)
Ejemplos de HEX a OKLCH
| Color | HEX | OKLCH |
|---|---|---|
| Red | #FF0000 |
oklch(62.8% 0.2577 29.23) |
| Tomato | #FF6347 |
oklch(69.6% 0.1955 32.32) |
| Orange | #FFA500 |
oklch(79.3% 0.171 70.67) |
| Gold | #FFD700 |
oklch(88.7% 0.1822 95.33) |
| Limegreen | #32CD32 |
oklch(74.2% 0.2286 142.83) |
| Teal | #008080 |
oklch(54.3% 0.0927 194.77) |
| Dodgerblue | #1E90FF |
oklch(65.2% 0.1901 253.21) |
| Royalblue | #4169E1 |
oklch(56% 0.1882 266.4) |
| Blueviolet | #8A2BE2 |
oklch(53.4% 0.2503 301.37) |
| Hotpink | #FF69B4 |
oklch(72.8% 0.1971 351.99) |
Preguntas frecuentes
¿Cuál es un valor de croma normal?
La mayoría de colores sRGB caen entre 0 y unos 0,37. El gris es 0. Por encima de 0,4 existen valores en el modelo, pero ninguna pantalla corriente puede mostrarlos.
¿Por qué usar OKLCH en vez de HSL para tokens de diseño?
Porque pasos iguales de luminosidad se ven iguales. Una escala basada en la luminosidad HSL parece saltar en el amarillo y estancarse en el azul; la misma escala en OKLCH se lee uniforme en todos los tonos.
¿Los navegadores ya admiten oklch()?
Todos los principales actuales sí. Para los antiguos, declara primero un HEX y deja que la línea oklch() lo sobrescriba: lo que no entienda la segunda línea se queda con la primera.