El diccionario

Las 348 combinaciones de Wada, por categoría.

Diez categorías: cinco de tono sobre tono y cinco de contraste de tonos, cada una en un nivel de luz. Cada combinación tiene su página, con papeles, contraste, maquetas y consejos. Los nombres en castellano son nuestros; los valores, del libro.

Filtrar por color

Las 348, en las diez categorías del libro. Pulsa un color para quedarte solo con las que lo llevan.

24 combinaciones

Tono sobre tono, claro

En el diccionario está entre las de tono sobre tono: colores de una misma familia. La jerarquía la da la luz, no el matiz, así que ordena los elementos de más claro a más oscuro. Es de las claras: funciona sobre blanco y en pantalla; en impresión pierde cuerpo, sube un punto la tinta.

19 combinaciones

Tono sobre tono, oscuro

En el diccionario está entre las de tono sobre tono: colores de una misma familia. La jerarquía la da la luz, no el matiz, así que ordena los elementos de más claro a más oscuro. Es de las oscuras: pide texto claro y superficies grandes; en piezas pequeñas se apelmaza.

19 combinaciones

Tono sobre tono, pálido

En el diccionario está entre las de tono sobre tono: colores de una misma familia. La jerarquía la da la luz, no el matiz, así que ordena los elementos de más claro a más oscuro. Es de las pálidas: tonos apagados que se llevan bien entre sí; el texto corrido pide una tinta de fuera, casi negra.

16 combinaciones

Tono sobre tono, denso

En el diccionario está entre las de tono sobre tono: colores de una misma familia. La jerarquía la da la luz, no el matiz, así que ordena los elementos de más claro a más oscuro. Es de las densas: colores cargados que necesitan mucho aire alrededor; menos es más.

36 combinaciones

Tono sobre tono, varios niveles de luz

En el diccionario está entre las de tono sobre tono: colores de una misma familia. La jerarquía la da la luz, no el matiz, así que ordena los elementos de más claro a más oscuro. Es de las de varios niveles de luz: ya trae jerarquía. Respétala en la pantalla: el más claro detrás, el más oscuro delante.

49 combinaciones

Contraste de tonos, claro

En el diccionario está entre las de contraste de tonos: matices enfrentados a propósito. El contraste ya viene puesto; no lo fuerces con sombras ni con negros. Es de las claras: funciona sobre blanco y en pantalla; en impresión pierde cuerpo, sube un punto la tinta.

44 combinaciones

Contraste de tonos, oscuro

En el diccionario está entre las de contraste de tonos: matices enfrentados a propósito. El contraste ya viene puesto; no lo fuerces con sombras ni con negros. Es de las oscuras: pide texto claro y superficies grandes; en piezas pequeñas se apelmaza.

38 combinaciones

Contraste de tonos, pálido

En el diccionario está entre las de contraste de tonos: matices enfrentados a propósito. El contraste ya viene puesto; no lo fuerces con sombras ni con negros. Es de las pálidas: tonos apagados que se llevan bien entre sí; el texto corrido pide una tinta de fuera, casi negra.

42 combinaciones

Contraste de tonos, denso

En el diccionario está entre las de contraste de tonos: matices enfrentados a propósito. El contraste ya viene puesto; no lo fuerces con sombras ni con negros. Es de las densas: colores cargados que necesitan mucho aire alrededor; menos es más.

61 combinaciones

Contraste de tonos, varios niveles de luz

En el diccionario está entre las de contraste de tonos: matices enfrentados a propósito. El contraste ya viene puesto; no lo fuerces con sombras ni con negros. Es de las de varios niveles de luz: ya trae jerarquía. Respétala en la pantalla: el más claro detrás, el más oscuro delante.

Los otros colores

Y si tu color es otro.

De la lámina a la pantalla

Seis reglas que no son nuestras.

Wada diseñó para tinta, tela y pigmento. Una pantalla emite luz, se lee durante minutos y tiene ley. Estas son las reglas con las que se construye color para interfaz y con las que adaptamos cada lámina; ninguna es nuestra, y por eso cada una lleva su dueño.

  1. Reparte 60 · 30 · 10

    Un color domina, otro acompaña y el tercero solo señala. En el libro van a partes iguales porque sirve para comparar; en pantalla igualarlos es ruido. Itten ya lo medía en 1961: los complementarios se equilibran en áreas inversas a su fuerza.

    Fuente: la regla 60-30-10 en interfaces (Hype4 Academy) e Itten, el contraste de extensión

  2. El fondo descansa

    El fondo vive en un extremo de la escala de luz, muy claro o muy oscuro, y con poco color. Ni blanco puro ni negro puro: teñido del tono de la paleta, que es lo que separa una interfaz diseñada de una montada.

    Fuente: Refactoring UI, «Building your color palette»

  3. El color del libro vive en la superficie

    Tarjetas, franjas y cabeceras son el 30 %: ahí el color de Wada se ve a tamaño grande sin llevar párrafo encima. Material separa el color de su papel, «surface» y «on-surface», para que el matiz cambie sin tocar la interfaz.

    Fuente: Material Design 3, los roles de color

  4. El párrafo no va en color

    El texto largo va en un casi negro (o un casi blanco) teñido del tono de la paleta, a 7:1. Los colores del libro entran por los titulares, donde el tamaño perdona. GOV.UK escribe con #0b0c0c, no con #000.

    Fuente: GOV.UK Design System y Refactoring UI

  5. El acento se gana el botón

    El más saturado va solo a lo que se pulsa, y se le exige lo que la ley pide a un componente: 3:1 contra el fondo (WCAG 1.4.11). Como palabra, 4,5:1 (1.4.3): un botón y un enlace no son lo mismo, y Radix les da dos pasos distintos de su escala.

    Fuente: WCAG 2.2, criterios 1.4.3 y 1.4.11, y Radix Colors

  6. Se mueve la luz, no el tono

    Todos los ajustes son de luminosidad en un espacio perceptual (Lab, OKLCH): el matiz se queda quieto. En HSL oscurecer un azul lo vuelve violeta y aclararlo, lila.

    Fuente: Evil Martians, «OKLCH in CSS: why we moved from RGB and HSL»

De dónde salen

Nos hemos leído el libro.

En 1933 un pintor y diseñador de vestuario japonés, Sanzō Wada, publicó un diccionario de combinaciones de colores: 348 paletas pensadas para tintoreros, tejedores y diseñadores, sacadas de años de trabajar el color de verdad, no de una rueda. Casi un siglo después sigue en la mesa de muchos estudios, incluida la nuestra. Lo hemos leído entero, hemos comprobado cada valor con el original y le hemos puesto nombre en castellano a sus 158 colores.

Combinaciones a partir del sistema de Sanzō Wada (Haishoku Sōkan, 1933-34; selección de Seigensha, 2010). Los valores están cotejados con esa edición; los nombres en castellano, el carácter de cada combinación y las explicaciones son nuestros.