Harmonies set the hues
Color harmonies are relationships on the color wheel, and each produces a different mood:
| Harmony | Relationship | Feel |
|---|---|---|
| Complementary | Opposite (e.g. blue/orange) | High contrast, energetic |
| Analogous | Adjacent (~30° apart) | Calm, cohesive |
| Triadic | Three evenly spaced | Vibrant, balanced |
| Split-complementary | Base + two near its opposite | Contrast, less tension |
These are the starting point — they choose which colors go together. But a harmony alone isn’t a UI palette; it’s the seed for the tint/shade scales described above.
Build the neutral ramp first
The most overlooked part of a palette is the grays. Text, borders, dividers, disabled states, and backgrounds are nearly all neutral, so a good gray scale (from near-white to near-black, often slightly tinted toward your brand hue for warmth) carries most of the interface. Get the neutrals right and the few accent colors land cleanly on top.
Watch contrast as you go
Two palette pitfalls are really accessibility pitfalls. Complementary pairs can be striking but often share similar luminance — pure red (#FF0000) and pure green (#00FF00) are complements yet only hit ~1.4:1 contrast, failing as text/background. Analogous palettes drift into sameness if the hues are too close (keep ~30° apart) and the lightness values don’t vary. The fix for both is deliberate lightness separation — pair a light value against a dark one and verify with a contrast checker before committing.
Screen vs print
If a palette is bound for print, remember sRGB (screen) has a wider gamut than CMYK (ink). Neon and highly saturated colors that glow on screen turn dull in print because they fall outside the CMYK range. For print-bound palettes, keep saturation moderate (roughly S < 85% in HSL). Each color here is shown in HEX, RGB, and HSL so you can copy whichever your tool or stylesheet needs.