Analogous colors
Analogous colors are three or more colors that sit next to each other on the color wheel, usually within about 30 degrees of each other: yellow, yellow-orange and orange, for example. Below: how analogous schemes work, examples for eight hues with hex codes, and how to use them.
What are analogous colors?
Analogous colors are three or more colors that sit next to each other on the color wheel, usually within about 30 degrees of each other: yellow, yellow-orange and orange, for example. They share a hue family, so an analogous scheme looks calm, natural and harmonious.
Because neighboring hues share most of their light, analogous colors never clash. You see analogous schemes everywhere in nature, from autumn leaves (red, orange, yellow) to the sea (green, teal, blue).
Which color wheel?
On the RYB wheel, analogous groups follow the painter’s order (red, red-orange, orange). On a digital or OKLCH wheel the neighbors are slightly different, especially around green and blue, but the idea is the same.
Analogous colors examples
| Base | Hex codes | Palette |
|---|---|---|
| Red | #F40084, #FF0000, #C86E00 | Open in generator |
| Orange | #FF9F7C, #FFA500, #D3BD00 | Open in generator |
| Yellow | #FFF3DF, #FFFF00, #E0FFD9 | Open in generator |
| Green | #6A6F00, #008000, #007B63 | Open in generator |
| Teal | #308062, #008080, #207A98 | Open in generator |
| Blue | #005D82, #0000FF, #6600CE | Open in generator |
| Purple | #5E21A6, #800080, #8E004C | Open in generator |
| Pink | #F4C2E5, #FFC0CB, #FFC4B2 | Open in generator |
How to use analogous colors
- Pick one dominant color, a second to support it and a third as an accent (the 60-30-10 rule).
- Vary lightness so the scheme does not look flat: one light, one mid, one deep.
- Add a neutral, or a small complementary accent, when you need a strong call to action.
- Keep all three either warm or cool for the most harmonious result.
In interface design, a analogous palette usually becomes a set of roles rather than equal colors: one color for primary actions, one for supporting surfaces or illustrations, and neutrals for text and backgrounds. Generate a full tint and shade scale for each hue so you have light backgrounds, borders and accessible text in the same family.
Every palette here opens in the palette generator, where you can lock colors, adjust them in OKLCH and check contrast before exporting to CSS, Tailwind or Figma.
Other color harmonies
- Complementary colorsComplementary colors sit directly opposite each other on the color wheel, 180 degrees apart.
- Triadic colorsA triadic color scheme uses three colors evenly spaced around the color wheel, 120 degrees apart, forming a triangle.
- Split-complementary colorsA split-complementary scheme uses a base color plus the two colors on either side of its complement, about 150 and 210 degrees away.
- Monochromatic colorsA monochromatic color scheme uses a single hue in several lightness and saturation levels: tints (with white), shades (with black) and tones (with gray).
Frequently asked questions
What is an example of analogous colors?
Blue, blue-green and green; or red, red-orange and orange. Each set sits side by side on the color wheel.
How many colors are in an analogous scheme?
Usually three, sometimes up to five neighboring hues.
What is the difference between analogous and monochromatic?
Monochromatic uses one hue in different lightness and saturation; analogous uses several neighboring hues.
Make a analogous palette
Start from any color in the generator, choose a harmony and adjust it in OKLCH.