analogous palette for SaaS
SaaS interfaces live on low-urgency states, badges, tags, surfaces and cards, and a complementary color would grab too much attention there; the fix is an analogous palette, neighboring hues on the same side of the circle, close enough to read as the same color family.
The middle color (#3E8CDA) is the base hue with no offset; the other four sit 15 or 30 degrees from it, two on each side.
None of these states is an error or a warning, so no color here should compete with the red or yellow reserved for those messages.
The 15-degree gap between resting and hover state is noticeable up close but does not distract from scanning a list of cards.
Hue is the angular position of a color in the circle, usually from 0 to 359 degrees in HSL. It is what makes a color "red", "blue" and so on, regardless of saturation and lightness.
Sixty degrees total, from -30 to +30 around the base hue, with five fixed points spaced 15 degrees apart. This window is the classic color-theory consensus for "analogous": wide enough to vary, narrow enough to still read as one family.
Neither: an error calls for a semantically fixed color (usually red), outside the brand's harmony system, so it is never confused with a calm, low-urgency state. The analogous palette is for the dozens of neutral badges that should not compete for attention.
To keep visual weight equal across every tone: only hue varies (-30 to +30 degrees), so no badge ends up looking more saturated or lighter than its neighbor by accident. If you need hierarchy between states, change to a different hue on the wheel, not the saturation inside the same analogous family.
No, and that is the most common trap in badge design: five hues close together tend to share similar lightness, so the same white or black text can pass the WCAG test (4.5:1 for normal text) on one color and fail on its 15-degree neighbor. Check each text/background pair individually.
#3EDA49#3EDA70#3EDA97#3EDABE#3ED0DA#3EDA49, #3EDA70, #3EDA97, #3EDABE, #3ED0DAThe palette is calculated locally in the browser.