NM
All Tools/Color Palette Generator & Extractor

// Design Tools

Color Palette
Generator & Extractor

Shade scales, curated palettes, and image color extraction — all in one place.

#FF3D00

rgb(255,61,0)

hsl(14,100%,50%)

−30°

· Pink

−15°

· Red

Base

· Red Orange

+15°

· Orange

+30°

· Orange

400
AAAAA
500
AAAAA
600
AAAAA
700
AAAAA
800
AAAAA
900
AAAAA
950
AAAAA

// Export

:root {
  --color-primary-30-50: #f8f7f7;
  --color-primary-30-100: #f1e9eb;
  --color-primary-30-200: #e9c8d1;
  --color-primary-30-300: #e892a9;
  --color-primary-30-400: #f14674;
  --color-primary-30-500: #ff0044;
  --color-primary-30-600: #cc0036;
  --color-primary-30-700: #98062d;
  --color-primary-30-800: #650b23;
  --color-primary-30-900: #3a0e19;
  --color-primary-30-950: #210d12;
  --color-primary-15-50: #f8f7f7;
  --color-primary-15-100: #f1e9e9;
  --color-primary-15-200: #e9c8c9;
  --color-primary-15-300: #e89293;
  --color-primary-15-400: #f14649;
  --color-primary-15-500: #ff0004;
  --color-primary-15-600: #cc0003;
  --color-primary-15-700: #980609;
  --color-primary-15-800: #650b0d;
  --color-primary-15-900: #3a0e0e;
  --color-primary-15-950: #210d0d;
  --color-primary-base-50: #f8f7f7;
  --color-primary-base-100: #f1ebe9;
  --color-primary-base-200: #e9d0c8;
  --color-primary-base-300: #e8a692;
  --color-primary-base-400: #f16e46;
  --color-primary-base-500: #ff3c00;
  --color-primary-base-600: #cc3000;
  --color-primary-base-700: #982806;
  --color-primary-base-800: #65200b;
  --color-primary-base-900: #3a180e;
  --color-primary-base-950: #21120d;
  --color-primary-15-50: #f8f7f7;
  --color-primary-15-100: #f1ede9;
  --color-primary-15-200: #e9d8c8;
  --color-primary-15-300: #e8bb92;
  --color-primary-15-400: #f19946;
  --color-primary-15-500: #ff7b00;
  --color-primary-15-600: #cc6300;
  --color-primary-15-700: #984d06;
  --color-primary-15-800: #65370b;
  --color-primary-15-900: #3a230e;
  --color-primary-15-950: #21170d;
  --color-primary-30-50: #f8f8f7;
  --color-primary-30-100: #f1efe9;
  --color-primary-30-200: #e9e0c8;
  --color-primary-30-300: #e8d192;
  --color-primary-30-400: #f1c346;
  --color-primary-30-500: #ffbb00;
  --color-primary-30-600: #cc9600;
  --color-primary-30-700: #987106;
  --color-primary-30-800: #654d0b;
  --color-primary-30-900: #3a2e0e;
  --color-primary-30-950: #211c0d;
}

Click any swatch to copy hex · Press Space to randomize

// How It Works

Generate a palette in seconds

01

Pick a base color

Use the color picker or type any HEX value. The tool builds a full 11-shade scale from near-white to near-black — just like Tailwind's built-in palettes.

02

Choose a harmony

Select Complementary, Analogous, Triadic, Split-Complementary, or Monochromatic. Each generates a complete multi-color system built on color theory.

03

Export your system

Copy as CSS custom properties, a Tailwind config object, or SCSS variables. One click — paste directly into your project.

// FAQ

Frequently asked questions

Is the Color Palette Generator free to use?

Yes — completely free with no account, no watermarks, and no limits on how many palettes you generate or export.

What is a color harmony?

A color harmony is a set of rules for combining colors in a visually pleasing way. Complementary pairs opposite hues for high contrast. Analogous groups neighboring hues for a calm, cohesive feel. Triadic uses three equally spaced hues for a vibrant, balanced look. Split-complementary is a softer alternative to complementary. Monochromatic uses a single hue at different lightness levels.

What is the 11-shade scale?

Each base color is expanded into 11 shades (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950) — exactly matching the structure used by Tailwind CSS. This gives you a full range from near-white to near-black, ready to use in any design system.

How do I extract colors from an image?

Switch to the 'Extract from Image' tab, then drop or upload any JPG, PNG, or WebP image. The tool samples the image pixels and returns the most dominant distinct colors in the image.

What export formats are available?

You can copy your palette as CSS custom properties (--color-primary-500: #hex), a Tailwind CSS config object (ready to paste into tailwind.config.js), or SCSS variables ($color-primary-500: #hex). Each format is one-click copy.

Can I use the generated colors in commercial projects?

Yes — the generated colors are yours to use in any personal or commercial project without attribution.

What is the difference between HEX, RGB, and HSL?

HEX (#FF3D00) is the most common format for web — it's compact and universally supported. RGB (rgb(255, 61, 0)) is useful when you need to manipulate color channels in CSS or JavaScript. HSL (hsl(14, 100%, 50%)) is the most human-readable — Hue (0–360°), Saturation (%), and Lightness (%) — great for making programmatic adjustments like lightening or darkening.