About

Color selection errors propagate through entire design systems. A wrong H (hue) shift of 15° in your primary palette can make complementary accents clash, reducing readability and increasing user bounce rates. This generator produces colors across all four major notation systems - HEX, RGB, HSL, and CMYK - and computes WCAG 2.1 contrast ratios against white and black backgrounds so you can verify accessibility compliance before committing to a palette. It implements seven harmony modes derived from color theory: complementary (H + 180°), analogous (H ± 30°), triadic, tetradic, split-complementary, and monochromatic variations.

The tool approximates perceptual uniformity by generating in HSL space rather than raw RGB, which avoids the dark muddy outputs typical of naive Math.random × 255 approaches. Saturation is bounded between 40% and 90%, lightness between 35% and 75% by default, filtering out near-white and near-black results. Limitation: CMYK values are calculated using a simple subtractive model without ICC color profiles, so printed output may differ from screen rendering.

Formulas

Color conversion between HSL and RGB uses a piecewise chroma-based calculation. The relative luminance formula from WCAG 2.1 determines whether a color meets accessibility contrast thresholds.

HSL to RGB conversion derives chroma C, then maps to an intermediate RGB triplet:

C = (1 − |2L − 1|) × S
X = C × (1 − |(H ÷ 60) mod 2 − 1|)
m = L − C2

WCAG 2.1 relative luminance (L) for contrast ratio:

L = 0.2126R_lin + 0.7152G_lin + 0.0722B_lin

where each linear channel value is:

{

C_lin = C_sRGB12.92 if C_sRGB ≤ 0.04045C_lin = ((C_sRGB + 0.055) ÷ 1.055)^2.4 otherwise

Contrast ratio between two luminances:

CR = L₁ + 0.05L₂ + 0.05

where L₁ is the lighter luminance. A ratio ≥ 4.5 passes WCAG AA for normal text.

RGB to CMYK (simple subtractive, no ICC profile):

K = 1 − max(R′, G′, B′)
C = 1 − R′ − K1 − K

where R′ = R ÷ 255 (normalized). Same pattern applies for M and Y channels.

Reference Data

Harmony Mode	Hue Relationship	Swatch Count	Best For	Contrast Risk
Random	No constraint	1 - 8	Exploration, brainstorming	High (unchecked)
Complementary	H + 180°	2	CTA buttons, alerts	Low
Analogous	H ± 30°	3	Backgrounds, gradients	Medium (low contrast between swatches)
Triadic	H + 120°, + 240°	3	Vibrant illustrations	Low
Tetradic	H + 60°, + 180°, + 240°	4	Complex dashboards	Low
Split-Complementary	H + 150°, + 210°	3	Softer contrast than complementary	Low - Medium
Monochromatic	Same H, vary S/L	5	Elegant, minimal UI	High (similar tones)
WCAG 2.1 Contrast Ratio Thresholds
AA Large Text	≥ 3.0:1		Text ≥ 18pt or 14pt bold
AA Normal Text	≥ 4.5:1		Body copy, labels
AAA Normal Text	≥ 7.0:1		Maximum readability
Common Color Space Ranges
HEX	#000000 - #FFFFFF		16,777,216 possible values
RGB	0 - 255 per channel		Additive (screen)
HSL	H: 0 - 360°, S/L: 0 - 100%		Perceptual (human-intuitive)
CMYK	0 - 100% per channel		Subtractive (print)

Frequently Asked Questions

Random RGB generation distributes uniformly across the color cube, which produces a disproportionate number of muddy, desaturated, or near-black colors. HSL separates hue (H), saturation (S), and lightness (L) into independent axes. By constraining S to 40 - 90% and L to 35 - 75%, the output remains vibrant and usable. You can unlock the full range by adjusting the sliders.

The CMYK conversion uses a simple subtractive model: K = 1 − max(R′, G′, B′). This does not account for ICC color profiles, ink density, or paper substrate absorption. For offset printing, expect deviations of 5 - 15% per channel. Always request a physical proof from your printer.

For normal body text (< 18pt), WCAG AA requires a contrast ratio ≥ 4.5:1. Large text (≥ 18pt or 14pt bold) requires ≥ 3.0:1. AAA level demands ≥ 7.0:1. The generator displays contrast ratios against both white (#FFFFFF) and black (#000000) for every swatch.

Hue is a circular value on a 0 - 360° wheel. The complementary offset adds 180° and applies modulo 360: H_comp = (H + 180) mod 360. This ensures a hue of 270° (violet) correctly maps to 90° (chartreuse), not an out-of-range value.

Yes. Click the lock icon on any swatch. Locked swatches retain their H, S, L values when you regenerate. This is useful for building palettes around a fixed brand color. In harmony modes, the locked color becomes the base hue from which offsets are calculated.

Analogous varies hue (H ± 30°) while keeping saturation and lightness similar. Monochromatic fixes hue entirely and only varies S and L. Analogous creates a richer color range suitable for gradients. Monochromatic creates a tonal scale ideal for minimalist interfaces where you need depth without chromatic distraction.