Palette Generator

Generate complementary, analogous, triadic, tetradic, split-complementary, and monochromatic palettes from one base color, plus tints, shades, and tones.

Overview

Palette Generator builds a full set of matching colors from one base: six classic harmony types (complementary, analogous, triadic, tetradic, split-complementary, monochromatic) plus tints, shades, and tones. Every palette is generated in OKLCH rather than plain HSL so the steps look evenly spaced to the eye. Copy any swatch instantly, or open the result in the Color Editor to check accessibility and export it as CSS variables or a Tailwind-style scale.

Key Features

  • Six harmony types: complementary, analogous, triadic, tetradic, split-complementary, monochromatic
  • Tints, shades, and tones generated from your base color
  • Perceptually even steps — palettes are generated in OKLCH, not plain HSL
  • One-click copy for every swatch
  • Deeplinkable via ?base= and ?type= URL parameters
  • Link into the Color Editor for accessibility-checked palettes

Common Use Cases

  • Starting a new brand palette — Turn one primary brand color into a full complementary or analogous scheme to explore.
  • Building a UI color scale — Generate tints and shades of a base color for hover states, borders, and backgrounds.
  • Exploring color-scheme ideas — Quickly compare triadic vs. split-complementary options for the same base color.

How It Works
1

Pick a base color

Enter or pick the color you want to build a palette from.

2

Choose a harmony type

Pick complementary, analogous, triadic, tetradic, split-complementary, or monochromatic.

3

Copy your palette

Copy any swatch's hex value, or the generated tints, shades, and tones underneath.

Frequently Asked Questions

What's the difference between a tint, a shade, and a tone?
A tint mixes your color toward white (lighter, less saturated), a shade mixes it toward black (darker), and a tone mixes it toward gray (desaturated at the same lightness).

Why do the palettes look more even than a typical HSL-based generator?
Harmonies and tint/shade/tone ramps are generated by stepping through OKLCH — a perceptually uniform color space — rather than plain HSL, so lightness and hue steps look consistent rather than one swatch appearing much brighter or duller than its neighbors.

Can I check if my palette is accessible?
Yes — see Accessible Palette Generator for a version of this tool that checks every generated color against a background for WCAG contrast, or open your palette in the Color Editor's Accessibility panel.

Can I link to a specific palette?
Yes — /tools/color/palette-generator?base=%233366ff&type=analogous opens with that base color and harmony type already selected.

Related Tools

Accessible Palette Generator Accessible Text Color Finder Brand Palette Accessibility Checker Color Blindness Simulator Color Converter Color Editor