Teoría del color para interfaces

¿Qué hace Teoría del color para interfaces?

El color en UI es principalmente un problema de luminosidad disfrazado de tono. La jerarquía, el contraste, la legibilidad y el modo oscuro se deciden por la luminosidad; el tono aporta identidad y significado; el croma (saturación) aporta énfasis. Trabaja en ese orden.

El conjunto de herramientas — úsalo en lugar de adivinar

scripts/palette.py (Python 3, sin dependencias) calcula todo en OKLCH y mapea al gamut sRGB. Nunca calcules una relación de contraste a ojo o inventes una rampa manualmente cuando puedas calcularla.

S=<skill-dir>/scripts/palette.py   # <skill-dir> = el directorio base que se muestra cuando se carga esta habilidad
python3 $S system "#6d28d9"                    # sistema completo: rampas + roles claro/oscuro, todos los pares verificados
python3 $S system "#6d28d9" --format tailwind  # Tailwind v4 @theme + variables semánticas (también: css, json = DTCG)
python3 $S ramp "#0f766e" --format css         # una rampa 50–950 (el valor de entrada se ajusta al paso más cercano)
python3 $S neutral "#0f766e" --tint 0.01       # rampa de grises teñida hacia el tono de la marca
python3 $S contrast "#fff" "#7c3aed"           # relación WCAG + niveles + APCA Lc
python3 $S cvd "#16a34a" "#dc2626" "#2563eb"   # simulación de daltonismo + pares confundibles
python3 $S harmony "#6d28d9" --scheme split    # relaciones de tono en OKLCH
python3 $S convert "hsl(...)/#hex/oklch(...)"  # conversión de notación + cuán vivo es

system recorre automáticamente pasos a lo largo de una rampa cuando un par falla (por ejemplo, mueve text-muted más oscuro hasta 4.5:1) e imprime cada ajuste — transmídelos al usuario, son decisiones de diseño.

Flujo de trabajo: desde "necesito colores" hasta tokens enviados

1. Encuentra el ancla. ¿Color de marca existente? Úsalo. ¿Ninguno? Derrívalo de la personalidad del producto (ver Elegir un tono más abajo) y propón 2–3 semillas con una justificación de una línea cada una, en lugar de una elección única arbitraria.
2. Genera el sistema con palette.py system <semilla>. Una rampa de acento, una rampa neutra y solo las rampas de estado que el producto renderiza.
3. Mapea a roles semánticos, nunca uses primitivas en componentes (--color-accent, --color-text-muted, no --violet-600). La habilidad de constructor de sistemas de diseño cubre la arquitectura de tokens en profundidad.
4. Verifica: contraste en el par renderizado (texto sobre su superficie real, incluyendo alfa/superposiciones), ambos temas, verificación CVD para cualquier significado codificado por color (gráficos, estado, etiquetas).
5. Aplica con moderación (más abajo), luego míralo renderizado.

Cuánto color: distribución

• Los neutros hacen ~90% del trabajo. Fondos, superficies, texto, bordes. Una UI construida sobre buenos neutros con un acento casi siempre se ve más profesional que una con múltiples tonos.
• 60-30-10 es una comprobación de cordura útil: ~60% neutro dominante, ~30% superficie/neutro secundario variado, ~10% acento. Si el acento supera ~10-15% de los píxeles, deja de significar "actúa aquí".
• Una acción primaria rellena por vista. El color en el fondo de un botón se lee como primario desde lejos; el texto coloreado se lee como un enlace.
• Un color, un significado. Si el violeta significa "marca/interactivo", no lo uses también para una etiqueta de categoría. Los tonos de estado deben estar claramente separados del acento (la herramienta mantiene ≥25° en el tono OKLCH).
• El color nunca es la única señal. ~8% de los hombres y ~0.5% de las mujeres tienen una deficiencia de visión del color; combina el color con un icono, etiqueta, patrón o posición.

Elegir un tono (cuando no hay marca)

Las asociaciones dependen de la cultura y son débiles en comparación con la ejecución: una paleta bien construida en cualquier tono supera a un tono "psicológicamente correcto" usado mal. Úsalas como criterios de desempate:

Familia de tono	Lectura común en UI	Productos típicos	Cuidado con
Azul / índigo	confianza, calma, competencia	fintech, SaaS, salud, empresas	la opción más genérica; aumenta el croma o desplázate hacia índigo/cian para destacar
Violeta	creativo, premium, "IA"	herramientas creativas, productos de IA	el violeta muy saturado es ahora una señal de "IA genérica"
Verde / verde azulado	crecimiento, dinero, salud, éxito	finanzas, sostenibilidad, bienestar	entra en conflicto con el estado "éxito" — ajusta el tono de estado
Rojo / rosa	energía, urgencia, pasión	comida, medios, entretenimiento	entra en conflicto con "peligro"; úsalo para momentos de marca, mantén las acciones destructivas distintas
Naranja / ámbar	calidez, amabilidad, acción	consumo, comida, marketplaces	los naranjas oscuros se vuelven marrones; verifica los rellenos en modo claro
Amarillo / lima	optimismo, atención	consumo, divertido	no puede llevar texto blanco; usa texto oscuro sobre rellenos amarillos, o usa la marca como acento-sutil y elige un paso más oscuro para rellenos (--hue-shift -15 mantiene los tonos dorados en lugar de oliva)
Casi neutro (negro/piedra/arena)	lujo, editorial, herramientas	herramientas para desarrolladores, moda, portafolios	necesita oficio tipográfico y espacial para no sentirse vacío

Notas regionales que vale la pena conocer: el rojo es afortunado/celebratorio en China pero significa pérdida en las finanzas occidentales (y ganancia en los teletipos bursátiles chinos/japoneses); el blanco se asocia con luto en partes de Asia Oriental. Para UIs financieras, haz que los colores de subida/bajada sean configurables.

Color perceptual — por qué OKLCH

La luminosidad HSL miente: hsl(60 100% 50%) (amarillo) y hsl(240 100% 50%) (azul) comparten "L=50%" pero difieren enormemente en brillo percibido. Por eso las rampas HSL tienen contraste desigual y pasos oscuros/claros que no se alinean entre tonos.

OKLCH = L (luminosidad percibida 0–1) · C (croma, ~0–0.37) · H (ángulo de tono). Una L igual ≈ luminosidad percibida igual entre tonos, por lo tanto:

• el mismo paso a lo largo de rampas (todos los -600) tiene contraste similar contra blanco,
• puedes rotar el tono sin cambiar la luminosidad (armonías, colores de estado que "coinciden"),
• el modo oscuro se puede derivar razonando sobre L.

Advertencias: el gamut sRGB es irregular — cada tono tiene un croma máximo diferente en cada L (el amarillo alcanza su punto máximo cerca de L≈0.95, el azul cerca de L≈0.45). La herramienta mapea el gamut reduciendo el croma, manteniendo L y H. Los colores de gamut amplio (Display-P3) son una mejora: declara primero el valor sRGB, luego el vívido P3/oklch() en @media (color-gamut: p3).

CSS soporta oklch() en todos los navegadores modernos; úsalo en nuevos proyectos web. En plataformas nativas, convierte a la notación de la plataforma (hex/sRGB, Color(red:green:blue:), Color(0xFF…)) — la opción --notation hex ayuda.

Rampas, neutros y tintes

• Las rampas contienen un solo tono de principio a fin, con pasos más finos en el extremo claro (ahí es donde viven los fondos y el ojo es más sensible), y alcanzan el pico de croma en medio de la rampa. 11 pasos (50–950, convención Tailwind) o 12 (convención Radix, cada paso tiene un trabajo nombrado) — consulta references/ramps-and-roles.md para el mapa de roles.
• Neutros teñidos: mezcla un poco del tono de marca en los grises (croma ≈ 0.005–0.02). Hace que toda la UI se sienta coherente; los grises #808080 puros se sienten muertos junto a un acento saturado. Marca cálida → grises cálidos; fría → fríos.
• Nunca negro puro sobre blanco puro para texto largo en UIs con marca; casi negro (neutral-950) sobre casi blanco reduce el resplandor. Los fondos negros puros en modo oscuro causan manchas en OLED durante el desplazamiento; usa L ≈ 0.13–0.18.

