Editorial Craft Bible
Construcción de paletas
Inicio Color como sistema Construcción de paletas
Color como sistema

Construcción de paletas

11 reglas 60-30-10 rule (Design Bootcamp) · FlowMapp 60-30-10Brand guideline neutral systems · ECB rich black (M3)Corporate identity palette systems (Pentagram, Landor)WCAG 2.1 SC 1.4.3 · Itten value contrast
39

Construcción de paletas

11 reglas
422

Parte de la regla 60/30/10

Reparte la superficie por rol, no por gusto: 60% dominante (fondo y base que ocupa la mayor parte de la página), 30% secundario (bloques, franjas, imágenes de apoyo) y 10% acento (el CTA, un folio destacado, el detalle que debe notarse primero). Tomada del interiorismo, la proporción evita que una página se lea como una lista plana de colores sin peso. Tres roles con áreas desiguales crean jerarquía antes de leer una sola palabra.

60 / 30 / 10
60
30
Dominante · secundario · acento, en proporción real
Las áreas desiguales crean jerarquía por sí solas.
Tercios iguales
Tres bloques iguales: nada guía la mirada
El peso igual aplana la página en un gráfico de franjas.
60-30-10 rule (Design Bootcamp) · FlowMapp 60-30-10
423

Gasta el acento en un solo elemento por composición

El acento es el color con menos superficie y más responsabilidad, así que resérvalo para un solo elemento por composición: un botón, un dato, un titular. Su poder viene de la escasez, como un hilo rojo que resalta solo porque todo a su alrededor está en calma. Repítelo en tres lugares y deja de señalar importancia para volverse ruido decorativo que jala el ojo en todas direcciones a la vez.

Un acento, un objetivo
El ojo aterriza en el único elemento saturado.
Acento por todos lados
Tres acentos compiten; ninguno gana.
60-30-10 rule (Design Bootcamp) · FlowMapp 60-30-10
424

Da a toda paleta al menos tres neutros

