Fundamentos
del color
para la construcción de identidad
De la luz al archivo de imprenta: cómo se decide el color de una marca.
De la luz a la paleta de tu marca
Todo tiene que ver con el color
Matiz, tono, tinte, saturación, opacidad… Cada palabra nombra una cosa distinta, y confundirlas es confundir la instrucción que le das a quien imprime o programa.
Elige un término y recorre su escala con el deslizador.
Lo que distingue un rojo de un amarillo o de un azul: el lugar del color en el círculo cromático. En los programas aparece como tono o hue.
#C0392B
El color es luz
Físicamente, el color es la franja de luz que el ojo alcanza a ver: ondas de entre 380 y 750 nanómetros, más o menos. Un prisma descompone la luz blanca en esas longitudes, y cada una se percibe como un color.
Un objeto absorbe parte de la luz que recibe y devuelve el resto. Lo que devuelve es lo que ves.
Los colores son información
El ojo los usa para leer el mundo antes de pensar en él.
- La frutasi ya se puede comer, o si ya se pasó
- El aguaqué tan honda está
- La flamaqué tan caliente arde; la azulada quema más que la roja
- El cielola hora del día, sin mirar el reloj
Un color casi nunca se ve como es: se ve en relación con lo que lo rodea. Por eso Albers lo llamó el medio más relativo del arte.
Un color, dos colores
Quita el fondo y compara los dos centros. Después prueba con otro caso.
#8A8A8A#8A8A8A¿Cuál de los dos grises es más claro?
Los dos centros son el mismo gris, #8A8A8A: el fondo negro lo aclara y el blanco lo oscurece.
La reacción al color es visceral
Donald Norman llama visceral al primer nivel con que se responde a un objeto: el de la apariencia, que llega antes de cualquier razonamiento. El color es de lo primero que ahí se registra.
Es, probablemente, la decisión que más rápido comunica la personalidad de una marca.
bastan para formarse una opinión de un producto, y entre el 62 y el 90 % de ese juicio descansa solo en el color.
Las asociaciones entre color y emoción no son casuales
Heller preguntó a dos mil personas de toda Alemania qué colores asociaban con 160 sentimientos e impresiones, del amor al odio y de lo elegante a lo anticuado. Las respuestas coinciden porque salen de una cultura y un idioma compartidos.
El idioma lo registra: números rojos, príncipe azul, humor negro, verde de envidia.
Psicología del color, con matices
Sirve como punto de partida, no como receta.
«Azul = confianza, rojo = pasión, amarillo = alegría» es demasiado simple y casi nunca aporta una idea. El significado cambia con la cultura, con la categoría del producto y con los colores que lo acompañan.
El mismo color, tres lecturas
Cambia de lectura y compara las dos piezas: el color no se mueve.
El significado del color es cultural, no universal. El mismo blanco es boda en buena parte de Occidente y luto en varias tradiciones de Asia.
El significado depende de la categoría. El verde de un alimento dice natural u orgánico; ese mismo verde en finanzas dice crecimiento o dinero.
Lo que más pesa es la combinación y el contraste. Dos marcas pueden usar el mismo azul y decir cosas opuestas según lo que lo acompañe.
Cultura: el blanco es boda en buena parte de Occidente y luto en varias tradiciones de Asia. Categoría: el verde dice orgánico en un alimento y dinero en finanzas. Combinación: el mismo azul se lee enérgico con naranja y corporativo con gris.
El color es consecuencia, no una elección libre ni al azar
El error más común es elegir colores por gusto personal o por tendencia. La personalidad, el arquetipo y el andamiaje cognitivo de la marca son los que dan la dirección.
y arquetipo
emocionales
Del adjetivo a la paleta
Shigenobu Kobayashi ordenó colores y adjetivos sobre los mismos ejes: cálido o frío, suave o firme, limpio o agrisado. Los atributos de tu marca se traducen primero a esas cualidades, y solo entonces se buscan los colores.
Elige un arquetipo o mueve las tres escalas: la paleta se arma sola.
auténtica, libre, terrosa
Una paleta de marca es un sistema jerárquico
Carga la mayor parte de la identificación. Tiene que funcionar solo, a cualquier tamaño, a color y en blanco y negro.
De uno a tres. Amplían el registro sin competir con el primario: campañas, líneas de producto, temporadas.
Llama a la acción, alerta y marca lo que se puede tocar. Contrasta fuerte con todo lo demás.
Grises, blancos, negros o tierras que sostienen entre el 70 y el 80 % del uso real: fondos, texto, espacio. Es el color que menos se diseña y más se usa.
En Starbucks, el verde carga la marca; el blanco y los neutros hacen casi todo el trabajo.
Jerarquizada o plana
Una paleta con jerarquía se puede gestionar. Una lista plana de «nuestros seis colores favoritos» es difícil de aplicar con consistencia y diluye el reconocimiento.
Cambia de modo y mira adónde se va la vista. La paleta es la que armaste en la lámina 12.
La prueba de contraste
Un color de marca que no se lee no sirve para texto. Las WCAG (Web Content Accessibility Guidelines · Pautas de Accesibilidad para el Contenido Web) piden una razón de al menos 4.5 a 1 para texto normal y de 3 a 1 para texto grande.
Elige un color para el texto y otro para el fondo.
Un titular de marca
Y un párrafo de texto corrido, que es donde el contraste se nota primero: si cansa leerlo aquí, cansará en el sitio web y en el empaque.
Herramientas útiles
coolors.co
Adobe ColorSacar una paleta de una imagen y probar reglas de armonía: complementarios, análogos, triádicos.color.adobe.com
WebAIM Contrast CheckerLa prueba de contraste, con cualquier pareja de colores.webaim.org/resources/contrastchecker
HuemintPaletas generadas con inteligencia artificial a partir de restricciones de marca. Sirve para ver variaciones rápidas.huemint.com
Un color se especifica para cada salida
Antes de entregar un color, cuida sus especificaciones técnicas: el mismo verde se reproduce distinto en papel, en pantalla y en tinta directa.
| Modo | De qué está hecho | Dónde se usa |
|---|---|---|
| CMYK (Cyan, Magenta, Yellow, Key · cian, magenta, amarillo y negro) | Cuatro tintas de proceso, impresas en puntos | Imprenta: offset, digital, gran formato |
| Pantone | Tintas directas, mezcladas antes de imprimir | Papelería, empaques, textiles, señalización |
| RGB (Red, Green, Blue · rojo, verde, azul) | Luz de tres colores | Pantallas: web, video, redes |
| Hexadecimal | El RGB escrito en base 16 | HTML, CSS y cualquier código |
| Escala de grises | Solo valor, sin matiz | Una tinta: sellos, fotocopia, grabado |
Luz que suma, tinta que resta
Apaga y enciende cada canal, y mira qué queda en el centro.
- Cuatro tintas de proceso impresas en puntos diminutos. A la distancia de lectura, el ojo las mezcla.
- La K es la plancha clave. Pone el negro que las otras tres no alcanzan y, de paso, ahorra tinta.
- Su gama es más chica que la de una pantalla. Hay verdes, naranjas y azules eléctricos que en RGB se ven y en papel no salen.
Escala de grises
Una salida a una tinta —un sello, una fotocopia, un grabado láser, una serigrafía de un solo color— se queda con el valor y pierde el matiz. Si dos colores de tu paleta caen en el mismo gris, ahí dejan de distinguirse.
Pasa tu paleta a grises y revisa qué pares se confunden.
Pantone
Un sistema de tintas directas: cada color se mezcla antes de imprimir y se identifica con un código, y cualquier imprenta con la fórmula lo reproduce igual.
El mismo código cambia con el papel. La guía Coated (C) está impresa en papel estucado, que deja la tinta en la superficie; la Uncoated (U), en papel sin estucar, que la absorbe y la apaga.
En pantalla solo se puede aproximar: la diferencia real se ve con la guía impresa en la mano.
El color de las pantallas. Cada píxel mezcla luz roja, verde y azul, cada una en 256 niveles, de 0 a 255: son 16 777 216 combinaciones.
La misma cifra no se ve igual en todas las pantallas; cambia con el brillo y la calibración. Al entregar RGB se indica también el perfil; para la web, sRGB.
Un color, cinco nombres
HSB (Hue, Saturation, Brightness · tono, saturación, brillo) describe el color como lo piensa quien diseña: qué color, qué tan intenso, qué tan luminoso. Es el mismo RGB, ordenado de otra manera.
Mueve los cuatro mandos y mira cómo cambia cada notación.
El alfa mide cuánto se ve lo que hay detrás. El CMYK que da una pantalla es aproximado; el real depende del perfil de impresión.
- HSB
- RGB
- RGBA
- HEX
- CMYK
Cómo se lee un hexadecimal
Es el RGB escrito en base 16, como lo usan HTML y CSS: seis cifras, dos por canal, de 00 a FF, que va de 0 a 255.
Con ocho cifras, las dos últimas son la opacidad.
Así se entrega en un manual
Escribe el nombre de tu marca, ajusta cada color si hace falta e imprime la ficha.
El Pantone de cada color se elige a ojo sobre la guía impresa; ninguna fórmula lo calcula.
Cómo se practica esto
Retomar la personalidad y el arquetipo de la marca, con sus tres a cinco adjetivos.
Traducir esos adjetivos a temperatura, firmeza y limpieza del color.
Definir un primario, de uno a tres secundarios, un acento y los neutros.
Medir el contraste de cada pareja que vaya a llevar texto y pasar la paleta a escala de grises.
Anotar cada color en HEX, RGB, CMYK y Pantone, y armar la ficha para el manual.
Fuentes
Albers, J. (1963). Interaction of color. Yale University Press.
Heller, E. (2004). Psicología del color: cómo actúan los colores sobre los sentimientos y la razón. Gustavo Gili.
Kobayashi, S. (1991). Color image scale. Kodansha International.
Norman, D. A. (2004). Emotional design: Why we love (or hate) everyday things. Basic Books.
Singh, S. (2006). Impact of color on marketing. Management Decision, 44(6), 783–789. https://doi.org/10.1108/00251740610673332
World Wide Web Consortium. (2023). Web Content Accessibility Guidelines (WCAG) 2.2. https://www.w3.org/TR/WCAG22/
Fotografía del ojo: Serna Sz, C. A. (2009). The eye | Reverse lens test (result) [Fotografía]. Flickr. https://www.flickr.com/photos/rasec/3470438271/ · Licencia CC BY-NC-ND 2.0.
Fotografías de la niebla y del collage de psicología del color: autoría sin identificar.
Ahora sí:
arma la paleta
de tu marca
Empieza por los adjetivos. El color que más te gusta puede esperar.