Convertidor HEX a OKLCH
Ingresa un código HEX y obtén los valores OKLCH para CSS Color Level 4.
Código HEX
#
#6C5CE7
OKLCH(0.53, 0.210, 270°)
L: 0.53C: 0.210H: 270°
CSS: oklch(53% 0.210 270)¿Por Qué Migrar de HEX a OKLCH?
Paletas Automáticas
En OKLCH, escalar una paleta es trivial: L=90% para fondos, L=50% para texto, L=30% para acentos. En HEX esto es imposible de calcular.
Accesibilidad Nativa
Colores con el mismo L en OKLCH tienen el mismo contraste percibido. Esto garantiza accesibilidad consistente sin herramientas externas.
Degradados Limpios
Los degradados CSS en oklch() evitan los grises intermedios. Un degradado azul→rojo pasa por púrpura en vez de gris sucio.
Design Tokens
Los sistemas de diseño modernos definen tokens en OKLCH y exportan a HEX para compatibilidad. Esta herramienta genera ambos valores.
Preguntas Frecuentes
¿Es OKLCH mejor que HEX para CSS?
OKLCH es más intuitivo y preciso para crear paletas. Pero HEX tiene soporte universal. Usa OKLCH en CSS moderno con fallback HEX.
¿Puedo pegar HEX con #?
Sí, acepta ambos formatos:
#6C5CE7 y 6C5CE7. También soporta 3 dígitos (F00 → FF0000).¿El valor OKLCH resultante funciona en CSS?
Sí:
oklch(53% 0.21 270). Compatible con Chrome 111+, Safari 15.4+, Firefox 113+.¿OKLCH produce colores más vivos?
No produce colores diferentes. Pero hacer degradados en OKLCH evita los grises intermedios que aparecen al interpolar en RGB/HEX.
¿Puedo generar variaciones de un color con OKLCH?
Sí. Cambia solo L para tonos claros/oscuros, solo C para más/menos saturación, solo H para tonos análogos. Esto es mucho más intuitivo que alterar HEX.