Analogous Colors Calculator
Find the two analogous colors adjacent to your hex color on the HSL color wheel.
How to use this tool
- Enter your base hex color.
- Set the angle step (default 30°) to control how far apart the colors are.
- The two analogous colors flank your base color on the wheel.
Analogous colors sit next to each other on the color wheel. They create calm, harmonious palettes often seen in nature.
Formula
Given a base color with HSL hue H, saturation S, and lightness L, the two analogous colors are:
Left analog = HSL(H − angle, S, L)
Right analog = HSL(H + angle, S, L)
The hue is wrapped to the range 0°–360° before converting back to hex. Only the hue shifts; saturation and lightness stay identical to the base color.
How it works
The calculator converts the input hex color to HSL, subtracts the chosen angle from the hue for the left analog and adds it for the right, then converts both results back to hex. The angle is clamped between 1° and 90°, keeping results within the adjacent-color zone rather than crossing into split-complementary territory.
Common mistake: treating analogous colors as identical to the original except in hue without noticing that the conversion round-trips through HSL — very dark or very saturated colors may produce slightly different hex values after the hsl→hex round-trip even at 0° shift, because of floating-point rounding in 8-bit channel values.
Worked example
Find analogous colors for red (#ff0000) at 30°
- Convert #ff0000 to HSL: hue = 0°, saturation = 100%, lightness = 50%.
- Left analog hue = 0° − 30° = −30°, which wraps to 330° (magenta-red). Converting HSL(330°, 100%, 50%) to hex gives #ff0080.
- Right analog hue = 0° + 30° = 30° (orange). Converting HSL(30°, 100%, 50%) to hex gives #ff8000.
Left analog: #ff0080 | Right analog: #ff8000
Common mistakes to avoid
- Using a 60-degree offset instead of the conventional 30 degrees -- 60-degree steps produce split-complementary or triadic relationships, not true analogous neighbors.
- Treating all three analogous colors as equals in a design -- typically one is dominant, one secondary, and one an accent to maintain visual hierarchy.
- Picking analogous colors from a very low-saturation base -- near-gray hues produce analogous neighbors that are visually indistinguishable.
Key terms
- Analogous colors
- Colors that sit adjacent to each other on the color wheel, typically within 30°–60° of the base hue. They create harmonious, low-contrast palettes.
- HSL
- Hue–Saturation–Lightness. A cylindrical color model where hue is an angle (0°–360°), saturation is the color intensity (0–100%), and lightness is how light or dark the color appears (0–100%).
- Hue
- The pure color attribute in HSL, measured as an angle around the color wheel: 0°/360° = red, 120° = green, 240° = blue.
- Color wheel
- A circular arrangement of hues used in color theory. Rotating a fixed angle around the wheel produces predictable harmonic relationships such as analogous, triadic, or complementary colors.
Frequently asked questions
- What are analogous colors?
- Colors adjacent on the color wheel, typically within 30°. They share a common hue and look harmonious together.
- How many analogous colors are there?
- Typically two — one on each side. Some schemes extend to four (two per side).