Los 5 tipos de armonía cromática — Cuándo usar cada una
La teoría del color define diferentes relaciones armoniosas entre colores según su posición en el círculo cromático. Cada tipo de armonía produce una sensación visual distinta y es más adecuada para contextos específicos:
| Armonía | Ángulos | Sensación visual | Ideal para |
|---|---|---|---|
| Complementaria | 0° + 180° | Máximo contraste, energética | CTAs, alertas, branding dinámico |
| Análoga | 0° + 30° + 60° | Armoniosa, natural, suave | Fondos, ilustración, marcas serenas |
| Triádica | 0° + 120° + 240° | Equilibrada y vibrante | Diseño infantil, entretenimiento |
| Split-complementaria | 0° + 150° + 210° | Contraste suavizado | Interfaces, marketing general |
| Tetrádica | 0° + 90° + 180° + 270° | Rica, compleja, versátil | Branding complejo, ilustración |
Cómo elegir el color base correcto para tu proyecto
Parte de la psicología del color
Antes de girar el círculo cromático, el color base debe reflejar la personalidad y los valores de tu proyecto. Los azules y verdes comunican confianza y calma — frecuentes en fintech, salud y tecnología. Los rojos y naranjas transmiten energía y urgencia — habituales en alimentación, deporte y ofertas. Los púrpuras evocan creatividad y lujo. Los neutros (negro, blanco, gris) señalan modernidad y versatilidad.
Comprueba accesibilidad WCAG antes de fijar la paleta
Una paleta hermosa que falla en accesibilidad es inútil en la práctica. WCAG 2.1 establece que el contraste entre texto y fondo debe ser al menos 4,5:1 para texto normal y 3:1 para texto grande. Usa el WebAIM Contrast Checker para verificar cada combinación de texto-fondo antes de usarla en producción.
La regla 60-30-10
Una paleta funciona bien cuando aplicas la regla de proporciones: el 60% del espacio visual usa el color dominante (generalmente un neutro o el color más suave), el 30% el color secundario y el 10% el color de acento. Esta proporción equilibra la composición sin que ningún color compita con los demás por atención.
Cómo usar los códigos de color en tus proyectos
HEX — Para web y diseño digital
El formato hexadecimal (#RRGGBB) es el más usado en CSS y diseño web. Es compacto y fácil de copiar. Úsalo siempre que trabajas con HTML, CSS, Figma, Sketch o Adobe XD. Sus limitaciones son que no permite opacidad directamente (necesitas RGBA o HEXA con 8 dígitos).
RGB — Para opacidad y manipulación
RGB (red, green, blue) con valores de 0 a 255 es útil cuando necesitas aplicar transparencia con rgba(r,g,b,a) o cuando trabajas con canvas, SVG o JavaScript que manipula colores programáticamente.
HSL — Para variaciones sistemáticas
HSL (hue, saturation, lightness) es el formato más intuitivo para crear variaciones de un color. Para generar la versión oscura de un color, simplemente reduce la luminosidad: hsl(160, 70%, 40%) es la versión más oscura de hsl(160, 70%, 60%). Ideal para design systems y tokens de color.
| Formato | Ejemplo | Mejor uso |
|---|---|---|
| HEX | #1D9E75 | CSS general, Figma, XD, Sketch |
| RGB | rgb(29, 158, 117) | Transparencias, Canvas, JS |
| RGBA | rgba(29, 158, 117, 0.8) | Overlays, sombras, fondos semitransparentes |
| HSL | hsl(160, 69%, 37%) | Design tokens, variaciones sistemáticas |
| CSS Variable | --color-primary: #1D9E75 | Design systems, tematización |
Preguntas frecuentes sobre paletas de colores
Una paleta complementaria usa dos colores situados exactamente en lados opuestos del círculo cromático, separados 180°. Generan el máximo contraste visual entre sí, lo que los hace muy efectivos para llamadas a la acción, botones y elementos que necesitan destacar. Un ejemplo clásico es el azul y el naranja, o el rojo y el verde. La clave para usarlos bien es no aplicar ambos al 50% — lo habitual es que uno sea el color dominante (60–70%) y el otro el acento (10–20%). Verifica principios de teoría del color en recursos como Adobe Color (color.adobe.com) o el Bauhaus-Archiv.
Una paleta análoga usa tres o cuatro colores adyacentes en el círculo cromático, separados entre 30° y 60°. Produce composiciones armoniosas y naturales, ideales para marcas que quieren transmitir serenidad o coherencia. Una paleta triádica usa tres colores equidistantes a 120° en el círculo, lo que genera mayor contraste y energía visual que la análoga pero más equilibrio que la complementaria. La triádica es popular en diseño infantil, entretenimiento y marcas dinámicas. Verifica principios de armonía cromática en recursos académicos como el Color Institute o el Itten Color Sphere.
El proceso empieza por definir los valores y la personalidad de la marca, no por preferencias estéticas. Los colores fríos (azules, verdes) transmiten confianza y profesionalidad; los cálidos (rojos, naranjas) energía y urgencia; los neutros (grises, blancos) modernidad y limpieza. Después elige un color primario que represente esa personalidad, un secundario complementario o análogo, y un color de acento para CTAs. Limita la paleta principal a 2-3 colores más neutros. Verifica accesibilidad de contraste en WCAG 2.1 con herramientas como WebAIM Contrast Checker antes de fijar los colores definitivos.
HSL son las siglas de Hue (tono), Saturation (saturación) y Lightness (luminosidad). A diferencia de RGB, HSL describe los colores de una forma que el cerebro humano comprende de forma más intuitiva: el tono es la posición en el círculo cromático (0-360°), la saturación indica cuán intenso o apagado es el color (0-100%), y la luminosidad cuán claro u oscuro (0-100%). Para diseño, HSL es especialmente útil porque permite crear variaciones de un color base simplemente modificando la luminosidad o saturación sin cambiar el tono. En CSS se escribe como hsl(210, 80%, 50%). Verifica la especificación en MDN Web Docs (developer.mozilla.org).
La forma más moderna y recomendada es usar variables CSS (custom properties). Define cada color de la paleta como una variable en el selector :root y úsala en todo el proyecto. Por ejemplo: :root { --color-primary: #1D9E75; --color-secondary: #0F6E56; --color-accent: #C9A84C; }. Este enfoque permite cambiar toda la paleta modificando solo el bloque :root y facilita el mantenimiento. Para proyectos con preprocesadores como Sass, puedes definirlos como variables de Sass ($color-primary: #1D9E75;). Verifica la especificación de custom properties en MDN Web Docs y las guías de design tokens en el Sistema de Diseño de Google Material.
Una paleta de marca funcional generalmente tiene entre 5 y 8 colores: 1 color primario (el más representativo de la marca), 1-2 colores secundarios (complementarios o análogos), 1 color de acento (para CTAs y destacados), 2-3 colores neutros (negro, blanco, gris o beige) y opcionalmente colores semánticos (verde para éxito, rojo para error, amarillo para alerta). Menos de 5 puede resultar limitante para diseñar interfaces complejas. Más de 8 genera inconsistencia si no existe un sistema de uso claro. Verifica ejemplos de paletas de marca bien documentadas en recursos como Brand Style Guides o en los design systems públicos de empresas como Atlassian o IBM.
La armonía split-complementaria usa un color base más los dos colores adyacentes a su complementario (en lugar del complementario directo). Por ejemplo, si el base es azul (240°), en lugar de usar naranja (60°) como complementario directo, se usan amarillo-naranja (45°) y rojo-naranja (15°). Esta variante genera casi el mismo nivel de contraste que la complementaria pero con mayor versatilidad y menor tensión visual, porque evita la dureza del contraste máximo. Es ideal para diseños que necesitan dinamismo sin resultar agresivos, como interfaces de aplicaciones o materiales de marketing. Verifica principios de armonía split en recursos como el Color and Light de James Gurney.
Una paleta tetrádica (o cuadrática) usa cuatro colores formando un rectángulo en el círculo cromático, separados a 90°. El riesgo es que con cuatro colores saturados la composición resulte caótica. La solución es la regla 60-30-10: el 60% del espacio visual usa el color dominante (generalmente el más neutro o suave), el 30% el color secundario y el 10% los dos colores de acento. Otra estrategia es saturar solo uno o dos de los cuatro colores y mantener los otros en versiones más apagadas o claras. Las paletas tetrádicas funcionan mejor en diseño de ilustración, branding festivo o interfaces con secciones muy diferenciadas. Verifica ejemplos en Dribbble o Behance filtrando por "tetradic color palette".