Analogous Colors
Analogous colors are neighbours on the color wheel, usually within 30° of each other either side of a base hue. They share an undertone, so the result feels calm and natural, the way a sunset moves from red through orange to yellow.
Drag the large handle. The angle between handles is the rule: ±30°.
Analogous Colors generator
| Color | HEX | RGB | HSL |
|---|---|---|---|
| #2FC7DE | rgb(47, 199, 222) | hsl(188 73% 53%) | |
| #2F6FDE | rgb(47, 111, 222) | hsl(218 73% 53%) | |
| #462FDE | rgb(70, 47, 222) | hsl(248 73% 53%) |
How to find analogous colors
Keep your base hue and add two hues about 30° clockwise and 30° anticlockwise. A narrower spread (15–20°) looks almost monochromatic; a wider spread (45°+) starts to feel lively.
When to use it
- Backgrounds, illustrations and photography-led sites that should feel cohesive.
- Nature, wellness and food brands.
- Sequential data where colors need to feel related.
Watch out for
Analogous palettes have little built-in contrast. Add a neutral or a complementary accent for buttons, and vary lightness so text stays readable. Hue relationships say nothing about readability, so run your text colors through the WCAG contrast checker.
Example palette
Frequently asked questions
What are examples of analogous colors?
Blue, blue-green and green; red, red-orange and orange; yellow, yellow-green and green. In hex, #3B82F6 with #3BDDF6 and #573BF6 is a blue analogous trio at ±30°.
How many colors are in an analogous scheme?
Usually three, sometimes five. Beyond five the outer hues drift too far apart to still feel related.
What is the difference between analogous and monochromatic?
Monochromatic uses one hue at different lightness and saturation; analogous uses several neighbouring hues.