From one blue to night

· Techniques

This site has one accent: a silver-blue. The night palette was not made by picking a colour seven times. That one colour became the seed, and only lightness and chroma were chosen. The rest is a formula.

The formula is CSS relative color. oklch(from var(--seed) 0.9 calc(c * 0.15) h) keeps the seed’s hue (h), sets lightness (L) to 0.9, and cuts chroma (c) to 15%. That is the night ink. Ground, surface, soft ink and accent take the same shape; only the two numbers differ.1

This demo shows how the night ink changes when lightness and chroma move away from the seed. Where the browser supports it, two sliders appear here, with the resulting colour and its contrast ratio. If the browser does not know relative color, only this paragraph remains.

The canonical values are those two numbers, not a hex code. The hex is the formula’s result computed ahead of time, kept for browsers without relative color. A test recomputes the same formula and checks that the two agree within ±1 per channel.

Contrast is measured in the same place. Night ink on ground, soft ink on surface: if either pair drops below 4.5:1, the tests fail and the change does not go in. Once choosing a colour means choosing two numbers, keeping it is a job for numbers too.2

주석 · Notes

  1. The silver-blue itself is written once, as --seed. The night accent is that seed with its lightness raised and its chroma lowered a little, so var(--accent) in the seed’s place would point at itself. ↩

  2. Raising lightness while keeping chroma puts some combinations outside sRGB. The browser presses such values to the nearest colour, which makes the ±1 comparison meaningless, so the gate rejects them first. ↩