How to Choose a Color Palette
Choosing colors feels like it should be pure taste, but most pleasing palettes follow a handful of rules from color theory. Learn the relationships on the color wheel and you can build a coherent scheme from a single starting color in minutes — no design degree required.
Start with the color wheel
Every scheme below is defined by where colors sit on the wheel relative to each other. The wheel is measured in degrees of hue, 0 to 360. Once you think in angles, the schemes are just simple rotations from your base color.
Complementary: maximum contrast
Complementary colors sit directly opposite (180° apart) — blue and orange, red and green, purple and yellow. The pairing is high-energy and grabs attention, which makes it ideal for a call-to-action button against a calmer background.
The warning: complementary colors vibrate when placed in equal amounts or as text on background. Use one as the dominant color and the other sparingly as an accent, and you get punch without eye strain.
Analogous: calm and cohesive
Analogous colors are neighbors on the wheel (about 30° apart) — blue, blue-green and green. Because they share undertones, they feel harmonious and relaxed. This is the safest scheme and a great default for backgrounds, sections and gradients where you want smooth, natural transitions.
Triadic: balanced and colorful
A triadic scheme uses three colors evenly spaced (120° apart). It is more vivid than analogous but more balanced than complementary. The classic approach is one dominant color with the other two as accents — think of a playful brand that still looks intentional rather than chaotic.
Tints and shades: the scale you actually build UI with
A real interface needs more than three or four hues — it needs many versions of each. That is where tints (your color mixed toward white) and shades (mixed toward black) come in. From one base color you get:
- Light tints for backgrounds and hover states
- The mid-tone for buttons and links
- Dark shades for text and borders on light backgrounds
This is why good palettes are usually a small number of hues, each with a scale of 5–9 steps in lightness.
The 60-30-10 rule
A time-tested rule for proportion, borrowed from interior design:
- 60% — a dominant, usually neutral or muted color (backgrounds, large areas).
- 30% — a secondary color that supports the dominant one.
- 10% — an accent for the things that must stand out (buttons, links, highlights).
Map this onto the schemes: pick your dominant from a soft tint, your secondary from an analogous neighbor, and your 10% accent from a complementary color. That single recipe produces a surprising number of professional palettes.
Don't forget accessibility
A beautiful palette that no one can read is a failure. Text needs enough contrast against its background — the WCAG guideline is a contrast ratio of at least 4.5:1 for normal body text (3:1 for large text). In practice:
- Put dark shades of your color on light tints, and vice versa.
- Never rely on color alone to convey meaning — add icons, labels or underlines.
- Test error/success colors for people with color-vision deficiency; red and green can look identical.
A simple workflow
- Pick one base color that fits the mood (calm blue, energetic orange, trustworthy navy).
- Generate its tints and shades for your UI scale.
- Add an analogous neighbor as a secondary color.
- Choose the complementary color as your accent — used sparingly.
- Check contrast on every text/background pairing.
Build your palette
The free Color Palette Generator does steps 2–4 for you: enter a base color and instantly get tints, shades, and matching complementary, analogous and triadic schemes, each with copyable HEX codes. To fine-tune a specific color or convert between HEX, RGB and HSL, use the Color Converter — and when you are ready to blend two of your colors, the CSS Gradient Generator takes it from there.