Why do all three colors have the same lightness?

Holding perceptual lightness and chroma constant is what makes the set read as one family. Vary lightness afterwards with the shade and tint generator if you need a range.

Can I use these three colors for text, background and buttons?

Not directly. Neighbouring hues at equal lightness do not produce enough contrast for text. Add a dark or light neutral for text and check the pairs.

Does the base color stay exactly as I entered it?

Yes. It is returned unchanged as the middle swatch, including when it is black, white or gray.

Analogous Color Generator

Base color

Hue spread (degrees)

3 colors

Base color

#167d8d

-30 degrees

#1e8073

+30 degrees

#3a769f

Export palette

Palette output

:root {
    --color-1: #167d8d;
    --color-2: #1e8073;
    --color-3: #3a769f;
}

Colors that sit next to each other

An analogous scheme takes hues adjacent on the color circle — your base plus one on either side. Because the three hues are close together, the set reads as calm and cohesive rather than as contrast, which suits backgrounds, illustrations and gradients.

Your base color is returned exactly as entered and sits between the two derived hues. Perceptual lightness and chroma are held constant across all three, so the group looks like one family rather than three unrelated picks.

Choosing the spread

The spread controls how far each neighbour sits from the base, from 15 to 60 degrees. A narrow spread of 15 to 20 degrees produces a subtle set that reads almost as one color in different moods. Around 30 degrees the three become clearly distinguishable while still related.

Past about 45 degrees the outer colors start to feel like separate hues rather than neighbours, which may be what you want for an illustration but works against the cohesive effect the scheme is usually chosen for.

Where an analogous set needs help

Because all three hues are close, none of them contrasts strongly with the others. An analogous palette usually needs a separate accent for calls to action, and a genuinely dark or light neutral for text.

Adjacent hues at similar lightness rarely reach a usable text contrast ratio against each other. Treat these as surface and decoration colors and check any text pairing separately.

Frequently asked questions

Thirty degrees is a reasonable default: the three colors stay clearly related while remaining distinguishable. Narrow to 15 to 20 degrees for a subtler set, or widen towards 60 for more separation.