Rey’s Lab

9 steps · 5 accents

How the palette is shaped

The eleven sampled colours, plotted. Not a specification — a measurement. It was made while testing whether a generator could continue the palette's shape, and the answer it produced is that the palette does not have one: consecutive brightness steps run from 0.018 to 0.197 apart. That is worth knowing and worth keeping, whether or not anything is ever generated from it.

Reading these

Three plots of the same nine colours, one per dimension. Read them together: a colour is a brightness, a colourfulness and a hue.

  • Every dot is painted in the colour it represents and sits at its own position, so a dot that looks wrong beside its neighbours is wrong.
  • The line joins them in ramp order. It is a reading aid, not a curve — there is no function here, which is the finding.
  • Hover a dot for its name, hex and value. Everything is also in the table below, because a chart is not a source.
  • The two accents are not on these plots. They are not on the ramp — they sit off it by design, which is what makes them accents.

Brightness

OKLab lightness, 0 is black and 1 is white. This is the one that sets how far apart two colours look. The dark end is packed and the light end is wide open, and the gap between the widest and narrowest step is what makes this a set of choices rather than a scale.

0.000.250.500.751.00voidpagesurfaceraisedborderlinedimmutedinkvoid, #100c24, 0.18page, #191233, 0.21surface, #241e47, 0.27raised, #33286c, 0.33border, #3e3668, 0.37line, #6b449b, 0.47dim, #9d98be, 0.70muted, #ada8d1, 0.75ink, #edebfb, 0.95

Colourfulness

OKLab chroma. Zero is grey. It rises to a peak at the strong edge and falls away toward white — which is why the text colours read as almost-grey and the borders do not, and why nothing on this site is both light and saturated.

0.0000.0600.1200.180voidpagesurfaceraisedborderlinedimmutedinkvoid, #100c24, 0.048page, #191233, 0.063surface, #241e47, 0.074raised, #33286c, 0.113border, #3e3668, 0.084line, #6b449b, 0.138dim, #9d98be, 0.055muted, #ada8d1, 0.059ink, #edebfb, 0.021

Hue

Degrees round the colour wheel. Eight of the nine sit between 285° and 292°; the strong edge is at 302°, picked pinker by eye. That wobble is small and it is real — a generated scale would have flattened it, which is one of the things it would have cost.

270°280°290°300°310°voidpagesurfaceraisedborderlinedimmutedinkvoid, #100c24, 288°page, #191233, 290°surface, #241e47, 287°raised, #33286c, 286°border, #3e3668, 289°line, #6b449b, 302°dim, #9d98be, 291°muted, #ada8d1, 290°ink, #edebfb, 292°

The gaps

Brightness distance between each colour and the one before it — the number that says whether this is a scale.

void → page0.037
page → surface0.054
surface → raised0.065
raised → border0.035
border → line0.106
line → dim0.224
dim → muted0.053
muted → ink0.197

Smallest 0.035, largest 0.224 — a factor of 6.3. An evenly spaced scale would have them all the same, or growing by a fixed ratio. This does neither, and the compression at the dark end is the reason: page and card are nearly the same colour and the border carries the separation, which is the reference's rim-light grammar and the thing the whole look rests on. A scale that spaced them evenly would be a different site.

Every value

The ramp, then the accents that sit off it.

void#100c24L 0.175C 0.048H 288.1°Code chip inset
page#191233L 0.212C 0.063H 289.8°The app background
surface#241e47L 0.266C 0.074H 287.0°A card
raised#33286cL 0.331C 0.113H 285.8°A hovered card
border#3e3668L 0.367C 0.084H 288.9°A resting edge
line#6b449bL 0.473C 0.138H 302.1°A strong edge
dim#9d98beL 0.697C 0.055H 290.9°Quiet text
muted#ada8d1L 0.750C 0.059H 290.5°Secondary text
ink#edebfbL 0.946C 0.021H 291.7°Body text
cyan#3bb8f5off the rampInteraction
gold#ffd23foff the rampState
cool 8#007bb3off the rampUnbound since 03 settled
cool 11#48c3ffoff the rampButton label, pressed edge
cool 12#bce8ffoff the rampBoth buttons and label links, hovered