Color Scheme Generator

Color theory

To build each scheme, the tool works in HSL space and rotates the hue of the base color by fixed angles. The Complementary picks the opposite tone, at 180°. The Analogous uses the immediate neighbors, at ±30°. The Triadic spreads three equidistant points, 120° apart, while the Tetradic places four points spaced at 90°. Finally, the Split-Complementary splits the opposite into two tones, positioned at ±150°.

Color theory in two minutes

The color wheel we still use was born in 1666, when Isaac Newton bent the visible spectrum into a circle of seven hues to explain how white light splits into rainbow components. Goethe refined it psychologically a century later, and at the Bauhaus school Johannes Itten codified the modern 12-hue wheel that designers still teach today. Itten's wheel is built on the RYB model (red, yellow, blue) — useful for painters because pigments subtract light. Screens use RGB (additive, light-emitting); print uses CMYK (subtractive ink).

The classic harmonies

• Monochromatic — a single hue with variations in lightness and saturation. Quiet, elegant, hard to get wrong.
• Analogous — three colors adjacent on the wheel (≈30° apart). Calm, natural, harmonious — the palette of sunsets and forests.
• Complementary — two opposite colors (180°). Maximum contrast, but visually tense; use one as background and the other sparingly as accent.
• Split-complementary — a hue plus the two neighbours of its opposite. Strong contrast with less tension than pure complementary.
• Triadic — three hues 120° apart. Vibrant and balanced; works well when one is dominant.
• Tetradic / rectangular — four hues in two complementary pairs. Rich but tricky — keep one dominant and the rest as accents.
• Square — four hues 90° apart. The most colorful scheme; risks looking chaotic without strong neutrals.

Color models for designers and developers

• HSL (Hue / Saturation / Lightness) — intuitive for humans; native in CSS via hsl(). Great for generating tints and shades by adjusting L.
• HSB / HSV (Hue / Saturation / Brightness) — variant favoured by Photoshop and many color pickers.
• Lab (CIE L*a*b*) — perceptually uniform: a fixed numeric distance corresponds to a constant perceived difference. The basis of the ΔE metric used to measure color accuracy in print and brand identity.
• OKLCH — the modern alternative introduced in CSS Color Module 4. Perceptually uniform like Lab, but expressed as Lightness, Chroma and Hue, making it the new recommended way to generate consistent palettes (Tailwind v4 ships with OKLCH defaults).

Accessibility: contrast ratios

The WCAG 2.1 guidelines define minimum contrast ratios between text and background: AA requires 4.5:1 for body text (3:1 for large text), and AAA requires 7:1. A pretty palette that fails contrast is a broken palette — always verify text against background after picking colors. Avoid placing a saturated color over another saturated tone from the same family (e.g. mid-blue on light-blue) — the lightness gap is too narrow.

Building a brand palette in practice

A solid system has roughly: one primary hue, one secondary hue (analogous or complementary), one accent (used in < 10% of the UI for calls to action), and a neutral scale of grays. Modern systems like Material Design 3 and the Tailwind palette use a numeric ramp (50, 100, 200, …, 950) generated by holding hue steady and stepping lightness/chroma — that is what gives you blue-500, blue-600, etc.

FAQ

Which harmony fits a clean web interface? Analogous palettes with one complementary accent for buttons usually feel the most readable and least overwhelming.

Which color model is best for CSS? Today, hsl() for broad browser support, oklch() when you want perceptually consistent ramps and target evergreen browsers.

How do I build a brand palette? Start with the primary hue you want to be remembered by, derive shades and tints in OKLCH, then add an analogous secondary and a complementary accent. Test every text/background combination against WCAG AA.