About

Analogous color schemes use hues adjacent on the color wheel, typically within a 30° to 60° arc. They produce low-contrast, visually cohesive palettes found in nature (autumn foliage, ocean gradients). The risk of poor analogous selection is muddy, indistinguishable swatches that fail WCAG contrast ratios when used for text-on-background pairs. This tool computes n evenly-spaced hues across a configurable angular spread θ centered on a base hue H₀, outputting precise HEX, RGB, and HSL values. It also reports relative luminance and contrast ratio between adjacent swatches so you can validate accessibility before committing to a design system.

The generator assumes the HSL cylindrical model where saturation and lightness remain constant across the palette unless individually overridden. Note: perceptual uniformity is not guaranteed because HSL does not map linearly to human vision. For print work, convert outputs to CMYK via a color-managed pipeline. Pro Tip: keep angular spread under 60° for cohesion. Spreads above 90° drift toward split-complementary territory.

Formulas

Each color H_i in the analogous palette is computed by distributing n hues symmetrically around the base hue H₀ across the total angular spread θ.

H_i = (H₀ − θ2 + i ⋅ θn − 1) mod 360

where i ∈ {0, 1, …, n − 1}.

HSL to RGB conversion uses the standard algorithm. Given H ∈ [0, 360), S ∈ [0, 1], L ∈ [0, 1]:

C = (1 − |2L − 1|) ⋅ S

X = C ⋅ (1 − |H60 mod 2 − 1|)

m = L − C2

WCAG relative luminance for contrast ratio calculation:

L_rel = 0.2126R_lin + 0.7152G_lin + 0.0722B_lin

where R_lin, G_lin, B_lin are linearized sRGB values (gamma-decoded with threshold 0.04045).

Contrast ratio between two luminances L₁ and L₂ (L₁ ≥ L₂):

CR = L₁ + 0.05L₂ + 0.05

where H₀ = base hue in degrees, θ = angular spread in degrees, n = number of colors, C = chroma, S = saturation, L = lightness, m = match value offset.

Reference Data

Harmony Type	Angle Relationship	Typical Spread	Contrast Level	Common Use
Analogous	Adjacent hues	15° - 60°	Low	Backgrounds, gradients
Complementary	H + 180°	180°	High	CTA buttons, alerts
Split-Complementary	H ± 150°	300°	Medium-High	Balanced layouts
Triadic	120° apart	240°	Medium	Playful, vibrant UI
Tetradic (Square)	90° apart	270°	High	Complex dashboards
Monochromatic	Same hue	0°	Very Low	Minimal, elegant design
Narrow Analogous	Adjacent hues	10° - 20°	Very Low	Subtle tonal shifts
Wide Analogous	Adjacent hues	60° - 90°	Low-Medium	Illustrative palettes
Warm Analogous	0° - 60° range	30° - 60°	Low	Food, energy brands
Cool Analogous	180° - 270° range	30° - 60°	Low	Tech, healthcare
HSL Saturation	Range: 0 - 100%	-	-	Controls vividness
HSL Lightness	Range: 0 - 100%	-	-	Controls brightness
WCAG AA (Normal Text)	Contrast ≥ 4.5:1	-	-	Minimum readability
WCAG AA (Large Text)	Contrast ≥ 3:1	-	-	Headings ≥ 18pt
WCAG AAA	Contrast ≥ 7:1	-	-	Enhanced readability

Frequently Asked Questions

Smaller spread values (15° - 30°) produce tightly grouped hues that feel monochromatic with subtle variation. As θ increases beyond 60°, the palette transitions from analogous toward split-complementary, introducing more visual tension. For UI backgrounds and cards, keep θ ≤ 45°. For illustrations needing more range, 60° - 90° works well.

Muddiness occurs when saturation is moderate (30 - 50%) and lightness clusters around 40 - 60%. In this zone, human perception struggles to distinguish adjacent hues. Either increase saturation above 65% or vary lightness across swatches. This tool keeps saturation and lightness uniform; post-adjust individual swatches for perceptual clarity.

Rarely for adjacent swatches. Analogous colors by definition have low contrast. The contrast ratio between two neighboring analogous hues at equal lightness is typically 1.2:1 to 1.8:1, far below the WCAG AA minimum of 4.5:1. Use analogous colors for decorative elements and pair them with a dark neutral (L ≤ 20%) or white for readable text.

HSL distributes hue linearly around a 360° wheel, but equal angular steps do not produce equal perceptual differences. Blues at 240° appear darker than yellows at 60° at the same L value. OKLCH corrects this with a perceptual lightness axis. This tool uses HSL because it is the most widely supported CSS model. For perceptually uniform results, manually adjust lightness per swatch after generation.

The formula applies modulo 360 arithmetic: H_i = (H_computed) mod 360. A base hue of 350° with a 40° spread correctly wraps through 0° (red), producing hues like 330°, 340°, 350°, 0°, 10°. The wheel is circular. No clamping occurs.

3 - 5 colors is the standard for interface design: primary, secondary, and 1 - 3 supporting tones. 7+ colors are useful for data visualization (gradient heat maps) or illustration. More colors at the same spread means smaller hue steps, so increase θ proportionally. A rule of thumb: θ ≥ 5° × n to maintain visible distinction.