Editor avanzado · OKLCH
Editor avanzado de rampas de color OKLCH para sistemas de diseño
El editor avanzado de Paletadecolor.es permite controlar con precisión las curvas de luminosidad y saturación de cada paleta. A diferencia del editor principal, ofrece tres modos de trabajo —Básico, Avanzado y Visual— y herramientas pensadas para diseñadores que necesitan resultados consistentes y exportables a sistemas de diseño reales.
Cada paleta genera 11 stops (50 → 990) sobre el espacio perceptual OKLCH, garantizando que las progresiones de luz se vean uniformes al ojo y que el contraste WCAG quede validado por stop antes del handoff.
¿Para qué sirve?
Curvas de luminosidad y saturación
La curva de luminosidad describe cómo cambia la claridad (L) entre los 11 stops. Una curva bien ajustada produce progresiones suaves, sin saltos visuales abruptos. La curva de saturación (croma C) controla la intensidad cromática: forma una campana donde los extremos tienen poco color y el centro alcanza el máximo. Ajustar ambas independientemente te permite crear paletas pastel, vibrantes, apagadas o de alta saturación con un solo arrastre.
Cómo se usa para crear rampas profesionales
Arrastra los puntos de la curva sobre el canvas, usa las anclas de esquina para trasladar toda la curva con peso, o aplica un easing matemático predefinido (lineal, ease-in, ease-out, sigmoide, exponencial). Los presets Tailwind, Material 3, Radix e iOS reproducen la sensación visual de cada sistema. El modo Visual permite ajuste fino por paso individual con color picker.
Características
Por qué es útil para Tailwind, CSS y design systems
- Exporta a TailwindConfiguración lista para tailwind.config.js con theme.extend.colors.
- Variables CSSTokens :root listos para integrar en cualquier framework o sitio.
- W3C Design TokensFormato JSON estándar para compartir entre Figma, Style Dictionary y otros.
- SCSS, LESS, JSONSintaxis nativa para tu stack — sin conversiones manuales.
- Adobe Swatches y SVGPara flujos en Illustrator, Photoshop o entrega vectorial.
- PDF profesionalMultipágina con índice, detalle por paleta y tokens listos para handoff.
Diferencias
Editor principal vs editor avanzado
El editor principal (paletadecolor.es) cubre el flujo estándar: ajustar matiz, variación y elegir un preset de curva. Es ideal cuando quieres una paleta rápida y bien proporcionada.
El editor avanzado aparece cuando necesitas control fino: editar punto por punto, aplicar funciones de easing matemático, controlar mínimos y máximos por canal, ajustar tensión, espejar L↔C o trabajar paso por paso desde un color picker visual. Es la herramienta para sistematizar paletas que conviven con un design system.
Preguntas frecuentes
FAQ — Editor avanzado de rampas de color
¿Qué es una rampa de color?
+
Una rampa de color es una serie de tonos del mismo matiz ordenados desde el más claro al más oscuro. En sistemas de diseño se usan típicamente 11 stops (50, 100, 200… 900, 990) para cubrir todos los usos de un color: fondos, bordes, texto, énfasis y estados.
¿Qué es una curva de luminosidad en OKLCH?
+
La curva de luminosidad describe cómo cambia la claridad (L) de cada stop a lo largo de la rampa. En OKLCH, una luminosidad uniforme se ve uniforme al ojo, así que controlar esta curva permite crear progresiones suaves, sin saltos visuales abruptos entre stops.
¿Qué es una curva de saturación?
+
La curva de saturación define cuánto color tiene cada stop (croma C en OKLCH). Normalmente forma una campana: los extremos (50 y 990) tienen poco color y el centro (500) tiene la máxima saturación. Ajustarla cambia el carácter: pastel, vibrante, apagado o neón.
¿Cuándo conviene usar el editor avanzado en lugar del editor principal?
+
El editor avanzado es ideal cuando necesitas control fino: ajustar la curva L/C punto por punto, aplicar easing matemático (sigmoide, exponencial), forzar contraste mínimo o crear paletas que coincidan con sistemas como Tailwind, Material 3 o iOS. El editor principal cubre el uso estándar; el avanzado es para sistematizar.
¿Puedo exportar las rampas a Tailwind?
+
Sí. El editor exporta directamente a configuración Tailwind (theme.extend.colors) lista para pegar en tailwind.config.js. También exporta a CSS variables, SCSS, LESS, JSON, W3C Design Tokens, Adobe Swatches, SVG, PNG y PDF profesional.
¿Sirve para sistemas de diseño?
+
Sí. Está pensado precisamente para eso. Las paletas generadas tienen 11 stops armónicos por matiz, validación WCAG por stop, y se exportan como design tokens listos para integrar en Figma, Webflow, Tailwind o cualquier framework. El PDF multipágina incluye índice, detalle por paleta y tokens listos para handoff.