Color Scheme Generator
Generate perfect color palettes using HSL color theory. Create monochromatic, analogous, and complementary schemes with WCAG contrast checking.
UI Visualization
About
This Color Scheme Generator uses the HSL (Hue, Saturation, Lightness) cylindrical-coordinate system to mathematically derive harmonious color palettes. Unlike random color pickers, this tool applies geometric relationships on the color wheel to ensure aesthetic consistency.
Designers rely on these relationships to create emotional responses. For instance, Analogous schemes create calm, low-contrast designs, while Split-Complementary schemes offer high-contrast vibrancy without the tension of a pure complementary pair. This tool also calculates the Relative Luminance (L) of every generated color to ensure your text remains readable, adhering to WCAG 2.1 accessibility standards.
Formulas
The core of color harmony lies in manipulating the Hue (H) component of the HSL model. The base formula for determining a harmonic color Cn is:
Where θ is the rotational angle determined by the harmony rule (e.g., 120° for Triadic). To ensure accessibility, we calculate contrast using Relative Luminance (L):
If L > 0.5, the text color defaults to black; otherwise, it defaults to white.
Reference Data
| Harmony Rule | Angle Offset (θ) | Description |
|---|---|---|
| Monochromatic | 0° | Variations in Saturation (S) and Lightness (L) only. |
| Analogous | ±30° | Colors adjacent to each other on the wheel. Serene and comfortable. |
| Complementary | 180° | Opposite colors. High contrast, high impact. |
| Split-Complementary | 150°, 210° | Base color plus the two colors adjacent to its complement. |
| Triadic | 120°, 240° | Three colors evenly spaced. Vibrant and balanced. |
| Tetradic (Double Split) | 90° pairs | Two pairs of complementary colors. Hardest to balance. |