Armonías de color y contraste: cómo elegir una paleta que funcione
Una buena paleta no depende del «buen gusto», sino de unas pocas reglas verificables: cómo se relacionan los tonos en la rueda de color y cuánto contraste hay entre texto y fondo. Aquí las tienes con ejemplos numéricos.
Tres formas de describir un color
Un mismo color puede expresarse de varias maneras, y conviene distinguirlas:
- RGB: cuánta luz roja, verde y azul (0–255) mezcla una pantalla. Es lo que entiende el hardware.
- HEX: el mismo RGB escrito en hexadecimal (
#4A3AEF). Es la notación habitual en CSS. - HSL: tono (el «color» en grados de 0° a 360° sobre la rueda), saturación (de gris a color puro) y luminosidad (de negro a blanco). Es la más intuitiva para diseñar, porque permite razonar: «el mismo color, pero más claro» o «el color opuesto».
Las armonías de color se construyen casi siempre en HSL: se toma un tono base y se desplazan los grados sobre la rueda.
Las cinco armonías clásicas
| Armonía | Cómo se obtiene | Efecto |
|---|---|---|
| Monocromática | Mismo tono, distinta luminosidad | Sobria, coherente, difícil de equivocar |
| Análoga | Tonos vecinos (por ejemplo ±15° y ±30°) | Suave y armoniosa, poco contraste |
| Complementaria | Tono opuesto (+180°) | Máxima tensión visual, ideal para resaltar |
| Triádica | Tres tonos separados 120° | Viva y equilibrada; conviene que uno domine |
| Tétrada | Cuatro tonos separados 90° | Rica, pero exige moderación para no saturar |
El generador de paletas de kitbox calcula estas cinco armonías sobre el color base que elijas y te muestra siempre cinco muestras que puedes copiar en HEX o exportar como variables CSS.
La regla 60-30-10
Tener cinco colores no significa usarlos por igual. Una proporción que casi siempre funciona es:
- 60 % color dominante, normalmente neutro (fondos, grandes superficies).
- 30 % color secundario, que da estructura (tarjetas, cabeceras, secciones).
- 10 % color de acento, para lo que debe llamar la atención (botones, enlaces, avisos).
Si el acento aparece por todas partes deja de ser acento. Esta es la razón por la que la mayoría de las interfaces cuidadas usan un único color vivo sobre una base de neutros.
Contraste: lo que decide si se puede leer
Las pautas de accesibilidad WCAG definen el contraste como una razón entre las luminosidades relativas de dos colores, de 1:1 (idénticos) a 21:1 (negro sobre blanco). Los umbrales más usados son:
- 4,5 : 1 para texto normal (nivel AA).
- 3 : 1 para texto grande (a partir de unos 24 px, o 19 px en negrita) y para elementos de interfaz como bordes de campos o iconos.
- 7 : 1 para el nivel AAA, más exigente.
Algunos ejemplos calculados con la fórmula oficial, todos sobre fondo blanco:
| Combinación | Contraste | Resultado |
|---|---|---|
#000000 sobre #FFFFFF | 21,0 : 1 | AAA |
#4A3AEF sobre #FFFFFF | 6,7 : 1 | AA |
#777777 sobre #FFFFFF | 4,5 : 1 | Solo texto grande (AA) |
#999999 sobre #FFFFFF | 2,8 : 1 | No cumple |
#F0C419 sobre #FFFFFF | 1,7 : 1 | No cumple |
Observa dos cosas: el gris medio que tanto se usa para textos secundarios (#999999) no alcanza el mínimo para texto normal, y un amarillo vivo sobre blanco, por llamativo que sea, es casi ilegible. Para esos casos, usa el color como fondo con texto oscuro encima, o como decoración, nunca como color del texto.
No dependas solo del color
Alrededor del 8 % de los hombres y un 0,5 % de las mujeres de ascendencia europea tienen alguna forma de daltonismo, normalmente dificultad para distinguir rojos y verdes. Por eso un mensaje de «error en rojo» y «correcto en verde» debe acompañarse de un icono, un texto o un patrón. Una comprobación sencilla: convierte tu diseño a escala de grises; si la información sigue entendiéndose, el color es un refuerzo y no el único canal.
Sacar una paleta de una fotografía
Muchas marcas parten de una imagen que las representa. Para extraer los colores dominantes se usa un algoritmo llamado median cut: reúne todos los píxeles, busca el canal (rojo, verde o azul) con más variación, parte el grupo por la mediana de ese canal y repite hasta tener tantos grupos como colores quieras; el color de cada grupo es la media de sus píxeles. Es lo que hace la opción «Desde imagen» de la herramienta, además del cuentagotas con lupa para tomar un píxel concreto.
Consejo práctico: extrae entre 5 y 6 colores y luego ajusta a mano. Los colores medios de una foto suelen ser apagados; sube un poco la saturación del que vayas a usar como acento y asegúrate de que el texto cumple el contraste necesario.
De la paleta al código
Una vez elegida, lo más cómodo es guardar la paleta como variables CSS, de modo que cambiar un color en un único sitio lo actualice en toda la web:
:root {
--color-1: #4A3AEF; /* acento */
--color-2: #8F85F5;
--color-3: #1C1A17; /* texto */
--color-4: #FAF8F4; /* fondo */
}Modo oscuro: no basta con invertir
Para un tema oscuro no se invierten los colores. Lo habitual es usar un fondo gris muy oscuro (no negro puro), reducir la saturación de los acentos para que no «vibren» sobre el fondo y revisar de nuevo todos los contrastes: un violeta que funciona sobre blanco puede quedarse corto sobre negro, y por eso suele aclararse.
Guías relacionadas
Este artículo tiene carácter informativo y se revisa de forma periódica. Si detectas un error o quieres proponer un tema, escríbenos desde la página de contacto.