Generate beautiful analogous color palettes from any base hue
Base Color
Quick Presets
Settings
Covering 190° to 250° around hue 220° (Blue).
Analogous Palette
Cyan
−30°
190° 70% 50%
Blue
−15°
205° 70% 50%
Blue
Base
220° 70% 50%
Blue
+15°
235° 70% 50%
Blue
+30°
250° 70% 50%
Hue Wheel Position
White arc = selected analogous range (±30°). Dots = generated colors.
Color Values
| Swatch | Name | HEX | HSL | RGB |
|---|---|---|---|---|
| Cyan | #26BBD9 | hsl(190, 70%, 50%) | rgb(38, 187, 217) | |
| Blue | #268ED9 | hsl(205, 70%, 50%) | rgb(38, 142, 217) | |
| BlueBase | #2662D9 | hsl(220, 70%, 50%) | rgb(38, 98, 217) | |
| Blue | #2635D9 | hsl(235, 70%, 50%) | rgb(38, 53, 217) | |
| Blue | #4426D9 | hsl(250, 70%, 50%) | rgb(68, 38, 217) |
CSS Variables
:root { --analogous-1: #26BBD9; /* −30° */ --analogous-2: #268ED9; /* −15° */ --analogous-3: #2662D9; /* Base */ --analogous-4: #2635D9; /* +15° */ --analogous-5: #4426D9; /* +30° */ }
SCSS Map
$analogous-palette: ( "color-1": #26BBD9, "color-2": #268ED9, "color-3": #2662D9, "color-4": #2635D9, "color-5": #4426D9, );
About Analogous Colors
Analogous colors are groups of hues that sit adjacent to each other on the color wheel — typically within 30°–60° of a base hue. Because they share similar wavelengths, they feel naturally harmonious and are found everywhere in nature (autumn leaves, ocean sunsets, forest canopies). In design, analogous palettes create a calm, cohesive mood without the tension of complementary contrast.
Tips: Use the base color as your dominant tone. Add accent variety through lightness or saturation shifts, not hue jumps. For UI work, tight spreads (±15°–30°) keep branding consistent; wider spreads (±45°–60°) suit illustration and data visualization.
An analogous colors generator creates harmonious color palettes by selecting hues that sit adjacent to each other on the color wheel. These naturally pleasing combinations are used by designers to build cohesive UI themes, illustrations, and brand identities. Adjust your base hue, control the spread angle, and choose how many colors you need — then export HEX, HSL, RGB, CSS variables, or SCSS maps in one click.
Analogous colors are hues that sit next to each other on the color wheel — typically within 30° to 60° of a base hue. Because they share similar wavelengths, they feel naturally harmonious and calm, making them a popular choice in nature-inspired design, branding, and UI.
Three to five colors is the most common range. Three gives a clean, minimal palette; five adds more variety for complex layouts. Using more than seven colors risks visual clutter unless you're building a data visualization or illustration color system.
±15°–30° gives a tight, near-monochromatic feel ideal for branding and UI components. ±45°–60° creates broader variety — closer to a split-complementary scheme — and works well for illustrations, data charts, and editorial design.
A monochromatic palette uses a single hue at varying lightness and saturation levels. An analogous palette shifts the hue itself slightly in both directions, creating more visual warmth and coolness contrast while still feeling cohesive.