Design Lab

Catalogue / Plate 63← All plates

Neutrals from the brand's hue

Pick one brand hue and every ink, paper and grey is rebuilt from it.

63 / Colour

Every neutral below shares the brand hue at near-zero chroma.

TokenSwatchOKLCHHexOn paper
--accentfills, the button, punctuationoklch(0.600 0.190 33.0)#da45284.03:1
--accent-inkaccent as text on paperoklch(0.470 0.160 33.0)#a129116.9:1 passes AA text
--inkbody textoklch(0.230 0.020 33.0)#261a1715.77:1 passes AA text
--ink-2secondary text and labelsoklch(0.440 0.016 33.0)#5b504d7.26:1 passes AA text
--rulehairlinesoklch(0.870 0.013 33.0)#ddd1cf1.39:1
--paper-2panelsoklch(0.948 0.011 33.0)#f5ebe91.09:1
--paperpage groundoklch(0.976 0.006 33.0)#fbf6f4base
Button label on the accent fill (ink, because paper failed)3.91:1

Remake it

Build one interactive web page: Drag a brand hue and the ink, paper and greys are rebuilt at that hue, with every contrast measured live.

Set it on an invented business called Sampleton, with its own drawn or generated pictures and no one else's files. It suits: Any client with one dominant hue in the logo, which is most of them. Do not let it fail the way this kind of piece usually does: Neutral chroma above about 0.03 makes the white look stained. Check the paper next to the client's own photos.

It must work with the keyboard, on a phone, with reduced motion respected and no text under 12px. Tell me which libraries you chose and why.
Notes: when it suits, when it does not, how it fails
When it suits
Any client with one dominant hue in the logo, which is most of them.
When it does not
A monochrome identity, two competing brand hues, or a colour-critical product such as paint or fashion.
How it fails
Neutral chroma above about 0.03 makes the white look stained. Check the paper next to the client's own photos.

Measured on: landonorris.com · T1. Built from scratch for an invented business; nothing here comes from the site studied.