Color Palette Generator

Color Palette Generator — Create Harmonious Color Schemes Using Color Theory

Picking colors that work together is one of the hardest parts of design. You know it when it's wrong — that sickly feeling when two greens don't sit right, or when a red accent fights the purple background — but knowing why it's wrong requires understanding the relationships between hues that color theory formalizes. Color harmony isn't a matter of taste; it's grounded in the geometry of the color wheel and decades of perceptual research. A complementary scheme produces maximum contrast because the hues sit on opposite sides of the wheel. An analogous scheme feels cohesive because adjacent hues share underlying pigment families. These aren't arbitrary rules — they're descriptions of what the human visual system naturally perceives as balanced.

This generator applies those relationships mathematically. Pick any starting color, choose a harmony type, and the tool derives a complete palette with every swatch's HEX, RGB, and HSL values ready to paste into CSS custom properties, Tailwind config, Figma variables, or any design system documentation. No more eyeballing "close enough" — you get mathematically grounded combinations every time.

Color Harmony Types — What Each One Does and When to Use It

Every harmony relationship on the color wheel produces a distinct emotional quality. The trick isn't memorizing definitions — it's knowing which mood you're building and picking the scheme that matches:

Complementary: Two hues directly opposite on the wheel — blue and orange, red and green, purple and yellow. These pairs produce the highest possible contrast between any two hues, which makes them excellent for call-to-action buttons, accent badges, and anything that needs to snap the viewer's attention. The catch is visual tension: split a page 50/50 between red and green and it vibrates. The standard approach is the 60-30-10 ratio — 60% dominant neutral, 30% one complement, 10% the other. Stripe's homepage (dark background, bright green CTA) is a textbook complementary layout.

Analogous: Three to five hues sitting next to each other on the wheel — teal, blue, indigo. Analogous palettes feel calm, natural, and visually comfortable because adjacent hues share undertone families. Think sunsets (red-orange-yellow), forests (green-teal-blue), or ocean palettes (teal-blue-purple). They're ideal for backgrounds, navigation systems, and any interface where the user spends extended time. The risk is monotony: without enough lightness contrast between swatches, analogous palettes flatten into an indistinct wash. Fix this by pulling tints and shades (lightness variation) even when hue variation stays narrow.

Triadic: Three hues evenly spaced 120° apart — red, yellow, blue, or orange, green, violet. Triadic palettes offer strong contrast with inherent balance, making them popular for playful, energetic designs: children's products, game interfaces, creative tools. The challenge is that three strong hues compete for attention; typically one dominates, a second supports, and the third accents.

Split-complementary: The base color plus the two hues adjacent to its direct complement. If your base is blue (complement: orange), you get yellow-orange and red-orange. This gives you the contrast punch of complementary with less visual aggression — the two accent colors are easier to combine than a single hard complement. It's one of the most versatile schemes for dashboards and data-heavy interfaces where you need distinct category colors that still feel related.

Monochromatic: A single hue at varying lightness and saturation levels. Monochromatic palettes feel clean, minimal, and inherently cohesive. They're the easiest to implement in light/dark mode because the same hue family works at every lightness level — you just shift the scale. Most SaaS admin panels and documentation sites lean heavily on monochromatic blue or gray palettes for exactly this reason.

The 60-30-10 Rule and Why Proportions Matter More Than Palette Choice

A perfectly harmonious palette applied in equal thirds will still feel chaotic. The 60-30-10 distribution — 60% dominant color (background, large surfaces), 30% secondary (cards, sections, supporting UI), 10% accent (CTAs, badges, active states) — is the standard proportion that keeps interfaces visually grounded. Most design system documentation specifies which tokens map to which ratio: primary-50 for backgrounds, primary-600 for interactive elements, primary-900 for text, and one high-contrast accent for action triggers.

A practical example: a dashboard built with an analogous blue palette uses slate-50 for the page background (60%), slate-100 for cards and panels (30%), and blue-600 for buttons and active states (10%). The same palette applied as 33/33/34 would make every section visually equal — the user's eye has nowhere to rest and no clear hierarchy.

Building Tonal Scales for Design Systems

Modern UI design systems don't stop at one value per color. They define tonal scales of 8–12 steps from very light tints to very dark shades. Tailwind CSS's default palette demonstrates this well: blue-50 through blue-950 gives 11 distinct steps for backgrounds, borders, text, and icons across light and dark modes.

To build a consistent tonal scale, adjust HSL lightness in roughly even steps while keeping hue constant. In practice, slight saturation tweaks at the extremes — desaturating very light tints, slightly boosting saturation in the mid-range — produce more natural-looking scales. The OKLCH color space makes this more predictable: its lightness values are perceptually uniform, meaning each step feels equally different to the human eye, unlike HSL where lightness steps can feel uneven across the spectrum.

Common pitfall: Don't just darken your primary color by mixing in black. That produces muddy, lifeless shades. Instead, shift the hue slightly darker and boost saturation a touch — real shadows in the physical world aren't just darker versions of the lit surface, they shift in hue too. Look at how Material Design handles their tonal palettes: each step isn't just a lightness adjustment, it's a carefully tuned color.

Using Palette Colors in CSS and Tailwind

In vanilla CSS, define palette colors as custom properties in :root and reference them everywhere. This centralizes theme changes — dark mode becomes a single [data-theme="dark"] block that swaps variable values. A typical definition: --color-primary-100: #ede9fe; --color-primary-500: #4f46e5; --color-primary-900: #312e81;. Reference them as color: var(--color-primary-500) throughout your stylesheets.

In Tailwind CSS, add your palette to tailwind.config.js under theme.extend.colors. Each key becomes a utility family — brand-500 generates text-brand-500, bg-brand-100, border-brand-200, and ring/shadow/fill variants automatically. One common mistake is importing your palette at the top level without the extend key — this replaces all of Tailwind's defaults instead of adding alongside them, which breaks everything.

Accessibility — Contrast Ratios Your Palette Must Meet

WCAG 2.1 requires a minimum contrast ratio of 4.5:1 for normal text (under 18pt) and 3:1 for large text (18pt+ bold, or 24pt+ regular) against its background. Non-text UI components like buttons and form inputs need 3:1 against adjacent colors. These aren't suggestions — they're legal requirements in many jurisdictions and affect whether your site is usable by people with low vision.

The most common mistake: using a light accent color as text on a white background. A generated palette might include a beautiful soft blue as a tertiary color, but if that blue's contrast against white is only 2.8:1, it fails WCAG for body text. Always verify every foreground-background combination you actually use in the interface. Browser DevTools now includes a built-in contrast checker in the CSS pane — click any color value and it shows the ratio against the computed background.

Frequently Asked Questions About Color Palettes