Field notesHow the studio picks palettes
ColourTheory.by Zyqor Studio
Every site we make runs on exactly three colours: a light ground, a deep ink and one accent. This page shows the maths and the taste behind them, live. Drag things.
00The house palette
Three colours. Never four.
Equal thirds look like a flag. This is the split the whole site is painted in.
01The wheel
Harmony is geometry.
Colours that work together sit in fixed shapes on the wheel: opposite, side by side, or on the points of a triangle. Drag the white handle to pick a base hue; the shape follows.
HSL: the wheel everyone learns. Fast, but its yellows glow and its blues sink at the same 'lightness'.
Complementary
Two hues straight across the wheel. Maximum tension, so one of them has to be the quiet one.
02Proportion
60 30 10.
The same three colours can look expensive or loud. The difference is how much of each you use: most of the page in the ground, a third in the ink, a sliver of accent.
03Contrast
Pretty is not readable.
Every pair gets checked against WCAG 2.2 before it ships. Type a hex or use the pickers; the ratio and the pass marks update as you go.
Live preview
Read me at a glance.
Body copy is where weak contrast hurts most: sixteen pixels, long lines, read on a phone in the sun.
Caption, 13px. The smallest thing on the page still has to work.
Our own palette, honestly measured
Ochre at full strength scores 2.88:1 on Ivory: perfect for a 120px numeral, wrong for a caption. Darkened to #8F6420 it reaches 4.49:1, still a hair under the line for body text. So on Ivory, Pine does the reading.
04Temperature
Warm sells appetite. Cool sells calm.
Same scene, same shapes, only the temperature moves. Watch what it does to the mood before you read a single word.
Warm-accent concepts in the Lab
Cool-accent concepts in the Lab
05The Lab, decoded
Every concept, three colours.
Read straight from the Lab's own registry. Each card shows the palette at 60 / 30 / 10, the measured hue gap and contrast, and why it was picked. Tap one to open the demo.
06Generator
Make yours.
The studio's rule as a machine: a light ground, a deep ink and one accent, spaced evenly in OKLCH so the lightness steps feel right. Lock what you like, regenerate the rest, tap a hex to copy it.
Your brand, in three colours.
A preview of the palette at work: the ground carries the page, the ink does the reading, the accent asks for the click.
Start a project