Aqeeb Studio

Palettes & Harmony

Analogous Color Generator

Enter a color to get its analogous neighbors, the colors that sit next to it on the wheel. With the default 30° angle, royal blue #4169E1 gives #41B9E1 and #6941E1.

Open in the palette generator

Your colors and images stay in your browser. Nothing is uploaded or stored on our servers.

How to use the Analogous Color Generator

  1. Pick a base color with the color square or type a HEX, rgb() or hsl() value.
  2. Use the angle slider to choose how far the neighbors sit from the base, from 10° to 60°.
  3. Read the three swatches: one neighbor on each side and your base color in the middle.
  4. Copy a HEX code, or export the colors as CSS, JSON or CSS variables.

Examples

The default 30° angle

From 225° the neighbors are 195° and 255°, which are #41B9E1 (a sky blue) and #6941E1 (a violet-blue).

A wider 45° angle

At 45° the neighbors become #41E1E1 (cyan) and #9141E1 (violet), a more varied but still harmonious set.

When to use it

Analogous colors suit calm backgrounds, illustrations and gradients, because neighboring hues blend smoothly.

Tips

  • Pick one neighbor to lead and use the others sparingly.
  • Analogous palettes are a good starting point for gradients: try the gradient generator with two neighbors.

Questions about the Analogous Color Generator

What are analogous colors?

They are colors that sit next to each other on the color wheel, such as blue, blue-violet and violet. They share undertones, so they look harmonious together.

Which angle should I choose?

Around 30° gives subtle variety. Larger angles, up to 60°, give more contrast between the colors. Try a few and compare.

How do I add contrast to an analogous palette?

Vary the lightness: pair a dark neighbor with a light one, or add white or near-black. Analogous colors can otherwise look flat.

Can I make a longer analogous palette?

Use the palette generator with the analogous type to get from three to eight colors.

Monochromatic Palette Generator

Create a palette from one hue by varying its lightness.

Complementary Color Generator

Find the color opposite any color on the color wheel.

Color Palette Generator

Generate harmonious palettes and export them as CSS, JSON, SVG or PNG.

Color Picker

Pick any color and copy its HEX, RGB, HSL and CMYK values.