The dictionary

Wada's 348 combinations, by category.

Ten categories: five tone-on-tone and five contrasting-hue, each at a level of light. Every combination has its own page, with roles, contrast, mockups and advice. The Spanish names are ours; the values, from the book.

Filter by colour

All 348, in the book's ten categories. Tap a colour to keep only the ones that carry it.

24 combinations

Tone on tone, light

In the dictionary it sits among the tone-on-tone sets: colours from one family. Hierarchy comes from light, not hue, so order elements from lightest to darkest. It is one of the light ones: works on white and on screen; in print it loses body, so push the ink a notch.

19 combinations

Tone on tone, dark

In the dictionary it sits among the tone-on-tone sets: colours from one family. Hierarchy comes from light, not hue, so order elements from lightest to darkest. It is one of the dark ones: it needs light text and large surfaces; in small pieces it clogs.

19 combinations

Tone on tone, pale

In the dictionary it sits among the tone-on-tone sets: colours from one family. Hierarchy comes from light, not hue, so order elements from lightest to darkest. It is one of the pale ones: muted tones that get along; running text needs an ink from outside, near black.

16 combinations

Tone on tone, dense

In the dictionary it sits among the tone-on-tone sets: colours from one family. Hierarchy comes from light, not hue, so order elements from lightest to darkest. It is one of the dense ones: loaded colours that need plenty of air around them; less is more.

36 combinations

Tone on tone, mixed light

In the dictionary it sits among the tone-on-tone sets: colours from one family. Hierarchy comes from light, not hue, so order elements from lightest to darkest. It is one of the mixed-light ones: it already brings hierarchy. Keep it on screen: lightest at the back, darkest in front.

49 combinations

Contrasting hues, light

In the dictionary it sits among the contrasting-hue sets: hues deliberately set against each other. The contrast is already there; don't force it with shadows or blacks. It is one of the light ones: works on white and on screen; in print it loses body, so push the ink a notch.

44 combinations

Contrasting hues, dark

In the dictionary it sits among the contrasting-hue sets: hues deliberately set against each other. The contrast is already there; don't force it with shadows or blacks. It is one of the dark ones: it needs light text and large surfaces; in small pieces it clogs.

38 combinations

Contrasting hues, pale

In the dictionary it sits among the contrasting-hue sets: hues deliberately set against each other. The contrast is already there; don't force it with shadows or blacks. It is one of the pale ones: muted tones that get along; running text needs an ink from outside, near black.

42 combinations

Contrasting hues, dense

In the dictionary it sits among the contrasting-hue sets: hues deliberately set against each other. The contrast is already there; don't force it with shadows or blacks. It is one of the dense ones: loaded colours that need plenty of air around them; less is more.

61 combinations

Contrasting hues, mixed light

In the dictionary it sits among the contrasting-hue sets: hues deliberately set against each other. The contrast is already there; don't force it with shadows or blacks. It is one of the mixed-light ones: it already brings hierarchy. Keep it on screen: lightest at the back, darkest in front.

The other colours

And if your colour is another one.

From plate to screen

Six rules that are not ours.

Wada designed for ink, cloth and pigment. A screen emits light, is read for minutes at a time and has a law. These are the rules colour for interfaces is built with, and the ones we adapt each plate with; none of them is ours, so each one carries its owner.

  1. Distribute 60 · 30 · 10

    One colour dominates, another accompanies and the third only points. In the book they sit in equal parts because that is how you compare them; on screen, equalising them is noise. Itten measured it in 1961: complementaries balance in areas inverse to their strength.

    Source: the 60-30-10 rule in interfaces (Hype4 Academy) and Itten's contrast of extension

  2. The background rests

    The background lives at one end of the lightness scale, very light or very dark, with little colour. Neither pure white nor pure black: tinted with the palette's hue, which is what separates a designed interface from an assembled one.

    Source: Refactoring UI, “Building your color palette”

  3. The book's colour lives on the surface

    Cards, bands and headers are the 30%: that is where Wada's colour shows at full size without carrying a paragraph. Material separates a colour from its role, “surface” and “on-surface”, so the hue can change without touching the interface.

    Source: Material Design 3, colour roles

  4. Paragraphs don't go in colour

    Long text goes in a near-black (or near-white) tinted with the palette's hue, at 7:1. The book's colours enter through headings, where size forgives. GOV.UK writes in #0b0c0c, not #000.

    Source: GOV.UK Design System and Refactoring UI

  5. The accent earns the button

    The most saturated colour goes only on what gets clicked, and is held to what the law asks of a component: 3:1 against the background (WCAG 1.4.11). As a word, 4.5:1 (1.4.3): a button and a link are not the same thing, and Radix gives them two different steps of its scale.

    Source: WCAG 2.2, criteria 1.4.3 and 1.4.11, and Radix Colors

  6. Move the lightness, not the hue

    Every adjustment is a change of lightness in a perceptual space (Lab, OKLCH): the hue stays put. In HSL, darkening a blue turns it violet and lightening it turns it lilac.

    Source: Evil Martians, “OKLCH in CSS: why we moved from RGB and HSL”

Where they come from

We read the book.

In 1933 a Japanese painter and costume designer, Sanzō Wada, published a dictionary of colour combinations: 348 palettes meant for dyers, weavers and designers, drawn from years of working with real colour rather than a wheel. Almost a century later it still sits on the desk of many studios, ours included. We read it cover to cover, checked every value against the original and gave its 158 colours a name in Spanish.

Combinations based on Sanzō Wada's system (Haishoku Sōkan, 1933-34; Seigensha selection, 2010). Colour values are checked against that edition; the Spanish names, each combination's character and the explanations are ours.