Contrast & Harmony
Click anywhere on the wheel — the opposite point is your complementary color, neighbors are analogous.
Color Theory 101
The three properties
- Hue
- — the color itself: red, teal, violet, and so on. It's the position on the color wheel.
- Saturation
- — how intense or muted a color is. High saturation looks vivid; low saturation looks grayish.
- Lightness / Value
- — how close a color sits to black or white.
Tint, tone, shade
Add white to a hue and you get a tint. Add gray and you get a tone. Add black and you get a shade. Most usable palettes lean on tones — pure hues read as loud or plastic.
Common schemes
- Complementary
- — two hues opposite each other on the wheel. High contrast, great for a focal accent.
- Analogous
- — three hues sitting side by side. Calm, cohesive, low tension.
- Triadic
- — three hues spaced evenly (120° apart). Balanced and vibrant.
- Split-complementary
- — a base hue plus the two neighbors of its complement. Contrast with less tension.
- Monochromatic
- — one hue carried across several tints, tones, and shades. Safest route to cohesion.
Building a palette that works
A useful starting ratio is roughly 60% dominant color, 30% secondary, 10% accent. Keep saturation restrained across most of a layout and spend your most saturated color on the smallest area — it reads as intentional rather than overwhelming. Always check contrast between text and background for legibility, not just visual taste.
Enter Any Format
Pantone matches are approximate, unofficial nearest matches — not licensed values.
Eyedropper
RGB —
HSL —
Cool → Warm Spectrum
Color Picker
Move across the box for a closer look at any shade — the swatch updates live as you go.
Palette Suggester
Contrast Checker
WCAG 2.1 thresholds: AA needs 4.5:1 (3:1 large text), AAA needs 7:1 (4.5:1 large text).
Gradient Generator
background: linear-gradient(90deg, #E4572E, #1B8A80);