La paleta de colores
Una paleta de colores es la lista cerrada de colores de una pieza, con un rol asignado a cada uno y un valor escrito en un código que se pueda reproducir.
Término
La paleta de colores
Categoría
Especificación de una pieza o de una identidad
No confundir con
La armonía, que sólo elige matices sobre el círculo
Dónde se decide
Después de la armonía y antes de maquetar nada
No es un conjunto de matices bonitos: es una paleta cuando cada color tiene un trabajo, un número exacto y una razón para estar ahí.
Qué es una paleta de colores
Una paleta se distingue de una selección de matices por tres cosas que añade. El valor, es decir cuán claro u oscuro es cada color, que decide si algo se lee. La proporción, es decir cuánta superficie ocupa cada uno. Y la función: este color es el fondo, este el texto, este el acento y este avisa de un error.
De ahí sale la respuesta a cuántos colores necesita una paleta, pregunta mal planteada mientras no se cuenten los roles. Una pieza impresa suele resolverse con cinco: superficie, texto, un neutro para lo secundario, un acento y un refuerzo. Una interfaz necesita más, porque un componente no es un dibujo sino sus siete estados: reposo, hover, foco, activo, inhabilitado, carga y error.
De qué teoría sale la paleta de colores y desde cuándo
La paleta de colores sale del momento en que el color deja de describirse con palabras y empieza a ordenarse en ejes medibles. Albert Munsell publica su sistema en 1905 con tres dimensiones, matiz, valor y croma, y una paleta no es más que una selección de puntos en ese espacio. Antes, un color se pedía por su nombre y el nombre no era reproducible.
Para la pantalla, el equivalente llega con sRGB, el espacio estándar propuesto por HP y Microsoft en 1996. Michel Eugène Chevreul, en 1839, y Josef Albers, en Interaction of Color de 1963, aportan la advertencia que ninguna lista de números resuelve: cada color de la paleta se verá distinto según el que termine a su lado.
Cómo se usa una paleta de colores al decidir una pieza
Para armar la paleta de una pieza real conviene seguir el mismo orden siempre, y son cinco pasos.
- Contar los roles que la pieza necesita antes de mirar ningún color.
- Fijar el matiz base por razones del encargo, no del círculo cromático.
- Derivar los demás matices con una armonía, midiendo ángulos desde la base.
- Separar cada color en valor hasta que la pieza funcione en escala de grises.
- Escribir cada color en un código reproducible y anotar su rol al lado.
El cuarto paso es el que más se salta y el que decide el resultado: una paleta cuyos colores comparten valor se derrumba en cuanto alguien la fotocopia o la proyecta en una sala con luz. El quinto la vuelve identidad, y un manual de identidad existe para que la marca, el área de respeto, el color y la tipografía sobrevivan a quien los eligió.
Qué error se comete con la paleta de colores más a menudo
El error que se comete con la paleta de colores más a menudo es elegir por matiz y no por valor. Todos los colores salen del sector correcto del círculo, la lámina se ve agradable, y la pieza no se lee. El segundo es no fijar la proporción: cinco colores usados en partes iguales no dan jerarquía, y sin jerarquía la pieza no dirige la mirada.
El tercer error es tratar el color de estado como decoración. Cuando un color avisa de algo, el aviso no puede depender de que se distinga ese color: siempre hace falta una segunda señal, sea texto, forma, posición o icono. La norma ISO 3864 lo resuelve así, y su rojo de prohibición viene además con una forma y un pictograma.
Qué valores y qué nombres hay que saber de una paleta de colores
Los valores que hay que saber de una paleta son el código de cada color y su relación de contraste contra el fondo donde va a caer. La siguiente parte de un matiz base a 210 grados, con su complementario a 30 grados como acento, y sus relaciones están calculadas contra blanco con la fórmula de luminancia relativa de WCAG.
| Rol | Hexadecimal | RGB | Contra blanco | Para qué alcanza |
|---|---|---|---|---|
| Texto | #0F263D | 15, 38, 61 | 15.39:1 | Supera el 7:1 del nivel AAA |
| Títulos | #1F4C7A | 31, 76, 122 | 8.85:1 | Supera el 7:1 del nivel AAA |
| Acento frío | #3380CC | 51, 128, 204 | 4.12:1 | Texto grande y componentes, no texto normal |
| Acento cálido | #CC6600 | 204, 102, 0 | 3.84:1 | Texto grande y componentes, no texto normal |
| Superficie | #D6E6F5 | 214, 230, 245 | 1.27:1 | Sólo fondo, nunca texto |
Los dos acentos ilustran el punto entero: son los colores más vistosos de la paleta y ninguno llega al 4.5:1 que el nivel AA pide para texto normal. Sirven para un botón grande, un borde o un gráfico, y no para un párrafo.
Las combinaciones que más se piden: azul y verde, gris y beige
Las combinaciones que más se piden se resuelven todas con la misma operación, que es separar en valor lo que el matiz no separa. Azul y verde es el caso difícil, porque son vecinos en el círculo y pueden compartir luminancia: el cian #00FFFF y el verde #00FF00 dan entre sí 1.09:1. La pareja funciona en cuanto uno se lleva a un valor claramente más oscuro, como el #0F263D de la tabla.
El gris y el beige son el caso fácil, porque una familia de un solo matiz es en realidad una escala de valor, y la escala se puede escribir con sus cifras contra blanco: #1A1A1A da 17.40:1, #333333 da 12.63:1, #595959 da exactamente 7.00:1, #767676 da 4.54:1 y #949494 da 3.03:1. Ese #767676 es el gris más claro que todavía cumple el 4.5:1 del nivel AA sobre blanco, y conocerlo ahorra la mitad de las discusiones sobre texto secundario.