The problem with almost-different
Colour difference is not continuous. Two hues can shift thirty, even forty degrees around the wheel and, in context, still register as variants of the same colour rather than as two distinct palette members. This is not a perception failure on the user's end — it is a consequence of how simultaneous contrast, surface area and surrounding neutrals shape colour appearance. A swatch board tells you nothing useful; the screen tells you what you have.
The practical consequence: designers building a two-accent palette often land at colours they think of as complementary or contrasting but that a viewer, meeting them in interface context, experiences as fraternal — related enough that neither one carries independent signal. The palette looks unified in presentation, timid in use. When an accent colour exists to mark something — a call to action, a category tag, a data series — it needs to be visibly not the other colour, instantly and without deliberation.
Thirty degrees of hue separation is approximately the distance between a sky blue and a cyan, between a warm amber and a yellow-green. In a neutral context, on a colour-picker, these feel meaningfully different. On a screen with a large off-white ground, body text in a dark neutral, and both accents appearing at small scale — a button label, a tag border, a chart line — they collapse into a single family. The viewer's eye groups them before reason intervenes.
Distance in the right dimension
The instinct when colours feel too similar is to push the hue further. But hue is only one of three relevant dimensions, and often the wrong one to reach for first. Lightness and chroma both contribute more powerfully to perceived difference at the small sizes where accents actually do their work. A colour darker by fifteen lightness points in OKLCH (a perceptually uniform colour space that became a viable CSS primitive in 2023) reads as more distinct from its companion than a colour forty degrees away in hue at the same lightness.
OKLCH — Lightness, Chroma, Hue — is useful precisely because its lightness axis is calibrated to human perception rather than to the geometry of a colour model. Moving ten units in L produces roughly the same perceived shift regardless of hue, which makes it a reliable tool for auditing palette separation. If two accents sit within fifteen L units of each other and within twenty C units, they are working very hard to be distinguishable at 14px, and they will fail at 10px. The small sizes matter here for exactly this reason: small-scale legibility is where palette difference either proves itself or dissolves.
This is why the common pairing of a teal and a blue, or a coral and a salmon, generates complaints that feel vague but are structurally specific. The hues differ; the lightness and chroma are matched because the designer balanced them to feel harmonious. Harmony and distinctness are in tension. A palette optimised for visual harmony tends toward perceived similarity; a palette optimised for functional distinction requires deliberate imbalance.
What enough separation looks like
A working rule: if you can describe the relationship between your two accents in terms of mood — one is warm, one is cool — but cannot describe the relationship in terms of role without thinking about it, the separation is aesthetic but not functional. Functional palette separation means a viewer can predict, after two encounters, which colour belongs to which purpose. That requires difference that survives context change — dark ground, light ground, small scale, saturated neighbour — and thirty hue degrees in similar lightness and chroma does not survive those conditions.
The fix is rarely to introduce a third colour. It is to commit to asymmetry: make one accent lighter and lower in chroma, the other darker and more saturated. Let them differ on two axes, not one. This produces a palette that feels less immediately harmonious on a swatch but does its structural job on a live screen, at reading size, in the presence of content that is trying equally hard to exist.
It is to commit to asymmetry: make one accent lighter and lower in chroma, the other darker and more saturated.
An accent that is only a rule at 2px fails for different reasons, but the failure is adjacent: a colour that cannot be told apart from its sibling at the sizes it actually appears is carrying no more information than a colour that never holds area at all.