How is the base color used?

It's used as the anchor hue; other colors are derived by rotating hue or adjusting lightness on the HSL wheel.

Can I export for Tailwind?

Yes. Tailwind v4 gives you an @theme block for your CSS entry file, and Tailwind v3 gives you a ready-to-paste colors object for tailwind.config.js.

Does it create a dark theme too?

Yes. Turn on 'Light + dark theme' and you get both token sets, with a .dark class block and a prefers-color-scheme fallback in the CSS export.

Are the text colors readable?

Foreground colors on primary and similar surfaces are picked by comparing contrast against black and white, so the stronger option always wins.

What's the difference between triadic and tetradic?

Triadic uses three colors spaced 120° apart; tetradic uses four spaced 90° apart on the hue wheel.

Palette Generator

Build palettes and export a full light + dark theme as CSS variables or Tailwind tokens.

Support

Works Offline

Privacy First

No Login

No API

Base color

Scheme

Export as

Token name

Light + dark theme

Palette

#6366f1

#f1ee63

Shade scale (50 – 950)

Click a swatch to copy its hex value.

Theme preview

Light

PrimarySecondaryAccentDestructive

background

foreground

primary

secondary

muted

accent

destructive

border

Dark

PrimarySecondaryAccentDestructive

background

foreground

primary

secondary

muted

accent

destructive

border

Export

:root {
  --color-brand-50: #f3f3fc;
  --color-brand-100: #e6e7f9;
  --color-brand-200: #bdbff9;
  --color-brand-300: #9395f5;
  --color-brand-400: #6063f1;
  --color-brand-500: #2c30ec;
  --color-brand-600: #1317d7;
  --color-brand-700: #1013b2;
  --color-brand-800: #0d0f8c;
  --color-brand-900: #111364;
  --color-brand-950: #0b0c41;

  --background: #fcfcfd;
  --foreground: #171726;
  --card: #ffffff;
  --card-foreground: #171726;
  --popover: #ffffff;
  --popover-foreground: #171726;
  --primary: #1418e1;
  --primary-foreground: #ffffff;
  --secondary: #efeff5;
  --secondary-foreground: #262740;
  --muted: #f3f3f7;
  --muted-foreground: #5e5f78;
  --accent: #f3f2e2;
  --accent-foreground: #20213c;
  --destructive: #dc2626;
  --destructive-foreground: #ffffff;
  --border: #dddee9;
  --input: #dddee9;
  --ring: #1418e1;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #101019;
    --foreground: #f3f3f6;
    --card: #161722;
    --card-foreground: #f3f3f6;
    --popover: #161722;
    --popover-foreground: #f3f3f6;
    --primary: #4d51ef;
    --primary-foreground: #ffffff;
    --secondary: #242433;
    --secondary-foreground: #edeef2;
    --muted: #22232f;
    --muted-foreground: #9e9eb3;
    --accent: #605f2e;
    --accent-foreground: #f0f0f4;
    --destructive: #f87171;
    --destructive-foreground: #14151f;
    --border: #2b2b3b;
    --input: #2b2b3b;
    --ring: #4d51ef;
  }
}

.dark {
  --background: #101019;
  --foreground: #f3f3f6;
  --card: #161722;
  --card-foreground: #f3f3f6;
  --popover: #161722;
  --popover-foreground: #f3f3f6;
  --primary: #4d51ef;
  --primary-foreground: #ffffff;
  --secondary: #242433;
  --secondary-foreground: #edeef2;
  --muted: #22232f;
  --muted-foreground: #9e9eb3;
  --accent: #605f2e;
  --accent-foreground: #f0f0f4;
  --destructive: #f87171;
  --destructive-foreground: #14151f;
  --border: #2b2b3b;
  --input: #2b2b3b;
  --ring: #4d51ef;
}

About the Palette Generator

Pick a base color and generate complementary, analogous, triadic, tetradic or monochromatic palettes. Every palette also produces a 50-950 shade scale and a complete light and dark theme — background, foreground, primary, secondary, muted, accent, destructive, border, input and ring — with readable text colors chosen by contrast. Export as CSS custom properties, Tailwind v4 @theme, a Tailwind v3 config object, SCSS variables or JSON design tokens.

Examples

Complementary from indigo

#6366f1

Output

#6366f1, #a9a663

Keyboard shortcuts

Copy the main outputCtrl / ⌘ + Shift + C
Download the resultCtrl / ⌘ + S
Share this toolCtrl / ⌘ + Shift + S
Reset the inputsAlt + R
Open the tool search paletteCtrl / ⌘ + K

Related tools

Color Blindness Simulator

Color

Simulate how a palette looks with common color vision deficiencies.

Color Converter

Color

Convert colors between HEX, RGB, HSL, HWB, OKLCH and CMYK.

Color Mixer

Color

Blend two colors with a ratio slider and preview CSS blend modes.

Contrast Checker

Color

Check WCAG 2.1 contrast ratio between two colors.

Gradient Palette Extractor

Color

Extract and normalize colors from CSS gradients or lists.

Hex to SwiftUI & UIColor Converter

Color

Turn a hex color into SwiftUI, UIKit and asset catalog code.

Frequently asked questions

From one brand colour to a full light and dark theme
How a single hex value becomes a 50-950 shade scale and a complete light and dark token set — and how to export it as CSS variables or Tailwind theme tokens.

Comments

No login needed. Comments appear after a quick review.

Loading comments…

Version 2.0.0 · Updated 2026-09-10 · Runs entirely in your browser

Palette Generator

About the Palette Generator

Examples

Keyboard shortcuts

Related tools

Color Blindness Simulator

Color Converter

Color Mixer

Contrast Checker

Gradient Palette Extractor

Hex to SwiftUI & UIColor Converter

Frequently asked questions

How is the base color used?

Can I export for Tailwind?

Does it create a dark theme too?

Are the text colors readable?

What's the difference between triadic and tetradic?

Read more

Comments