Paleta de Colores
Expande colores base en rampas perceptual uniformes y compónelas en una paleta. Toda la matemática se delega al generador incluido; el juicio de esta habilidad radica en la configuración y la validación.
Principios (por qué OKLCH)
- Nunca generar rampas en HSL/RGB. La luminosidad HSL miente (el mismo valor ≠ el mismo brillo percibido) y el tono se desvía al aplicar tintes y sombras. La misma luminosidad HSL hace que los amarillos se vean demasiado brillantes y los azules demasiado oscuros.
- OKLCH es el espacio de trabajo: L (luminosidad), C (croma), H (tono) — números iguales se ven iguales y es CSS nativo.
- El croma debe limitarse por paso. El croma alto es físicamente imposible en pasos muy claros/oscuros; el generador lo reduce en lugar de dejar que el navegador lo recorte.
- Un ancla de contraste: el texto blanco cumple WCAG AA desde L ≈ 0.55 hacia abajo, el texto negro desde L ≈ 0.60 hacia arriba. Los pasos intermedios se colocan alrededor de estos objetivos.
Teoría completa y fuentes: references/theory.md
Flujo de trabajo
1. Aclarar el objetivo
Confirma con el usuario (omite lo que ya se sepa): color(es) base o colores de marca; número de pasos (11 es estándar, 9 mínimo, 12 si se necesitan roles estilo Radix); qué tonos necesita la paleta (marca + semánticos: éxito/advertencia/peligro/info + neutro); ¿se requiere modo oscuro?
2. Generar las rampas
cd "{skill_dir}/scripts" && python3 generate_ramp.py "#3b82f6" --steps 11 --chroma 90
# paleta multitone: una invocación, nombres separados por comas
python3 generate_ramp.py "#3b82f6" "#e11d48" "#22c55e" --names blue,red,green --format css
Banderas clave: --chroma N (porcentaje del máximo de gama por paso; típico 80-95; más alto = más intenso), --hue-drift D (giro deliberado del tono de claro a oscuro, ej. amarillos oscuros hacia naranja; solo a solicitud), --cvd (hexes simulados para deuteranomalía), --format table|css|json.
Regla multitone: genera TODOS los tonos en UNA sola invocación para que compartan L idéntica y el mismo porcentaje de croma en cada paso — esto es lo que hace que blue-500 y red-500 se sientan como hermanos. Nunca regeneres un tono con diferentes límites.
3. Validar
Lee la salida en tabla y verifica:
- Luminosidad monótona, ΔE entre pasos adyacentes aproximadamente constante (columna de uniformidad)
- Los pares de paso previstos para fg/bg cumplen WCAG AA (el texto blanco necesita un paso con
vs-white ≥ 4.5; el texto negrovs-black ≥ 4.5) - Ausencia de advertencia ΔE entre tonos (≥ 0.05 Oklab entre tonos del mismo paso)
- Con
--cvd: los colores simulados para deuteranomalía siguen siendo distinguibles en los pasos utilizados para la UI que transmite significado
Si el usuario proporcionó una paleta existente para auditar, convierte cada paso a OKLCH (--format json en una reconstrucción, o convierte manualmente) y verifica los mismos cuatro puntos.
4. Componer la paleta
- Asignar roles a los pasos (convención Radix): 1-2 fondos de app · 3-5 fondo de componente (normal/hover/active) · 6-8 bordes/foco · 9-10 fondo sólido y hover (paso 9 = el más puro, de mayor croma) · 11-12 texto (contraste bajo/alto).
- Alias semánticos:
--danger-500, no--red-500, cuando una escala sirve a un significado. Una escala puede respaldar varios alias. - Modo oscuro = reasignar, no regenerar: mantén la escala, invierte las asignaciones semánticas (el paso más claro se convierte en la superficie más oscura, los colores de texto intercambian extremos). La uniformidad perceptual en OKLCH hace que el mapeo invertido sea igualmente legible.
5. Entregar
Escribe la salida --format css en un archivo (propiedades personalizadas con valores de respaldo hex dentro de @supports), más el informe de validación en el chat. Si el destino es un sistema de diseño, sugiere nombres de tokens (escala primitiva + nivel de alias semántico).
Soluciones comunes
| Síntoma | Solución |
|---|---|
| Los pasos 50/100 se ven descoloridos | Esperado — el croma está físicamente limitado cerca del blanco; no lo "arregles" recortándolo |
| Los tonos se ven desiguales en viveza | Misma invocación para todos los tonos; prueba --chroma 80 |
| Un paso 500 falla el contraste para texto blanco | Acéptalo para texto grande/gráficos, o baja la luminosidad media (--hue-drift no ayudará; mueve el ancla) |
| Los amarillos oscuros se leen como oliva | --hue-drift deliberado 10-15 hacia naranja, o acéptalo como gusto de marca |