El modo oscuro no es inversión

• La elevación se vuelve más clara, no sombra más oscura: superficie > fondo por ~0.03–0.06 L.
• Desatura los acentos ligeramente y aumenta su luminosidad; los tonos medios saturados vibran sobre fondos oscuros.
• Texto del cuerpo ligeramente fuera de blanco (neutral-50/100), texto atenuado alrededor de neutral-400.
• Los rellenos a menudo cambian su etiqueta a texto oscuro (la herramienta decide por contraste).
• Vuelve a medir cada par; el contraste no sobrevive a la inversión. Consulta references/dark-mode.md.

Contraste — los estándares

Par	WCAG 2.2 AA	AAA	Guía APCA (consultiva)
Texto del cuerpo (<24px / <18.66px negrita)	4.5:1	7:1	Lc 75+ (90 preferido)
Texto grande (≥24px o ≥18.66px negrita)	3:1	4.5:1	Lc 60+
Componentes de UI y objetos gráficos necesarios para entenderlos (bordes de entrada, iconos, anillos de foco, marcas de gráficos)	3:1 (SC 1.4.11)	—	Lc 45+
Controles deshabilitados, elementos decorativos, logotipos	exento	—	—

WCAG 2.x es la línea base legal/de cumplimiento (ADA, EN 301 549 / Ley Europea de Accesibilidad). APCA (el candidato a WCAG 3) modela la percepción mejor, especialmente para modo oscuro y texto claro, pero WCAG 3 no es definitivo — cumple WCAG 2.2 AA y usa APCA como segunda opinión. Detalles, reglas de anillos de foco y trampas en references/contrast-and-cvd.md.

Gradientes, superposiciones y alfa

• Interpola gradientes in oklab (suave, sin centro turbio); usa in oklch para barridos de múltiples tonos que se volverían grises en el medio. Mantén las paradas cercanas en luminosidad para fondos detrás de texto.
• Texto sobre imágenes: un velo (superposición de gradiente) o un respaldo sólido; mide la región de peor caso.
• Los colores alfa (/50, rgba) cambian el contraste dependiendo de lo que hay debajo. Prefiere tokens sólidos para texto; reserva alfa para superposiciones, hovers y sombras.

Visualización de datos

Las paletas categóricas necesitan luminosidad aproximadamente igual y máxima separación de tono; las paletas secuenciales varían la luminosidad de forma monótona; las paletas divergentes comparten un punto medio neutro. Usa la habilidad dataviz si está disponible — tiene un método de paleta validado. Siempre ejecuta palette.py cvd en los colores de las series de gráficos.

Revisar los colores de alguien — lista de verificación rápida

• Cada par texto/fondo medido en ambos temas (no estimado)
• Bordes de entrada, anillos de foco, iconos que transmiten significado ≥ 3:1
• Sin hex/rgb sin procesar en componentes; solo tokens semánticos
• Un acento, usado solo para significado interactivo/primario
• Colores de estado distintos del acento y entre sí bajo simulación CVD
• Neutros teñidos consistentemente (no una mezcla de grises fríos y cálidos)
• Modo oscuro diseñado (superficies más claras para elevación, acentos ajustados), no invertido
• El significado nunca se transmite solo por el color

Para una auditoría completa del sistema de color con hallazgos clasificados por severidad, la habilidad better-colors es excelente; para elegir/derivar/generar, quédate aquí.

Referencias

• references/ramps-and-roles.md — mapeo de roles paso a paso (Tailwind 50–950 y Radix 1–12), colores de estado (hover/active/disabled/selected)
• references/dark-mode.md — construcción de tema oscuro, elevación, detalles de plataforma (colores semánticos iOS, superficies tonales Material)
• references/contrast-and-cvd.md — detalles de WCAG 2.2, niveles APCA, indicadores de foco, reglas de diseño CVD
• references/harmony-and-brand.md — esquemas de armonía, derivación de colores secundarios, traducción de marca a UI, temperatura, contraste simultáneo