Start with instinct — a brand color, a feeling, a hue from your moodboard. This becomes the foundation everything else is derived from. Then desaturate it into the 25–50% range, where presence doesn't become demand.
No saturation
#636363
Your first color
S 32%
#3E796D
Full saturation
#107A62
Below 25% — the hue loses identity
At low saturation, your color stops reading as itself and becomes a warm or cool gray. It can no longer hold meaning or produce the grounding presence you need from a first color.
Above 50% — the color makes a demand
Highly saturated hues activate alertness — they register the way vivid colors do in nature: ripe fruit, warning signals, biological urgency. The nervous system notices them before the conscious mind does. In trauma-informed contexts, color shouldn't add to that load.
25–50% — the grounding zone
Color is present and identifiable without competing for attention. It holds without grasping. This is also the saturation range of most restorative natural environments — forest canopy, shallow water, stone, clay, earth. We are calibrated to find it safe.
Your teal at 32% sits right in the sweet zone — present, readable, and calm.
The palette is built from a fixed template fitted to the hand-built palettes. Lightness runs 95, 88, 73, accent, action, 18, and the background, fills and text hold fixed saturations of 8, 12, 26 and 10. Only three things move: where the companion hue sits, how saturated the accent is, and how light it is. Roles are then assigned by measurement.
Accent (your first color)
H 168°
#3E796D
Second hue
H 21°
#7A5030
Your palettes cluster at 42–80°, 114–130° and 139–180°. Nothing sits under 35°.
The action takes 1.4× this automatically. Backgrounds, fills and text hold fixed saturations of 8, 12, 26 and 10 — those never move.
Accent L 36% → action L 16%
A warm gold leaning toward terracotta. Each color makes the other feel more like itself — the teal gets cooler, the gold gets warmer.
A third hue widens the range you can express, but an accent and its action are already a complete system — and a smaller palette is easier to keep predictable. Choose whichever fits the work.
Where the third hue comes from
Widest gap takes the midpoint of the larger arc between your accent and action — the emptiest space left on the wheel, so it can't crowd either. The complement sits directly opposite your action, which gives more tension but often lands close to your accent. Then nudge within ±20°.
Your three hues together
Accent
Action
Third color
Everything on this step comes out of the hues you already have. Neutrals take their tint from whichever of your two colors is quieter — across every hand-built palette, the loud one never tints the page. Fills carry the same two hues up into the tint range for callouts and badges. The action color you set in step 2 is checked here against the background it will actually sit on, and nudged darker only if its label can't stay legible.
5–8% is the sweet zone. Above 10% neutrals start to read as colored.
Fills sit above the neutrals — visible as color, still quiet enough to read text on.
Every color gets one job and only that job. When color is predictable, it stops being a source of uncertainty. The first color is the accent — links, underlines, decorative marks. The action color fills buttons and always sits darker. A third color, if you derived one, carries the quieter secondary tier.
Your page palette
Roles are assigned by measurement, not by decree: lightest becomes the background, darkest becomes the text, and the middle color with the most contrast against the background becomes the action. Swatches are shown in your site's paste order.
Option A · first color as the accent
Option B · third color as the accent
Option C · your three colors exactly
No adjustment — the three you picked, plus a background, a light fill and a text tone, because six slots need six.
CSS custom properties
WCAG AA requires 4.5:1 for normal text, 3:1 for large text. But accessibility compliance alone isn't the goal — contrast that's too high (above ~12:1) can feel harsh in trauma-informed contexts. The sweet zone is AA-compliant without being stark.
Run the check to see results.
Your complete system — CSS custom properties, JSON design tokens, and a shareable URL anyone can open to see your exact palette. Sessions save locally in your browser, no account needed.
Sessions
Shareable link
Encodes your full palette state in the URL. No server, no login — just copy and share.
