Generador de Escalas OKLCH
Escalas 50-950 perceptualmente uniformes con curvas de croma, hue shift y análisis WCAG
Generador de Escalas OKLCH
Genera escalas perceptualmente uniformes con desviación de tono, curvas de croma, análisis WCAG y exportación multi-formato.
Presets Rápidos
¿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
- • Usado por Tailwind v4, Figma y CSS Color Level 5
Cómo funciona
OKLCH es un espacio de color perceptualmente uniforme que está revolucionando el diseño web. Esta herramienta genera escalas profesionales 50-950 con controles avanzados: curvas de croma, desviación de tono, análisis WCAG y 5 formatos de exportación.
¿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°)
Controles de esta herramienta
- Color base + presets: Elige tu color o selecciona uno de los 8 presets rápidos
- Boost de croma: Controla la saturación general de la escala (0.3x a 1.8x)
- 4 curvas de croma: Campana, Lineal, Creciente o Decreciente para controlar cómo varía la saturación
- Rango de luminosidad: Ajusta el paso más claro (50) y más oscuro (950)
- Desviación de tono (Hue Shift): Rota el tono gradualmente a lo largo de la escala (-30° a +30°) para crear escalas más cálidas o frías
- Advertencias de gamut: Detecta colores fuera del espacio sRGB
4 pestañas de análisis
- Escala: Vista visual con fondo configurable + tarjetas detalladas con badges WCAG AA/AAA y ratios de contraste
- Curvas: Gráfico SVG de luminosidad y croma a lo largo de la escala + valores de tono
- HSL vs OKLCH: Comparación lado a lado mostrando la superioridad perceptual de OKLCH
- Exportar: CSS Variables (HEX/OKLCH), Tailwind Config, SCSS y Design Tokens JSON
💡 Ejemplos de uso prácticos
Caso 1: Paleta de marca con hue shift
Tu color de marca es #3B82F6 (Azul). Aplica +15° de hue shift para que los tonos claros sean ligeramente más fríos y los oscuros más cálidos, creando una escala más natural y profesional.
Caso 2: Verificar accesibilidad WCAG
Cada paso muestra badges AA/AAA para texto blanco y negro. Usa los pasos 500-950 con texto blanco (pasan AA) y 50-400 con texto negro. Los ratios exactos se muestran en cada tarjeta.
Caso 3: Curva de croma para UI
Usa la curva "Campana" para que los colores extremos (50, 950) sean más neutros y los centrales (400-600) sean los más vibrantes. Ideal para botones, alertas y CTAs.