Free Tools Grid

Color Palette Generator

Design Tools

Generate a harmonious color palette from a single base color using color-theory schemes. Export as CSS variables, Tailwind config, or a hex list.

Runs entirely in your browser
Loading tool...

About Color Palette Generator

Color theory turns picking a palette from a guessing game into a principled exercise. Pick a base color, choose a relationship (complementary, triadic, analogous, etc.), and you get a palette where every color has a defined mathematical relationship to your starting point — which is what makes it feel coherent rather than random.

This tool implements six classic schemes. Complementary uses the color directly opposite on the wheel for maximum contrast. Triadic and tetradic use evenly spaced colors for balanced palettes. Analogous picks neighbors for soft, low-contrast palettes. Monochromatic produces lightness variations of a single hue for tonal systems. Each swatch shows hex and HSL with an auto-chosen text color for contrast. Export the palette as CSS variables (drop into `:root`), a Tailwind config theme block, or a plain hex list. Color math runs locally.

How to use

  1. 1

    Pick a base color

    Use the color picker to choose your starting hue, or paste a hex code into the field below it.

  2. 2

    Choose a scheme

    Select Complementary, Split-complementary, Triadic, Tetradic, Analogous, or Monochromatic from the Scheme dropdown.

  3. 3

    Click swatches to copy

    Each generated swatch is clickable — clicking copies its hex value. The label color automatically inverts for readability.

  4. 4

    Pick an export format

    Switch between CSS variables, Tailwind config, or Hex list tabs. Each has its own Copy button.

Examples

Complementary palette from sky blue

Base + the color directly opposite on the wheel — maximum contrast.

Output

#0ea5e9, #e95c0e

CSS variable export

Drop into `:root` and reference as `var(--color-1)`, etc.

Output

:root {
  --color-1: #0ea5e9;
  --color-2: #e95c0e;
}

Tailwind theme export

Paste into tailwind.config.ts to extend the theme.

Output

theme: {
  extend: {
    colors: {
      brand-1: "#0ea5e9",
      brand-2: "#e95c0e",
    },
  },
},

Frequently asked questions

Which scheme should I pick for a website?+

Analogous schemes (neighbors on the wheel) feel calm and unified — good defaults for content sites. Complementary pairs are great for accent colors (CTAs, badges). Monochromatic is excellent for design systems where you need many shades of one color.

How are the colors actually calculated?+

The base hex is converted to HSL. Each scheme uses fixed hue offsets — complementary adds 180°, triadic adds 120° and 240°, analogous adds ±30°, and so on. Monochromatic varies lightness while keeping hue and saturation fixed.

Why does the swatch text change color?+

We calculate WCAG contrast against white and pick dark or light text whichever gives better readability — so labels stay legible across the full hue range.

Can I save a palette?+

Palettes aren't yet persisted across sessions. For now, copy the export and save it in your design tokens file or project.

Will the palette pass accessibility?+

Color theory ensures harmony, not contrast. For accessible text-on-background combinations, validate each pair against WCAG AA (4.5:1 for body text). A dedicated contrast checker is a good next step.

Related tools

CSS Gradient Generator

Design linear, radial, and conic CSS gradients with a live preview.

Box Shadow Generator

Build multi-layer CSS box-shadow styles with offset, blur, and spread controls.

Flexbox Playground

Experiment with Flexbox container and item properties visually.

Border Radius Generator

Create custom rounded corners with per-corner control and squircle presets.