About

Color palette selection is not arbitrary. A mismatched palette degrades readability, breaks visual hierarchy, and reduces user engagement by measurable margins. This generator produces palettes using color theory harmonics rooted in the HSL (Hue, Saturation, Lightness) color model. It calculates complementary, analogous, triadic, split-complementary, tetradic, and monochromatic schemes by rotating the hue angle H in precise degree increments. Each generated color includes its WCAG 2.1 contrast ratio against white and black backgrounds, computed from relative luminance L, so you can verify accessibility compliance before committing to a scheme.

The tool approximates nearest CSS named colors via Euclidean distance in RGB space. Limitation: perceptual uniformity is not guaranteed - two colors equidistant in RGB may not appear equally distinct to the human eye. For critical accessibility work, validate with a dedicated WCAG checker. Pro Tip: lock one brand color and regenerate the rest to build cohesive palettes around an existing identity.

Formulas

Color harmony is computed by rotating the base hue H₀ in the HSL cylinder. For a given offset angle θ:

H_n = (H₀ + θ_n) mod 360

WCAG 2.1 contrast ratio between two colors uses relative luminance:

CR = L₁ + 0.05L₂ + 0.05

where L₁ is the lighter luminance. Relative luminance from sRGB:

L = 0.2126R_lin + 0.7152G_lin + 0.0722B_lin

Each sRGB channel is linearized: if c ≤ 0.04045, then c_lin = c12.92; otherwise c_lin = ((c + 0.055) ÷ 1.055)^2.4. Nearest CSS color name is found via minimum Euclidean distance: d = √ΔR² + ΔG² + ΔB².

Where H = Hue (0 - 360°), S = Saturation (0 - 100%), L = Lightness (0 - 100%), CR = Contrast Ratio, R, G, B = Red, Green, Blue channels (0 - 1).

Reference Data

Harmony Mode	Hue Offsets	Colors	Best Use Case	Visual Feel
Complementary	0°, 180°	2	High contrast CTAs	Bold, vibrant
Analogous	−30° to +30°	5	Soft, cohesive layouts	Harmonious, calm
Triadic	0°, 120°, 240°	3	Balanced, playful designs	Dynamic, balanced
Split-Complementary	0°, 150°, 210°	3	Softer contrast than complementary	Nuanced tension
Tetradic (Rectangle)	0°, 90°, 180°, 270°	4	Rich, complex interfaces	Diverse, full-spectrum
Monochromatic	0° (vary S/L)	5	Minimalist, elegant UIs	Clean, sophisticated
Random	Fully random HSL	5	Exploration, inspiration	Unpredictable
Warm	0° - 60°	5	Food, energy, passion themes	Inviting, energetic
Cool	180° - 270°	5	Tech, finance, trust themes	Professional, calm
Pastel	Random H, high L, low S	5	Soft branding, children’s products	Gentle, approachable
Earth Tones	20° - 50°, low S	5	Organic, nature, sustainability	Grounded, natural
Neon / Vibrant	Random H, max S, medium L	5	Nightlife, gaming, youth brands	Electric, loud

Frequently Asked Questions

Each harmony mode applies specific hue offsets from the base color. Complementary uses a 180° offset for maximum contrast. Analogous stays within ±30° for smooth transitions. Triadic spaces colors 120° apart for balanced variety. The mode determines the mathematical relationship between hue angles, directly affecting visual cohesion and perceived contrast of the resulting palette.

Human color perception is nonlinear. The HSL model is not perceptually uniform - equal numeric differences in hue, saturation, or lightness do not produce equally perceived differences. Two colors 30° apart near blue (H ≈ 240°) may appear more similar than two colors 30° apart near yellow (H ≈ 60°). For perceptually uniform spacing, consider validating results in CIELAB color space.

WCAG 2.1 Level AA requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (≥18pt or ≥14pt bold). Level AAA requires 7:1 for normal text and 4.5:1 for large text. This tool displays the contrast ratio of each color against both white (#FFFFFF) and black (#000000) backgrounds so you can verify compliance before implementation.

Yes. Click the lock icon on any color card. Locked colors retain their exact HSL values during regeneration. Unlocked colors are recalculated based on the selected harmony mode. This is useful for building palettes around an existing brand color - lock the brand primary and iterate on supporting colors.

The lookup uses Euclidean distance in RGB space across all 147 CSS named colors. It finds the named color with the smallest geometric distance to the generated color. Accuracy is limited by RGB space's perceptual nonuniformity and by the sparse distribution of named colors - many regions of color space have no nearby named color. Treat the name as an approximate human-readable label, not a precise match.

The tool exports as PNG image (for sharing or mood boards), CSS custom properties (for direct use in stylesheets), and JSON array (for programmatic use or storage). Copy individual color values in HEX, RGB, or HSL format by clicking the respective code on each card. PNG export renders a 1200×400px swatch strip suitable for design documentation.