Color Palette Generation Algorithms Explained
Generating aesthetically pleasing color palettes programmatically requires understanding color theory and perceptual uniformity. This guide covers the algorithms behind palette generation tools.
Key Takeaways
- The choice of color space determines the quality of generated palettes.
- The simplest approach: fix saturation and lightness, then rotate the hue by equal increments.
- OKLCH separates lightness (L), chroma (C), and hue (H) in a perceptually uniform space.
- Extract a palette from an existing image:
- Start with a single seed color and generate a palette using color theory relationships:
CSS Color Converter
Convert colors between hex, RGB, HSL, HWB, and named CSS colors
Color Space Selection
The choice of color space determines the quality of generated palettes. RGB is the default for screens but produces poor perceptual results. HSL is more intuitive but not perceptually uniform. OKLCH is the modern choice for perceptually uniform palette generation.
Algorithm: HSL Rotation
The simplest approach: fix saturation and lightness, then rotate the hue by equal increments.
For n colors: hue_step = 360 / n
Starting at hue 0 with n=5: 0°, 72°, 144°, 216°, 288°
Limitation: Some hues appear brighter or more saturated than others at the same HSL values. Yellow at S:100 L:50 is far more vivid than blue.
Algorithm: OKLCH-Based Generation
OKLCH separates lightness (L), chroma (C), and hue (H) in a perceptually uniform space. Colors at the same L and C values look equally bright and vivid to the human eye.
| Component | Controls | Range |
|---|---|---|
| Lightness | Perceived brightness | 0 (black) to 1 (white) |
| Chroma | Color intensity | 0 (gray) to ~0.4 |
| Hue | Color wheel position | 0° to 360° |
Algorithm: K-Means Extraction
Extract a palette from an existing image:
- Sample pixels from the image
- Initialize k cluster centroids randomly
- Assign each pixel to the nearest centroid
- Move centroids to the mean of their cluster
- Repeat until convergence
- The k centroids are your palette colors
Algorithm: Complementary Extension
Start with a single seed color and generate a palette using color theory relationships:
- Monochromatic: Vary lightness and chroma
- Complementary: Add hue + 180°
- Split complementary: Add hue + 150° and hue + 210°
- Triadic: Add hue + 120° and hue + 240°
Accessibility Check
After generation, verify that the palette produces sufficient contrast ratios for text. Auto-adjust lightness values to meet WCAG AA (4.5:1) thresholds when used as text-background pairs.