how i use color theory on this website (with the exact tokens)
dev · Oct 6, 2026 · 4 min read
most "color theory" posts are a color wheel and a promise. this one is different: this site ships with a contrast checker in its own build, and the post is about the actual decisions, with the tokens in the open.
one hue, doing all the work
the whole accent system of this site is a single oklch hue (green, hue 150). from that one hue i derive:
- the primary (buttons, links, active states) — a mid-lightness green that keeps 4.5:1 against white text
- the primary container (soft highlights, badges) — same hue, much lighter, carrying dark text
- every hover, focus and selection state — same hue again, different lightness or chroma
the discipline is the point: one hue cannot clash with itself. sites that feel "designed" usually use fewer colors than you think — they just use each one with more intent. the moment a second accent hue enters, every pairing has to be re-checked by hand, and it never is.
neutrals are colors too
the background, surfaces and text of this site are not gray — they are the same green hue with almost no chroma. this is the oldest trick in editorial print design: tint your neutrals with your accent and every surface quietly agrees with every other surface. pure gray next to a colored accent reads as lifeless, though almost nobody can say why.
the 60/30/10 rule, applied honestly
you know the rule: 60% dominant, 30% secondary, 10% accent. what nobody says is that the ratio is about visual attention, not pixel area. my actual split: surfaces own the pixels, type owns the weight, and the green is rationed to the things i want clicked. when everything is accented, nothing is — the green appearing is itself information ("this is interactive").
the build fails if the colors are wrong
here is the part i have never seen another site do: the build runs a contrast checker over 50 token cases — every label, badge and dimmed text in both themes, with opacity composited exactly like the browser does — and fails if any pair falls under WCAG AA (4.5:1 body, 3:1 large).
this matters because opacity is where color theory dies in practice: opacity-60 on dark text over a light surface does not "make it subtle", it makes it illegible for millions of readers, and no design review catches all of it. a gate does. mine ran 50 cases this morning before this post shipped.
what to steal
- pick one accent hue and derive everything from it (Material 3 calls this tonal palettes)
- tint your neutrals with that hue instead of using gray
- spend accent only on the interactive
- put contrast in CI, not in a pdf: a failing build is the only color theory that survives deadlines