Skip to content

Analogous Color Scheme

DesignColor Palettes and Schemes
Colours in the scheme
Analogous palette —
Base hue (°)
—
Saturation (%)
—
Lightness (%)
—
Total hue span (°)
—

An analogous colour scheme uses hues that sit next to each other on the colour wheel. Starting from red #FF0000 with 30° steps, the three-colour scheme is rose #FF0080, red #FF0000 and orange #FF8000. Saturation and lightness stay the same as the base, so the palette reads as one family.

About this tool

Analogous palettes are the quiet option: a few neighbouring hues that blend rather than clash, common in landscape-inspired branding, dashboards and illustration backgrounds. This page takes one hex colour, a hue step and a choice of three or five colours. It converts the colour to HSL, rotates only the hue in equal steps either side of it, and lists every colour with its hue angle, hex and RGB value, ready for CSS or a design file. Rotation follows the RGB/HSL wheel that browsers use, not the painter's red-yellow-blue wheel, so the neighbours of red are rose and orange. Lightness is held constant, yet perceived brightness still varies between hues: yellow looks lighter than blue at the same HSL lightness.

How to use it

  1. Enter the base colour

    Type a six-digit hex such as #2A9D8F or a three-digit short form; the # is optional.

  2. Set the hue step

    Move the slider between 10° for a subtle, near-monochrome set and 60° for a wider spread.

  3. Pick three or five colours

    Five colours add a second step on each side of the base.

  4. Copy the values

    Take the hex list from the result line or the hex and RGB values from the table.

Examples

Pure red, 30° steps

Base colour (hex)
#FF0000
Hue step
30
Colours in the scheme
3 colours

Result Analogous palette: #FF0080 #FF0000 #FF8000
Base hue (°): 0
Saturation (%): 100
Lightness (%): 50
Total hue span (°): 60

  1. Base #FF0000 in HSL: hue 0°, saturation 100%, lightness 50%.
  2. Hues = base ± 30° steps (mod 360), 3 colours spanning 60°.
  3. Each hue is converted back to RGB with the same saturation and lightness.

Red sits at 0°, so its neighbours are rose at 330° and orange at 30°, both at full saturation and 50% lightness.

Blue, five colours

Base colour (hex)
00f
Hue step
30
Colours in the scheme
5 colours

Result Analogous palette: #00FFFF #0080FF #0000FF #8000FF #FF00FF
Base hue (°): 240
Saturation (%): 100
Lightness (%): 50
Total hue span (°): 120

  1. Base #0000FF in HSL: hue 240°, saturation 100%, lightness 50%.
  2. Hues = base ± 30° steps (mod 360), 5 colours spanning 120°.
  3. Each hue is converted back to RGB with the same saturation and lightness.

The short code 00f expands to #0000FF; two 30° steps each way run from cyan through blue to magenta.

How it is calculated

H_k = (H + k × d) mod 360, for k = −2…2 (or −1…1); S and L unchanged

H
hue of the base colour in degrees, from the RGB to HSL conversion
d
the hue step chosen on the slider, 10° to 60°
k
position of each colour relative to the base
S, L
saturation and lightness of the base, copied to every colour

The hex code is read as red, green and blue, converted to hue, saturation and lightness with the formulas in the W3C CSS Color Module Level 4, and the hue is rotated in equal steps. Each rotated hue is converted back to RGB and rounded to whole channel values from 0 to 255, then written as hex. The base colour is returned exactly as entered.

When not to use it

  • If you need strong contrast between a background and its text, an analogous set alone rarely meets WCAG contrast ratios.
  • For print work matched to the painter's red-yellow-blue wheel, the neighbours will differ from these RGB-wheel results.

Common mistakes

  • Using all five colours at equal weight instead of letting one dominate and the others support it.
  • Choosing a step above 45° with five colours, which spans 180° or more and stops reading as analogous.
  • Starting from a grey, which has no hue to rotate.

Frequently asked questions

How far apart are analogous colours usually?

Most guides place them 30° apart on a 12-segment wheel, so three colours cover about 60°. Steps of 15° to 20° give a tighter, almost monochrome look, while 45° or more starts to feel like a broader multi-hue palette.

Why are red's neighbours rose and orange rather than violet and orange?

This tool uses the RGB/HSL wheel used in CSS and screens, where 330° is a pink-red rose. On the painter's red-yellow-blue wheel the spacing is different, so the neighbour on the cool side shifts toward violet.

Do the colours keep the same brightness?

They keep the same HSL lightness, which is not the same as perceived brightness. Yellow and cyan look lighter to the eye than blue at equal HSL lightness, so you may want to adjust individual colours afterwards.

What happens with black, white or grey?

These have zero saturation and no defined hue, so rotating the hue changes nothing and every colour in the scheme matches the base. A warning appears in that case.

Can I enter a three-digit hex code?

Yes. A short code such as 36C is expanded to #3366CC before conversion, the same way browsers read it. Letters can be upper or lower case and the leading # is optional.

How should an analogous palette be used in a layout?

A common split is about 60% of the area in one dominant colour, 30% in a neighbour and 10% in the third as an accent. Pair the set with a neutral for text so contrast stays readable.

Cite this tool

Using this tool in an assignment, article or report? Copy a citation, or a link for your website.

APA

Tools Directory Editorial Team. (2026, October 17). Analogous Color Scheme. Tools Directory. Retrieved October 26, 2026, from https://tools.milunir.com/design/color-palettes-and-schemes/analogous-color-scheme/

MLA

Tools Directory Editorial Team. “Analogous Color Scheme.” Tools Directory, 17 Oct. 2026, https://tools.milunir.com/design/color-palettes-and-schemes/analogous-color-scheme/. Accessed 26 Oct. 2026.

Chicago

Tools Directory Editorial Team. “Analogous Color Scheme.” Tools Directory. Last modified October 17, 2026. Accessed October 26, 2026. https://tools.milunir.com/design/color-palettes-and-schemes/analogous-color-scheme/.

Link<a href="https://tools.milunir.com/design/color-palettes-and-schemes/analogous-color-scheme/">Analogous Color Scheme – Tools Directory</a>