Color Palette Generator

Generate Tailwind-style color shades and color harmonies from any HEX color.

:root {
  --color-50: #F1F6FD;
  --color-100: #DFEAFB;
  --color-200: #BAD2F7;
  --color-300: #83ADF1;
  --color-400: #518CEC;
  --color-500: #4786EB;
  --color-600: #1968E6;
  --color-700: #1453B8;
  --color-800: #0F3E8A;
  --color-900: #0A295C;
}

Frequently Asked Questions

What is a color palette generator?

It takes a base color and generates a full range of shades (50–900, similar to Tailwind) and color harmonies (complementary, triadic, analogous).

Can I export the palette as CSS?

Yes. In Shades mode, click 'Copy CSS' to get CSS custom properties (--color-50 through --color-900) ready to paste into your stylesheet.

What color harmonies are available?

Complementary, triadic (×2), analogous (×2), and split-complementary (×2) — 8 swatches total in Harmony mode.

How do I pick the base color?

Use the color picker or type a HEX code (e.g. #3B82F6) directly into the text input.

How Color Shade Systems Work

Design systems like Tailwind CSS, Material Design, and IBM Carbon define colors in a shade scale from very light (50) to very dark (900 or 950). Each step is generated by adjusting the lightness channel in the HSL or OKLCH color space while keeping hue and saturation relatively stable.

Shade 500 (the “500” step) is typically close to the original input color. Shades 50–200 are used for backgrounds and hover states; shades 600–900 are used for text and borders.

Color Harmony Reference

HarmonyWheel offsetFeelCommon use
Complementary180°High contrast, boldCalls-to-action, sports brands
Analogous±30° on each sideHarmonious, calmNature themes, backgrounds
Triadic120° apart (3 hues)Vibrant, balancedChildren's products, art
Split-complementary150° + 210°Contrast without tensionUI design, web apps

Using Exported CSS Custom Properties

Copy the generated CSS variables and paste them into your global stylesheet:

:root {
  --color-50: #eff6ff;
  --color-100: #dbeafe;
  --color-500: #3b82f6; /* Base color */
  --color-900: #1e3a5f;
}

.button-primary {
  background-color: var(--color-500);
  color: var(--color-50);
}
.button-primary:hover {
  background-color: var(--color-600);
}