DailyDeskTools home

Color Palette Generator

Build shade scales and harmonious palettes from one color, then export them as CSS or Tailwind.

  • Free forever
  • No signup
  • Runs on your device
Color Palette GeneratorRuns locally · nothing uploaded
Loading tool…

How to use the color palette generator

  1. 1Pick a base color, or press Random (or the space bar) for inspiration.
  2. 2Choose a harmony: Shades for a design system scale, or a color wheel harmony.
  3. 3Hover a color and press the lock to keep it while you try other options.
  4. 4Click any color to copy its HEX value.
  5. 5Export the palette as CSS variables, a Tailwind theme or a plain HEX list.

Perceptual color, evenly spaced

Palettes are built in OKLCH, a color space designed around how people see. Steps of equal lightness in OKLCH look equally different to the eye, so a shade scale moves smoothly from light to dark without sudden jumps, and colors rotated around the wheel feel balanced in brightness.

Generated colors are kept inside the range normal screens can show, so what you copy matches what you see.

Harmony modes

  • Shades builds an 11-step scale from 50 (lightest) to 950 (darkest), the format used by Tailwind and many design systems.
  • Analogous uses neighbouring hues for calm, cohesive palettes.
  • Complementary pairs a color with its opposite for strong contrast.
  • Split uses the two hues either side of the complement: vivid but easier to balance.
  • Triadic and Tetradic space three or four hues evenly around the wheel for playful, colorful schemes.
  • Monochrome varies only lightness and saturation of one hue.

Using a palette

A common pattern is one main brand color, one accent from the harmony, and a neutral scale for text and backgrounds. Check text colors with the Contrast Checker before using them in a design.

Frequently asked questions

How do I make a shade scale like Tailwind's?

Choose your brand color and the Shades mode. Export as Tailwind to get a 50 to 950 scale ready to paste into your theme.

Why use OKLCH instead of HSL?

HSL lightness does not match how bright colors actually look, so yellows and blues at the same HSL lightness look very different. OKLCH keeps perceived lightness consistent.

Can I keep a color while changing the others?

Yes. Lock it with the padlock button. Locked colors stay put when you change the base color or press Random.

Can I use the palettes commercially?

Yes. Color values cannot be owned, so use them in any project.

Last updated