About

Selecting color combinations by intuition leads to accessibility failures and visual dissonance. A background-foreground pair that feels right on your monitor may produce a WCAG contrast ratio below 4.5:1, rendering text illegible for roughly 8% of male users with color vision deficiency. This tool generates mathematically derived palettes: it picks a random RGB background, computes its complementary inverse (R_fg = 255 − R_bg) for guaranteed contrast, then derives an accent by shifting the hue 30° in HSL space and scaling lightness through the golden ratio φ ≈ 1.618. Five harmony modes (complementary, analogous, triadic, split-complementary, tetradic) follow standard color theory geometry on the HSL wheel. Every generated palette is checked against WCAG 2.1 luminance formulas, and a color-blindness simulator applies Brettel-Viénot transformation matrices so you can verify perception under protanopia, deuteranopia, and tritanopia before committing to production CSS.

Formulas

The relative luminance L of a color determines its perceived brightness and is the basis for WCAG contrast computation. Each sRGB channel is linearized before weighting:

L = 0.2126 ⋅ R_lin + 0.7152 ⋅ G_lin + 0.0722 ⋅ B_lin

where each linearized channel C_lin is computed from the sRGB value C_srgb ∈ [0,1]:

{

C_lin = C_srgb12.92 if C_srgb ≤ 0.04045C_lin = (C_srgb + 0.0551.055)^2.4 otherwise

The contrast ratio between two luminances L₁ (lighter) and L₂ (darker):

CR = L₁ + 0.05L₂ + 0.05

Complementary foreground is computed by channel inversion:

R_fg = 255 − R_bg, G_fg = 255 − G_bg, B_fg = 255 − B_bg

Accent color uses the golden ratio φ ≈ 1.618 to shift lightness in HSL space, then rotates hue by 30°:

H_accent = (H_bg + 30) mod 360, L_accent = L_bgφ

where L = relative luminance (WCAG), C_srgb = normalized sRGB channel [0,1], CR = contrast ratio, H = hue in degrees, φ = golden ratio.

Reference Data

Harmony Mode	Hue Offset(s)	Use Case	Contrast Tendency
Complementary	180°	High-impact hero sections, call-to-action buttons	High
Analogous	±30°	Calm, cohesive branding, editorial layouts	Low
Triadic	±120°	Vibrant illustrations, children’s products	Medium
Split-Complementary	150° & 210°	Balanced contrast without tension	Medium-High
Tetradic (Rectangle)	90°, 180°, 270°	Complex dashboards, data visualizations	Variable
WCAG 2.1 Contrast Thresholds
AA Normal Text	≥ 4.5:1		Minimum for body copy
AA Large Text	≥ 3.0:1		≥ 18pt or 14pt bold
AAA Normal Text	≥ 7.0:1		Enhanced readability
AAA Large Text	≥ 4.5:1		Enhanced for large text
Color Vision Deficiency Prevalence
Protanopia (no red)	1.3% of males		Red-green confusion
Deuteranopia (no green)	1.2% of males		Red-green confusion
Tritanopia (no blue)	0.01%		Blue-yellow confusion
Protanomaly (weak red)	1.3% of males		Reduced red sensitivity
Deuteranomaly (weak green)	5.0% of males		Most common deficiency
Common Named Color Coordinates
Pure Red	rgb(255,0,0)	hsl(0,100%,50%)	#FF0000
Pure Green	rgb(0,128,0)	hsl(120,100%,25%)	#008000
Pure Blue	rgb(0,0,255)	hsl(240,100%,50%)	#0000FF
Coral	rgb(255,127,80)	hsl(16,100%,66%)	#FF7F50
Teal	rgb(0,128,128)	hsl(180,100%,25%)	#008080
Gold	rgb(255,215,0)	hsl(51,100%,50%)	#FFD700

Frequently Asked Questions

When the background sits near mid-gray (RGB channels around 128), the complementary inversion yields another mid-gray, producing a contrast ratio approaching 1:1. The tool detects this and auto-adjusts lightness to push the foreground toward white or black until the WCAG AA threshold of 4.5:1 is met. You can also switch to triadic or split-complementary harmony mode to sidestep the mid-gray trap entirely.

The simulator applies the Brettel-Viénot-Mollon (1997) transformation matrices, which are the standard used in academic research and accessibility auditing tools. The simulation is accurate for the three dichromacy types (protanopia, deuteranopia, tritanopia). Anomalous trichromacy (partial deficiency) is approximated by interpolating between normal vision and full dichromacy at 50% severity. Real perception varies per individual, so treat the simulation as a conservative estimate.

The contrast ratio itself is a pure luminance measurement independent of typography. However, WCAG 2.1 defines different thresholds based on text size: normal text requires a minimum ratio of 4.5:1 (AA) while large text (18pt regular or 14pt bold) only requires 3.0:1. The tool reports both AA and AAA pass/fail status for both normal and large text thresholds so you can make informed decisions.

Locked colors remain fixed while only unlocked slots are regenerated. The harmony algorithm recalculates around the locked color's hue as the new anchor point. For example, locking a blue background (hue 220°) and selecting analogous mode will generate companions at 190° and 250°. This lets you build palettes iteratively around a brand color.

Yes. Click any color swatch to open a manual input field accepting HEX (#FF5733), RGB (rgb(255,87,51)), or HSL (hsl(14,100%,60%)) formats. The tool parses and validates the input, then recalculates the remaining palette colors using the selected harmony mode. Invalid formats trigger a toast notification with the expected syntax.

The accent is derived deterministically from the background using two operations: a 30° hue rotation in HSL space and a lightness division by the golden ratio (1.618). This guarantees mathematical harmony with the background while maintaining sufficient visual distinction. A purely random third color would have no guaranteed relationship to the palette and could clash or duplicate existing tones.