Guía de Teoría del Color, Armonías Cromáticas y Accesibilidad Web (WCAG)
Diseña paletas de colores profesionales y accesibles para interfaces UI/UX, logotipos y desarrollo web. Domina los esquemas cromáticos y las pautas internacionales de contraste para garantizar que tu diseño sea legible para todas las personas.
Los 4 Esquemas de Armonía Cromática Fundamentales
1. Colores Complementarios
Se sitúan exactamente en puntos opuestos del círculo cromático (a 180° de distancia, como azul y naranja). Generan el máximo contraste visual posible, ideal para botones de acción (CTAs) y llamadas de atención.
2. Colores Análogos
Se encuentran contiguos en el círculo cromático (separados por 30° a 60°, como verde, azul verdoso y azul). Crean sensaciones serenas, naturales y visualmente cohesionadas.
3. Esquema Triádico
Utiliza tres colores equidistantes formando un triángulo perfecto (a 120° de separación). Ofrece una vibración energética balanceada, muy utilizada en marcas dinámicas e infografías.
4. Esquema Monocromático
Utiliza variaciones de luminosidad y saturación de un único tono base. Es la base del diseño minimalista moderno, aportando sobriedad, elegancia y jerarquía limpia.
Pautas de Accesibilidad Web WCAG 2.1
El estándar internacional de la W3C exige que el contraste entre el texto y su fondo cumpla con umbrales mínimos para ser legible por usuarios con deficiencias visuales o daltonismo:
| Nivel de Conformidad | Texto Normal (< 18pt) | Texto Grande (≥ 18pt o 14pt Negrita) |
|---|---|---|
| Nivel AA (Estándar Legal) | Mínimo 4.5:1 | Mínimo 3.0:1 |
| Nivel AAA (Máxima Accesibilidad) | Mínimo 7.0:1 | Mínimo 4.5:1 |
Modelos de Color: HEX vs. RGB vs. HSL
- HEX (#RRGGBB): Notación hexadecimal de 6 dígitos que representa los canales Rojo, Verde y Azul de 00 a FF. Es el estándar clásico en código HTML y hojas de estilo CSS.
- RGB (Red, Green, Blue): Representa los valores de luz aditiva en escala de 0 a 255 (ej. rgb(37, 99, 235)).
- HSL (Hue, Saturation, Lightness): Define el Matiz (0° a 360°), Saturación (0% a 100%) y Luminosidad (0% a 100%). Es el modelo más intuitivo para crear temas oscuros y claros coherentes en UI design.
Preguntas Frecuentes sobre Paletas de Color
- ¿Cómo exportar la paleta a Figma, Tailwind o CSS?
- Puedes hacer clic sobre cualquier muestra de color para copiar el código HEX (#) directamente al portapapeles y pegarlo en tus variables de CSS (--primary-color: #...), Tailwind config o estilos de Figma.
- ¿Cómo influye la regla 60-30-10 en diseño de interfaces?
- Es una regla de proporción clásica en interiorismo y diseño UI: 60% color dominante neutro (fondos), 30% color secundario estructural (tarjetas, barras de navegación) y 10% color de acento vibrante (botones principales y enlaces).