About

Color selection without a systematic approach leads to palettes that clash, reduce readability, and violate accessibility contrast ratios (WCAG 2.1 requires a minimum contrast ratio of 4.5:1 for normal text). This tool computes color harmonies by calculating angular offsets on the HSL color wheel. A complementary pair sits at 180° separation. A triadic set distributes three hues at 120° intervals. The generator converts between HSL, RGB, and HEX in real time using standard colorimetry formulas. Results approximate display output; actual appearance depends on monitor calibration and color profile (sRGB assumed).

Formulas

The HSL-to-RGB conversion transforms a hue angle H ∈ [0, 360], saturation S ∈ [0, 1], and lightness L ∈ [0, 1] into RGB channels.

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

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

m = L − C2

The intermediate values (R′, G′, B′) are selected based on which 60° sector H falls into. Final channels: R = (R′ + m) × 255.

Harmony offsets are computed by adding angular displacements to the base hue:

H_n = (H_base + Δ_n) mod 360

Where Δ_n is the offset angle for harmony type (e.g., 180° for complementary). Relative luminance for contrast ratio uses the sRGB linearization:

L = 0.2126R + 0.7152G + 0.0722B

Where each channel is linearized: if c ≤ 0.04045, then c_lin = c12.92; otherwise c_lin = ((c + 0.055) ÷ 1.055)^2.4.

Reference Data

Harmony	Hue Offsets	Colors	Use Case
Complementary	0°, 180°	2	High contrast, call-to-action buttons
Analogous	−30°, 0°, +30°	3	Harmonious themes, nature palettes
Triadic	0°, 120°, 240°	3	Vibrant balanced designs
Split-Complementary	0°, 150°, 210°	3	Softer contrast than complementary
Tetradic (Rectangle)	0°, 60°, 180°, 240°	4	Rich palettes, requires balance
Square	0°, 90°, 180°, 270°	4	Equal tension, dynamic layouts
Monochromatic	0° (vary S/L)	5	Elegant, single-hue gradations
Double Complementary	0°, 30°, 180°, 210°	4	Complex designs, dashboards
WCAG AA Normal Text	Contrast ≥ 4.5:1		Body text readability
WCAG AA Large Text	Contrast ≥ 3.0:1		Headings ≥ 18pt
WCAG AAA Normal Text	Contrast ≥ 7.0:1		Maximum accessibility
Red (Primary)	0°	-	Urgency, energy, passion
Orange	30°	-	Warmth, enthusiasm
Yellow	60°	-	Optimism, attention
Green	120°	-	Growth, safety, nature
Cyan	180°	-	Calm, clarity, tech
Blue	240°	-	Trust, professionalism
Purple	270°	-	Luxury, creativity
Magenta	300°	-	Innovation, playfulness
sRGB Gamut	Standard for web displays		Default color profile for CSS
HSL Model	H: 0 - 360, S: 0 - 100, L: 0 - 100		Perceptually intuitive model

Frequently Asked Questions

Monitors vary in color gamut coverage, calibration, and gamma curves. The sRGB standard assumes a gamma of approximately 2.2, but uncalibrated displays deviate. A HEX value like #7C9EF5 maps to specific sRGB coordinates, but the physical light output depends on the panel technology (IPS, OLED, TN) and its ICC profile. For critical color work, calibrate with a hardware colorimeter.

Calculate the relative luminance of both foreground and background colors using the linearized sRGB formula. The contrast ratio is (L₁ + 0.05) / (L₂ + 0.05) where L₁ is the lighter color. For WCAG AA compliance, body text needs a ratio ≥ 4.5:1 and large text (≥ 18pt or 14pt bold) needs ≥ 3.0:1. This tool displays contrast ratios between your selected palette colors and white/black backgrounds.

HSL defines lightness as the midpoint between the darkest and lightest shade: L = 0 is black, L = 100 is white, and L = 50 gives the pure hue. HSV (also called HSB) defines value/brightness as the maximum RGB channel: V = 0 is black, V = 100 is the brightest form of the hue. HSL is more symmetric and intuitive for web design. HSV is preferred in painting tools because full saturation at V = 100 yields vivid color, not white.

Triadic harmony (120° spacing) produces three equally vibrant colors. It works well when you need balanced visual energy, such as infographics or children's branding. Split-complementary (base + 150° + 210°) retains the contrast of complementary pairing but reduces visual tension. Use it when you need a dominant color with two supporting accents that are less jarring than a direct complement.

Yes. Hue is a circular quantity. A hue of 370° is equivalent to 10°. The formula H_n = (H_base + Δ) mod 360 ensures all computed harmony hues stay within the [0, 360) range. This is why the color wheel is rendered as a continuous ring. There is no "start" or "end" to hue.

When saturation is zero, the color becomes a pure gray determined solely by lightness. All harmony offsets become meaningless because shifting hue on a desaturated color produces the same gray. The wheel indicator will still show angular positions, but the generated swatches will all appear identical. Increase saturation above 10% for meaningful palette differentiation.