🎨 Color Scheme Generator — Build 5-Color Palettes

Generate harmonious 5-color schemes from any base color. Complementary, analogous, triadic, tetradic, monochromatic. Export as CSS variables or Tailwind.

Enter a base color and instantly see five harmonious colors generated using classic color theory rules: complementary (opposite), analogous (adjacent), triadic (three equidistant), tetradic (four), or monochromatic. Export as CSS custom properties, a Tailwind config, or JSON.

Base Color

Scheme

Export as:

How to Use

Pick a base color

Click the base color swatch or enter a HEX value to set your starting color.

Choose a scheme

Select Complementary, Analogous, Triadic, Tetradic, or Monochromatic from the scheme selector.

Export the palette

Lock colors you want to keep, click Regenerate to vary others, then export as CSS variables, Tailwind, or JSON.

Frequently Asked Questions

What is a color palette in design? +

A color palette is a set of colors chosen to work harmoniously together in a design. Color theory defines relationships between colors: complementary (opposite on the color wheel), analogous (adjacent), triadic (three equidistant), tetradic (four), and monochromatic (same hue, varying lightness).

What is a complementary color scheme? +

Complementary colors are directly opposite each other on the color wheel (e.g., blue and orange, red and green). They create strong contrast and visual tension — ideal for call-to-action buttons and highlights that need to stand out.

What is an analogous color scheme? +

Analogous colors are adjacent on the color wheel (e.g., blue, blue-green, green). They create harmonious, natural-looking combinations with low contrast — great for backgrounds, serene designs, and nature-inspired UIs.

How do I lock a color I like? +

Click the lock icon on any color swatch to lock it. Locked colors are preserved when you click Regenerate or change the scheme type. This lets you keep a brand color while varying the supporting palette.

How do I export the palette? +

Use the Export dropdown to copy as CSS custom properties (--color-1: #abc), Tailwind config colors object, or a raw JSON array. All formats are ready to paste directly into your project.

Complete Guide: Color Palette Generator

The Color Palette Generator creates harmonious sets of colours from a single base colour using established colour harmony theory. It exports palettes as CSS custom properties, Tailwind-compatible scales, and design token JSON — ready to use in a design system or hand directly to a developer.

Colour Harmony Theory

Colour harmony describes predictable relationships between hues on the colour wheel that are aesthetically pleasing when used together. The generator supports all major harmony types:

Complementary — Two colours directly opposite each other on the wheel (e.g. blue and orange). High contrast, energetic. Best used with one dominant and one accent colour.
Analogous — Three to five colours adjacent on the wheel (e.g. yellow, yellow-orange, orange). Natural, cohesive, low contrast. Common in landscape photography-inspired palettes.
Triadic — Three colours equally spaced at 120° intervals. Vibrant and balanced. Requires careful tonal management to avoid visual noise.
Tetradic (square) — Four colours at 90° intervals. Rich and complex. Works best when one colour dominates and the others serve as accents.
Split-complementary — A base colour and the two colours adjacent to its complement. Similar contrast to complementary but softer and less jarring.

HSL vs HSB for Generating Palettes

HSL (Hue, Saturation, Lightness) is the preferred colour model for palette generation. Unlike RGB, it maps directly to human perception: you can increase lightness predictably to get tints and decrease it to get shades. HSB (Hue, Saturation, Brightness) is useful for understanding colour purity but produces less perceptually uniform palettes when used for interpolation.

The generator works in HSL internally and exposes HSL, HEX, and RGB outputs so you can use whichever format your tools require.

The 60-30-10 Design Rule

The 60-30-10 rule is a foundational principle in visual design: allocate 60% of the visual space to a dominant colour (typically a neutral), 30% to a secondary colour, and 10% to an accent colour. This ratio creates a hierarchy that guides the viewer's eye without overwhelming them. When applying a generated palette, map your swatches to this ratio before deciding how to use each colour.

Tint, Shade, and Tone Differences

These three terms are often confused but describe distinct operations:

Tint — Adding white to a hue. Increases lightness in HSL. Produces pastel variants.
Shade — Adding black to a hue. Decreases lightness in HSL. Produces deeper, richer variants.
Tone — Adding grey (both white and black) to a hue. Reduces saturation. Produces muted, desaturated variants used in sophisticated UI palettes.

WCAG Contrast Checking

Every swatch in the generated palette is automatically checked against WCAG 2.1 contrast ratios for both white and black text. The contrast ratio appears as a badge on each swatch:

AA — Minimum 4.5:1 for normal text, 3:1 for large text (18pt or 14pt bold).
AAA — Enhanced 7:1 for normal text, 4.5:1 for large text.

Choosing text colours that only achieve AA or below for body copy is a common accessibility failure. The generator highlights these cases so you know to use darker or lighter variants for text roles.

Exporting to CSS Custom Properties

Generated palettes export as CSS custom properties on :root:

:root {
  --color-brand-50: #eff6ff;
  --color-brand-100: #dbeafe;
  --color-brand-500: #3b82f6;
  --color-brand-900: #1e3a5f;
}

Reference these tokens throughout your stylesheet with var(--color-brand-500). Updating the palette in one place propagates changes everywhere — this is the core value of a token-based design system.

Tailwind-Style Scale (50–950)

Tailwind CSS popularised a numeric scale from 50 (lightest) to 950 (darkest) with a perceptually uniform step between each value. The generator maps your base colour to the 500 position and derives the rest of the scale algorithmically, ensuring consistent lightness increments in OKLCH space — the most perceptually accurate colour space available in modern CSS.

Use in Design System Tokens

Design token systems like Style Dictionary and Theo consume JSON structures mapping token names to colour values. The generator exports a token-ready JSON with semantic naming (primary, secondary, destructive, success, warning) layered on top of the numeric scale, so both designers and engineers reference the same source of truth.

Related Tools

For picking a precise starting base colour, use the Color Picker. To create gradient backgrounds from palette colours, use the Gradient Generator.