← Articles

Automating color theory

The colors on this site change when you refresh it. That sounds like a small thing, but two random hex values aren't much of a theme. They need to work as text and background, survive being swapped, and still look like a pair I'd want to use.

I've put the generator in a palette tool under Extras. It takes the quick, space-to-generate idea from Coolors and adds controls for the rules I use here.

Give the randomness some direction

The generator starts with weighted choices. It picks a relationship between hues, from nearby colors to roughly opposite ones, then a family of saturation and lightness ranges. Some produce colorful ink on pale paper, some put a bright color against a nearly black background, and others lean toward pastels or grayscale. They don't all have the same chance of appearing.

Once it has a dark anchor, it works out a reachable contrast target and solves for the lighter color's lightness. That's a binary search against relative luminance, followed by a check of the actual RGB pair. HSL lightness alone doesn't tell you whether two colors will be readable together.

Leave room for the text

The site's minimum is 5.5:1. That's a little breathing room above the WCAG AA requirement of 4.5:1 for ordinary text. It isn't a different accessibility standard; it's a choice for this site's palette generator.

Muted text complicates things. Turning the opacity down changes the color you actually see, so a good pair can still produce a faint date or caption. I solve for the lowest opacity that keeps the composited text at 4.5:1, in both directions. Day and night mode swap the two base colors, but each direction needs its own opacity floor.

I also compare a new pair with the previous one. A reroll should look different. The generator checks color distance and hue changes, retries close matches, and keeps a fallback so it can't search forever. It nudges variety rather than promising every result is unique.

Try breaking the rules

The tool starts with ink and paper, and lets you add more colors, lock the ones you like, and generate again. You can change the rules, inspect contrast between pairs, preview text, and copy the CSS. Turning a check off makes it easier to see what that check was doing.

A passing contrast number doesn't finish the design. Type size, focus states, motion, and using something other than color to communicate meaning still matter. I wanted to automate the repetitive color checks while keeping the part where I look at the page and decide whether I actually like it.

Find content