Field
studies
in colour
Tools
Color Lab
One color, thirteen ways to derive a palette from it, and the six things about color that decide whether the result holds.
MeridianField studies in colour
Meridian
DisplayColour is a relationship
HeadlineA palette is a set of decisions
BodyPick a light, a middle and a dark before you pick a colour at all. Squint, and if it falls apart in gray no hue will rescue it.
MetaFIELD NOTE 04 · OCTOBER
4 coloursValue order holdsFigure merges
Two slots and one motif, tiled. The ground carries it and the line draws it.
Eight ways to decide a palette
Six sessions, one picture a week, and a set that has to read as one voice by the end of it.
Take a placeTake a placeRead the briefCancelYour email
Body 13.6:1Button 4.8:1
Three to five, one of them loud
Holds as a themeHolds as a product theme: body 13.6:1, button 4.8:1.
Hard edges, flat fills, and the empty space doing half the drawing. Count the colours in any Malika Favre cover and you get three, four or five, never more. One is loud, one is the paper or the skin, and black is usually in there. The fourth is never decoration; it is the thing the picture is about.
The loud colour reads at 2.9:1 on the ground. It is a fill, not a text colour, at any size.
How color works
What the picker is asking, and what the eye answers
Six rooms, in the order an illustration class takes them, which is not the order a picker puts them in. The seed from the tool above is the color in every one of them, so a move down here repaints the tile.
Value first
Squint. If it falls apart in gray, no hue will save it. This is the picker’s square for your hue, saturation across and brightness up. Turn it gray and you are looking at what the squint sees: pick a light, a middle and a dark before you pick a color at all.
L 60 · C 0.209 · H 259
A darker version is not brightness down.
Dropping brightness alone adds black and the color goes to mud. Push saturation up as brightness comes down and the dark stays the same color, only deeper. The same move in reverse makes a tint. Black is not the opposite of white here; gray is the absence of saturation.
Three numbers
Hue is which color, saturation is how much of it, brightness is how light it is. Most people only ever move the first slider, and the picture was decided by the third. Illustrator calls them H, S and B; every picker on the web is asking the same three questions.
- Hex
- RGB
- 34 121 250
The hex and the three RGB numbers are the same color, and neither tells you what it looks like.
Red at the top, then every thirty degrees. Hue is a place on this ring.
Proportion
Same three colors, opposite picture. A palette is a list of colors and how much of each: when one color owns the page and one is scarce, the eye rests and goes straight to the scarce one. In near-equal amounts the same three are loud, which is a choice and not a mistake, but it has to be the choice you meant.
The ribbon is the palette by area, the way a printed picture is counted: read the widths, not the number of colors.
- One loud colour60%The ground. Everything else is measured against it.
- A fourth30%The second. Structure, not signal.
- A fourth10%The scarce one. This is where the eye goes.
Sixty, thirty, ten is a rule of thumb, not a law. The part that is load-bearing is that one color dominates and one is scarce, and the scarce one lands on the thing that matters most. On the platform this is why the brand yellow is a role with four jobs rather than an accent to reach for.
A color is never seen alone
The two small squares below are the same color. They are the same hex, drawn from the same variable. On one ground it reads warm and light, on the other cool and dark. Albers built a whole course on this: you do not choose a color, you choose a relationship.
Stare at both chips before you press that.
The practical version: pick a palette on the ground you will actually use it on, never on white when the work is not white. It is also the reason the tool above derives light and dark separately instead of inverting one into the other. The same token on two grounds is two different promises, so each mode reads its own stop off the ramp and gets checked against the surface it really lands on.
Brightness is not lightness
Twelve hues, every one at full saturation and full brightness. The picker says they are all 100. Turn them gray and read the numbers: yellow is near white, blue is halfway to black. HSB is a geometry of the screen’s three lights and it knows nothing about eyes, which is why a ramp built by dropping brightness goes muddy in one hue and stays bright in another.
OKLCH measures the color the eye sees.
Lightness, chroma, hue. The same three ideas, except a step of ten in lightness looks like a step of ten whatever the hue, and two colors at the same lightness gray to the same gray. This disc is one lightness: hue around, chroma outward. The ragged edge is real. It is the limit of what an sRGB screen can show at that lightness, and it is why a pure yellow can be light and a pure blue cannot.
Your color reads L 60 · C 0.209 · H 259. Cut the disc at its lightness and it sits on the mark; move the slider and it floats above a slice it is not in.
Three globals, and their tints
Three colors is a whole cover. Pick them in value order, a light, a middle and a dark, make each one global, and point every fill at one of the three. Then change one and watch the file follow. A tint of a global is still that global, which is the escape hatch when two shapes merge and you refuse to add a fourth color.
- skyL 93The light. Ground for the far things.
- skinL 60The middle. The subject, and the loud one if any is.
- groundL 22The dark. The near things and the line.
- Swatches
- 3 global, plus black and white
- Value order
- light, middle, dark
- Figure from ground
- reads
Change one hex and watch every shape that points at it follow, with the picture still one picture. That is the whole reason a global swatch exists, and a design token is the same idea at the size of a product: the bench above is a Swatches panel with roles instead of names.
This is the whole mechanism the platform is built on, under a different name. A global swatch is a color the file remembers; a design token is a global swatch the whole product remembers. Edit the parent once and every surface pointing at it follows, which is what the next section is about.
Signed in, on a real brand
Everything above is a sketchpad: it makes a theme and hands you the files. Signed in, the same instrument points at a brand that other things read from, so it stops being a picker and becomes a proposal you have to approve, which is worth knowing before you meet it.
This wheel is imported from components/canvas/palette, the same module the brand panel mounts. Signed in, every dot is one of the brand’s own tokens, each hex sitting where its hue and chroma put it and dimming when it falls off the slice you are cutting. A color reads as in-gamut only at the lightness it actually lives at, so the disc is cut one lightness at a time.
Nothing you do on the wheel writes anything.
- 01
You pick, and name the token it is for
The wheel, a ramp of ten stops, or a contrast fix. Whichever room you are in, the output is a list of edits against token paths.
- 02
The server reads what the brand holds right now
It fills in the before from the live token file and refuses anything that is not a color at a color path. So the diff you are shown is against what is really there, not against the copy your browser loaded twenty minutes ago. This step runs on arithmetic; no model is involved in a palette.
- 03
Apply is one write, or it is refused
The batch goes through the single route allowed to touch a brand’s tokens. A ramp of ten stops is one version, one changelog entry, one spec rebuild. If the brand moved underneath you between the proposal and the apply, it is refused outright and you make the proposal again from what is there now.
- 04
Then every surface repaints
The token file is the source for the canvas, the site renderer, the brand book and the WordPress theme. One accepted proposal moves all of them at once, which is the reason the write is guarded this carefully rather than being a color input that saves on blur.
Two things to know before you look for it
The tokens belong to the brand. A site only borrows them, so changing a color on Resume Place means every site rendering through Resume Place changes with it. That is the shared-library model working as intended, and it is also the kind of thing people discover by accident, so the panel counts the sites affected before you touch anything.
And the instrument only opens on a brand whose tokens live as files in the repo. A brand created in the app that has never had a token folder written for it has nothing for the wheel to read or the apply to write, so color editing is not available on it at all yet. Standing that folder up is still a studio job.
Log in to open this on a brand you own, or talk to us about standing one up.