La versión corta
- La teoría del color es un conjunto de ideas prácticas sobre cómo se relacionan y se combinan los colores y cómo afectan a lo que la gente ve primero.
- Todo color se puede describir con tres propiedades: el tono, la familia del color; la saturación, lo intenso que es; y la luminosidad, lo cerca que está del blanco o del negro.
- El contraste de luminosidad importa más para la legibilidad que el contraste de tono, y por eso un diseño debería seguir funcionando en escala de grises.
- Las armonías de color, como complementaria, análoga, triádica y monocromática, son posiciones en la rueda de color que se ven equilibradas de forma fiable.
- La mayoría de las buenas paletas usa un color dominante, uno o dos de apoyo y un acento pequeño.
En esta página
La teoría del color es el conjunto de ideas prácticas que usan los diseñadores para elegir colores que funcionen bien juntos y hagan lo que tienen que hacer. Se reduce a seis cosas: tono, saturación, luminosidad, temperatura, armonía y contraste. Con eso entendido puedes explicar por qué una paleta se siente tranquila o ruidosa, por qué cuesta leer cierto texto y por qué dos colores chocan.
Esta página es el punto de partida de todos los artículos de color de la Guía práctica. Cada sección enlaza con otra más profunda cuando la necesites.
Tono, saturación y luminosidad
Cualquier color se puede describir con tres propiedades. El tono es la familia del color: rojo, naranja, verde, azul. La saturación (también llamada croma) es lo intenso que es, del gris al vivo. La luminosidad es lo cerca que está del negro o del blanco. Cambia una manteniendo las otras y verás qué hace cada una.
Estas tres son la forma en que códigos de color como HSL y OKLCH describen el color, y por eso son fáciles de ajustar en código. Los códigos de color explicados cubren HEX, RGB, HSL y OKLCH.
Colores cálidos y fríos
Los colores también tienen temperatura. Los rojos, naranjas y amarillos se sienten cálidos; los azules, verdes y violetas se sienten fríos. Los colores cálidos tienden a sentirse más cercanos y enérgicos, los fríos más lejanos y tranquilos. La temperatura es relativa, eso sí: un violeta con mucho rojo puede sentirse cálido junto a un azul puro.
Los colores cálidos y fríos van más allá, incluido cómo mezclar temperaturas en un mismo degradado.
Armonía de color y la rueda de color
Si colocas los tonos en un círculo, algunas relaciones se ven equilibradas de forma fiable. Son las armonías de color. No son reglas, pero son buenos puntos de partida cuando dudas. La guía de la rueda de color explica cómo leerlas.
| Armonía | Dónde están los colores | Qué transmite |
|---|---|---|
| Monocromática | Un tono en varias luminosidades | Tranquila, unificada, refinada |
| Análoga | Vecinos en la rueda | Armoniosa, natural, fácil |
| Complementaria | Uno frente al otro | Alto contraste, enérgica |
| Complementaria dividida | Un tono más los dos que rodean a su opuesto | Viva pero menos tensa |
| Triádica | Tres tonos a igual distancia | Juguetona, equilibrada, atrevida |
Contraste: por qué cuesta leer algunos colores
El contraste es la diferencia entre dos colores. Para leer, la diferencia que más importa es la de luminosidad, no la de tono. El texto rojo sobre un fondo verde pueden ser dos tonos muy distintos y aun así costar de leer, porque ambos pueden ser parecidos en luminosidad. Mucha gente con deficiencia de visión del color no puede separarlos en absoluto.
Solo contraste de tono
- Rojo sobre verde de luminosidad parecida
- Azul sobre morado
- Naranja sobre rosa
- Desaparece al convertir a escala de grises
Contraste de luminosidad
- Casi blanco sobre azul marino profundo
- Casi negro sobre amarillo pálido
- Tinta oscura sobre un pastel claro
- Se sigue leyendo en escala de grises
La prueba de la escala de grises es la comprobación más rápida: pasa tu diseño a grises y mira si las palabras siguen destacando. Para el texto, las Pautas de Accesibilidad para el Contenido Web fijan relaciones de contraste mínimas, 4,5:1 para el texto normal y 3:1 para el texto grande. El contraste de color explica cómo medirlas.
Proporción: cuánto de cada color
Los mismos cinco colores pueden verse tranquilos o caóticos según cuánto uses de cada uno. Un punto de partida útil es un color dominante que cubra la mayor parte del espacio, uno o dos de apoyo y un acento pequeño para lo que quieres que se note. La regla 60-30-10 es la versión más común de esta idea.
Qué significan los colores
Los colores cargan con asociaciones, pero esas asociaciones son aprendidas, no innatas, y varían según la cultura y el contexto. El verde puede significar naturaleza, dinero o avanzar; el rojo, peligro, suerte o una rebaja. Trata el significado como una pregunta sobre tu público y tu categoría, no como un diccionario fijo. La psicología del color separa lo que se sostiene de lo que no, y el significado de los colores en el mundo muestra cuánto difieren.
Poner la teoría del color a trabajar
- 1
Empieza con un color
Elige el color que más importa: el de tu marca o uno sacado de una foto. Sacar una paleta de una imagen te ayuda.
- 2
Elige una armonía
Decide si la paleta debe ser tranquila (monocromática o análoga) o enérgica (complementaria o triádica).
- 3
Crea un rango de luminosidad
Añade una versión muy oscura y otra muy clara para el texto y los fondos. La mayoría de las paletas fallan por no tenerlas.
- 4
Asigna proporciones
Decide qué color domina, cuál apoya y cuál es el acento.
- 5
Prueba el contraste y el contexto
Comprueba el contraste del texto, haz la prueba de la escala de grises y mira la paleta en una composición real, no solo como muestras.
Para el trabajo de marca, cómo elegir los colores de una marca convierte estos pasos en un método completo.
Preguntas frecuentes
¿Qué es la teoría del color?
La teoría del color es un conjunto de ideas prácticas sobre cómo se relacionan los colores entre sí, cómo se combinan en paletas armoniosas y cómo afecta el contraste a lo que la gente ve y lee.
¿Cuáles son las tres propiedades del color?
El tono, la familia del color; la saturación, lo intenso o gris que es; y la luminosidad, lo cerca que está del negro o del blanco.
¿Cuáles son las principales armonías de color?
Monocromática, análoga, complementaria, complementaria dividida y triádica. Cada una describe dónde se sitúan los colores en la rueda de color unos respecto a otros.
¿Qué importa más para la legibilidad, el tono o la luminosidad?
La luminosidad. El texto necesita una diferencia clara de luminosidad con su fondo, y por eso un diseño legible sigue funcionando al convertirlo a escala de grises.
¿Tienen los colores significados universales?
No. Las asociaciones de color son aprendidas y difieren entre culturas, categorías y contextos, así que compruébalas con tu público.
Escrito por Gradiently
El equipo detrás de Gradiently, una herramienta de diseño creada en torno a los Marks: degradados vivos que hacen que todo lo que diseñas parezca tuyo.
Ver nuestro perfil
