Super Boring Tools

Search tools

Find a tool by name or what it does.

Analogous Color Generator

Turn any base color into a three swatch analogous palette by rotating its hue.

HEX, RGB, or HSL, or pick a color. Everything runs in your browser. Nothing is uploaded.

Palette
-30°
#0ee9bf
hsl(169, 89%, 48%)
Base
#0ea5e9
hsl(199, 89%, 48%)
+30°
#0e38e9
hsl(229, 89%, 48%)
CSS variables
:root {
  --analogous-1: #0ee9bf;
  --analogous-base: #0ea5e9;
  --analogous-2: #0e38e9;
}

How to generate analogous colors online

  1. Enter a base color

    Type a HEX, RGB, or HSL value, or use the picker to choose a starting color.

  2. Adjust the hue angle

    Drag the angle slider between 5 and 90 degrees to spread the neighbouring hues wider or tighter.

  3. Review the palette

    The three swatches update live with hex, and HSL values for the base color and its two neighbours.

  4. Copy the result

    Copy any single hex code from its swatch, or copy the whole palette as a ready to paste CSS variables block.

Why use this tool

Adjustable hue angle

The classic scheme uses 30 degree steps, but the slider lets you pick anything from a subtle 5 degrees to a bold 90.

Accepts HEX, RGB, and HSL

Paste #0ea5e9, rgb(14, 165, 233), or hsl(199, 89%, 48%) and the palette updates instantly, with a visual picker as a fallback.

CSS variables output

The palette is formatted as a :root block with three custom properties, ready to paste into a stylesheet.

Correct hue wraparound

Rotations past 360 degrees or below 0 wrap correctly, so a red base near the top of the wheel still produces valid neighbours.

Runs entirely in your browser

Colors are computed on your device. Nothing is uploaded and no account is needed.

About this tool

Analogous colors sit next to each other on the color wheel. Because their hues are close, they blend naturally and produce calm, cohesive palettes, which is why the scheme shows up so often in landing pages, dashboards, and brand systems. This tool takes one base color and builds the scheme for you: it converts the color to hue, saturation, and lightness, rotates the hue by a chosen angle in both directions, and returns the two neighbours alongside the original.

The angle slider is the main control. The textbook analogous scheme uses 30 degrees, which is the default here, but tighter angles around 10 to 15 degrees give near monochrome gradients while wider angles up to 90 degrees drift toward a split scheme. Saturation and lightness are preserved from the base color, so all three swatches keep the same intensity and only the hue shifts. Each swatch shows its hex and HSL values with a one click copy, and the whole palette is also available as a CSS variables block for direct use in a stylesheet.

Inputs can be 3 or 6 digit hex with or without the hash, rgb() with numbers or percentages, or hsl() with comma or space separators. Greyscale colors have no hue to rotate, so they return three identical swatches with a note explaining why. For other harmony rules, try the complementary color calculator, the triadic color generator, or explore hues interactively on the color wheel.

Frequently asked questions

What are analogous colors?
Analogous colors are hues that sit next to each other on the color wheel, typically within about 30 degrees of one another. Because they are neighbours, they combine into smooth, low contrast palettes that feel harmonious rather than loud.
How does this tool calculate the palette?
It converts your base color to hue, saturation, and lightness, then rotates only the hue by the chosen angle in both directions. Saturation and lightness stay fixed, so the two neighbours match the intensity of the original color.
Which input formats are supported?
You can enter 3 or 6 digit hex values with or without the leading hash, rgb() values with numbers or percentages, or hsl() values. Comma and space separated syntax both work, and there is a visual picker if you prefer to click.
What happens with grey or black base colors?
Greyscale colors have zero saturation, which means they have no meaningful hue to rotate. The tool still renders the palette, but all three swatches are identical and a note explains why.
Is my color data uploaded anywhere?
No. Everything runs in your browser; nothing is sent to a server and no signup is required.
Can I use a different angle than 30 degrees?
Yes. The slider accepts any angle from 5 to 90 degrees. Smaller angles produce subtle, near monochrome palettes, while larger angles create bolder spreads that approach a split complementary scheme.

Related tools