Color Palette Generator

Pick a base color to instantly generate harmony palettes and a full 50–950 shade scale with HEX, RGB, HSL, and CSS variables — entirely in your browser.

Base Color

#6366F1

Harmony

ComplementaryAnalogousTriadicTetradic

Shade Scale (50–950)

CSS Variables

:root {
  --color-50: #f6f6fe;
  --color-100: #e8e8fd;
  --color-200: #cbccfb;
  --color-300: #a1a3f7;
  --color-400: #5f62f1;
  --color-500: #2226ec;
  --color-600: #1216d3;
  --color-700: #0f12ae;
  --color-800: #0d0f91;
  --color-900: #0a0c75;
  --color-950: #07084b;
}

Copy as Tailwind

Name

@theme {
  --color-brand-50: #f6f6fe;
  --color-brand-100: #e8e8fd;
  --color-brand-200: #cbccfb;
  --color-brand-300: #a1a3f7;
  --color-brand-400: #5f62f1;
  --color-brand-500: #2226ec;
  --color-brand-600: #1216d3;
  --color-brand-700: #0f12ae;
  --color-brand-800: #0d0f91;
  --color-brand-900: #0a0c75;
  --color-brand-950: #07084b;
}

Paste into your main CSS file after @import "tailwindcss"; to get classes like bg-brand-500 and text-brand-900.

Tailwind Color Generator: A 50–950 Shade Scale from One Color

Tailwind CSS defines every color as a scale of 11 steps, from 50 (almost white) to 950 (almost black), with 500 as the mid tone. Building that scale by hand for a brand color is slow: you have to guess each tint and shade, then check that the steps look even. This Tailwind shades generator builds it from a single HEX value.

Enter your brand color above. The generator keeps its hue and saturation and gives each stop a fixed lightness, so 50–200 suit backgrounds, 500–600 suit buttons and links, and 800–950 suit text. Give the color a name such as brand or primary, then copy it in the format your project uses:

Tailwind v4: an @theme block with --color-brand-50 through --color-brand-950, pasted into your CSS file.
Tailwind v3: a colors object for theme.extend in tailwind.config.js.

Either way, utilities such as bg-brand-100, text-brand-700, and ring-brand-500 work straight away. Before you use a shade for text, test the pair in the Contrast Checker to confirm it meets WCAG AA.

How to generate a color palette

Pick a base color with the color picker, or type a HEX value such as #6366f1.
Choose a harmony mode — Complementary, Analogous, Triadic, or Tetradic.
Copy any swatch by clicking it, or copy the full 50–950 shade scale as ready-to-use CSS variables.

Everything runs entirely in your browser — no color data is ever uploaded to a server.

Frequently Asked Questions

How do I generate a color palette from one color?↓

Enter a base color as a HEX value or use the color picker, then choose a harmony mode. The tool rotates the base color's hue on the color wheel to produce complementary (+180°), analogous (±30°), triadic (±120°), or tetradic (±90°) colors that work well together.

What is a Tailwind color shade scale?↓

A Tailwind shade scale is a set of 11 tints and shades of one color, numbered 50 (lightest) through 950 (darkest), with 500 as the base. This generator keeps your base color's hue and saturation and varies its lightness to build the full 50–950 scale automatically.

How do I generate a Tailwind color palette from one color?↓

Enter your brand color as a HEX value, type a name such as brand or primary in the Copy as Tailwind box, and pick v4 or v3. The generator builds the 11-step 50–950 scale and gives you code that enables classes like bg-brand-500 and text-brand-900.

How do I add custom colors in Tailwind CSS v4?↓

Tailwind v4 is configured in CSS. Add an @theme block after @import "tailwindcss"; and define variables such as --color-brand-500: #6366f1;. Each --color-* variable creates matching bg-, text-, border-, and ring- utilities. Choose v4 @theme in this tool to copy the whole block.

How do I add a custom color scale in Tailwind CSS v3?↓

In Tailwind v3, add the scale under theme.extend.colors in tailwind.config.js, for example colors: { brand: { 50: '#eef2ff', ..., 950: '#1e1b4b' } }. Using extend keeps Tailwind's default colors available. Choose v3 config in this tool to copy a ready-made object.

What are complementary, analogous, and triadic colors?↓

Complementary colors sit opposite each other on the color wheel (180° apart) for high contrast. Analogous colors are neighbors (about 30° apart) for a harmonious look. Triadic colors are evenly spaced 120° apart for a balanced, vibrant scheme.

Can I export the palette as CSS variables?↓

Yes. The generator outputs a ready-to-paste :root block of CSS custom properties (for example --color-500: #6366f1;) covering the full shade scale, which you can copy with one click and drop into your stylesheet.

Is this color palette generator free and private?↓

Yes. It is completely free with no signup, and it runs 100% locally in your browser. Your colors are never uploaded to or stored on any server.

Last updated: October 4, 2026