Una paleta editorial necesita mínimo tres neutros, no uno: un casi-blanco para fondos, un gris medio para texto secundario y filetes, y un casi-negro para el cuerpo de texto. Nunca dejes que el negro puro (#000) y el blanco puro (#FFF) sean los únicos neutros, son duros, aplanan la profundidad y, en prensa, el negro puro de cuerpo se ve delgado (ver la regla de negro rico en producción). Una rampa de neutros graduada es lo que hace que una página se sienta pensada y no armada con valores por defecto.

Tres neutros graduados
casi-blanco
gris medio
casi-negro
Fondo, filetes y cuerpo tienen cada uno su valor.
Negro puro sobre blanco puro
#FFF
#000
Dos extremos, sin tono medio para dar profundidad.
Brand guideline neutral systems · ECB rich black (M3)
425

Limita la paleta a cinco o seis colores con rol fijo

Fija un máximo de 5-6 colores con rol definido por proyecto: dominante, secundario, acento y tres neutros. Más que eso obliga a una decisión ad hoc en cada pieza nueva (¿cuál azul es el título esta vez?) y la consistencia entre números de la misma serie se erosiona. Un set corto con roles bloqueados es lo que permite que una revista o un reporte se vean como una sola publicación a lo largo de decenas de páginas hechas por manos distintas.

Seis colores, roles fijos
Un set cerrado: cada pieza sale de los mismos seis.
Montón de colores abierto
Sin roles: cada página reinventa el esquema.
Corporate identity palette systems (Pentagram, Landor)
426

Prueba el dominante y el acento en escala de grises

Antes de fijar la paleta, convierte el par dominante+acento a escala de grises: el ojo lee el valor (luminancia) antes que el matiz. Si el acento no se separa del dominante en gris, sube o baja su claridad aunque los matices ya se vean claramente distintos a color. Un acento rojo sobre fondo verde puede ser vibrante en pantalla y colapsar en un solo tono plano en grises, que es exactamente como lo verá un lector con daltonismo o una fotocopia en blanco y negro.

El valor también separa
Color, luego grises: siguen siendo dos tonos
Dominante claro vs acento oscuro sobreviven sin matiz.
Mismo valor, distinto matiz
En gris se funden en un solo tono plano
Distinto matiz, misma luminancia: falla sin color.
WCAG 2.1 SC 1.4.3 · Itten value contrast
427

Deriva tints y shades en pasos de luminosidad regulares

Construye variantes tonales del dominante y el secundario en pasos de luminosidad regulares (por ejemplo cuatro pasos en 90%, 70%, 50%, 30% de claridad) en vez de generar cada una al ojo. Los pasos parejos dan una familia de color coherente para fondos de sección, filas cebra de tablas y franjas, todas comprobablemente de marca. Los tints elegidos a mano se corren en matiz y espaciado, así la rampa se ve irregular y dos fondos que deberían sentirse emparentados no lo hacen.

Pasos de luminosidad parejos
90%70%50%30%
Un solo matiz, espaciado parejo: una familia real.
Tints al ojo
Saltos desiguales y un matiz que se va
Espaciado irregular; la rampa se ve como accidentes.
HSL tonal ramps · brand tint/shade systems
428

Ten un color de alerta separado del acento de marca

Cuando un documento debe señalizar urgencia (una errata, una oferta limitada, una fecha límite) reserva un color de alerta distinto en vez de reutilizar el acento decorativo. Si el mismo color a la vez decora y advierte, el lector no puede distinguir lo que solo es bonito de lo que de verdad es urgente. Deja el acento de marca para la jerarquía y agrega una señal funcional aparte, idealmente alineada a la convención (rojo para peligro, ámbar para precaución).

Acento y alerta son distintos
acento de marca → jerarquía, CTAs
rojo de alerta → errata, fecha límite
Lo decorativo y lo urgente nunca visten igual.
El acento hace de alerta
acento → CTA
mismo acento → fecha límite: ¿urgente o bonito?
Un color para dos trabajos borra la advertencia.
Semantic status color conventions (see S40)
429

En piezas multi-marca, acuerda quién manda primero

En piezas multi-marca o de coedición, decide por acuerdo explícito qué marca es dueña del color dominante antes de diseñar. El error más común es promediar las dos identidades (partir la diferencia entre sus azules) lo que aterriza en un tercer color que no es de ninguna y diluye a ambas. Elige una para liderar el 60%, deja que la otra tome el secundario o el acento, y mantén los valores exactos de cada marca intactos.

Una lidera, una apoya
Marca A
B
Ambos valores exactos sobreviven, una lidera claro
Cada marca conserva su color verdadero.
Promediadas en un tercer color
+
=
Un turquesa que no es de ninguna marca
Partir la diferencia diluye las dos identidades.
Co-branding guideline practice
430

Cumple contraste WCAG AA, con margen extra en papel

Verifica que el par dominante/texto cumpla WCAG AA: 4.5:1 para texto de cuerpo y 3:1 para texto grande (≥18pt o 14pt en negrita). El papel y el ojo humano absorben el contraste distinto a una pantalla retroiluminada, así que en impresión apunta por encima del mínimo digital, no justo en él, sobre todo para cuerpo largo y pies de foto pequeños. Un par que apenas pasa 4.5:1 en un monitor puede leerse como gris sobre gris ya siendo tinta sobre papel no couché.

Margen holgado
Casi-negro sobre casi-blanco pasa 4.5:1 con holgura, cómodo incluso en tinta.
~15:1
Por encima del mínimo, en papel sigue legible.
Apenas pasando
Gris medio sobre casi-blanco apenas pasa el mínimo digital y se ensucia en impresión.
~2.4:1
Falla AA y desaparece en papel no couché.
WCAG 2.1 SC 1.4.3 Contrast (Minimum) · W3C
431

Documenta cada color por rol, no solo por valor

Registra la paleta con su rol, no solo con su valor: una tabla de Rol · HEX/CMYK/Pantone · dónde va evita que el siguiente diseñador use el secundario como si fuera el acento en la próxima pieza de la misma serie. Una lista pelada de swatches dice qué son los colores pero no para qué sirven, y la intención es justo lo que se erosiona en un proyecto largo. Nombrar el trabajo hace que el sistema se defienda solo.

Dominante · #F7F8FA / C2 M1 Y1 K1 · fondo de página
Secundario · #C3CEEE / C24 M16 Y0 K7 · franjas, bloques de apoyo
Acento · #2743DB / PANTONE 2727 C · un CTA por página
Cuerpo · #1C2024 / negro rico · texto corrido
Brand guideline documentation practice
432

Para series largas, flota uno o dos colores por número

Para series editoriales largas (una revista, una colección de reportes) fija una paleta base estable y deja que solo 1-2 colores flotantes cambien por número o tema. Cada edición tiene su propia identidad visual (un verde de primavera, un óxido de otoño) sin reinventar todo el sistema, así la colección se lee como una familia con miembros distinguibles. Los neutros, el dominante y la tipografía se quedan; solo el acento de temporada se mueve.

Base fija, acento flotante
número N
Misma base cada número; solo se mueve el acento.
Toda la paleta reinventada
Sin base común; la serie pierde su identidad.
Editorial series identity systems