Generador de Escalas OKLCH

Crea escalas de color perceptualmente uniformes usando el espacio de color moderno OKLCH

Generador de Escalas OKLCH

Genera escalas de color perceptualmente uniformes usando OKLCH. Usado por Tailwind v4, Figma y CSS Color Level 5.

Color Base

Boost de Croma/Saturación: 1.00x

ApagadoVibrante

Rango de Luminosidad

Más Claro (50): 97%

Más Oscuro (950): 15%

Escala Generada

50#C1F7FF

100#9EDBFF

200#7DBFFF

300#5EA3FF

400#4288FB

500#276EE0

600#0954C3

700#003CA4

800#002384

900#000962

950#000041

¿Por qué OKLCH?

• Perceptualmente uniforme: pasos iguales se ven igualmente diferentes
• Mejor para accesibilidad: ratios de contraste predecibles
• Estabilidad de tono: los colores no cambian al ajustar luminosidad
• Soporte CSS nativo: función oklch() en navegadores modernos

Cómo funciona

OKLCH es un espacio de color perceptualmente uniforme que está revolucionando el diseño web. Es el sucesor de HSL y está siendo adoptado por herramientas líderes como Figma, Tailwind CSS v4 y CSS Color Level 5.

¿Qué significa OKLCH?

O: Oklab (el espacio de color base)
L: Lightness (luminosidad, 0-1)
C: Chroma (saturación/viveza)
H: Hue (tono, 0-360°)

Ventajas sobre HSL

Uniformidad perceptual: Cambios iguales en L producen cambios visuales iguales
Estabilidad de tono: El color no cambia al ajustar luminosidad
Mejor para accesibilidad: Ratios de contraste más predecibles
Escalas más naturales: Las paletas 50-950 se ven más equilibradas

Uso en CSS

Los navegadores modernos soportan OKLCH nativamente:

color: oklch(0.7 0.15 250);

Tailwind CSS v4

Tailwind v4 usa OKLCH internamente para generar sus paletas de colores, lo que resulta en escalas más consistentes y accesibles.

💡 Ejemplos de uso prácticos

Caso 1: Crear paleta de marca

Tu color de marca es #6366F1 (Indigo).

→ Convierte a OKLCH: oklch(0.55 0.24 264)
→ Genera escala 50-950 manteniendo el tono (H=264)
→ Resultado: 11 tonos coherentes desde casi blanco hasta casi negro

Caso 2: Escala para modo oscuro

Necesitas grises neutros que funcionen en modo claro y oscuro.

→ Usa C=0 (sin chroma) para grises puros
→ OKLCH garantiza que 500 sea el punto medio perceptual
→ Los saltos entre 100-200-300... se ven uniformes

Caso 3: Paleta accesible

Quieres que el texto sobre color-500 siempre pase WCAG AA.

→ En OKLCH, L=0.55 es aproximadamente el punto donde texto blanco pasa AA
→ Usa 500-900 con texto blanco, 50-400 con texto oscuro
→ La uniformidad de OKLCH hace esto predecible

Preguntas Frecuentes

¿Por qué OKLCH es mejor que HSL para crear paletas?

HSL no es perceptualmente uniforme: un amarillo con L=50% parece mucho más claro que un azul con L=50%. OKLCH corrige esto, haciendo que los mismos valores de L produzcan colores con la misma luminosidad percibida.

¿Qué navegadores soportan OKLCH?

Todos los navegadores modernos (Chrome 111+, Firefox 113+, Safari 15.4+) soportan OKLCH nativamente. Para navegadores antiguos, puedes exportar como HEX o RGB como fallback.

¿Cómo uso la escala generada en Tailwind?

Exporta como "Tailwind Config" y pega el objeto en tu tailwind.config.js dentro de theme.extend.colors. Luego usa las clases como bg-micolor-500, text-micolor-200, etc.

¿Qué es el valor Chroma en OKLCH?

Chroma (C) controla la viveza/saturación del color. C=0 es gris puro, valores altos (0.2-0.4) son colores muy vivos. A diferencia de HSL, el chroma máximo varía según el tono.

¿Por qué mi color se ve diferente al convertirlo?

Algunos colores muy saturados en sRGB están fuera del gamut de OKLCH. La herramienta ajusta automáticamente el chroma para mantener el color dentro del espacio sRGB visible.