Skip to content
KuponGuru

Color Palette Generator

Complementary, analogous, triadic and more from one color, plus a 50–950 shade scale to export as CSS or Tailwind.

FreeRuns in your browser

About the Color Palette Generator

Start from one color and build a palette around it: complementary, analogous, triadic, split-complementary, tetradic or monochromatic. Pick any color in it to generate a full 50–950 shade scale in OKLCH, marked with which shades are readable on white or black, and export it as CSS variables, a Tailwind CSS v4 theme or JSON.

How to use it

  1. 1Enter your base color, or generate a random one.
  2. 2Choose a harmony and pick which color to build a shade scale from.
  3. 3Name the token and copy or download the CSS, Tailwind or JSON.

Questions

How is the 50–950 shade scale made?

In OKLCH, so equal steps look equal to the eye. The lightness of each step follows Tailwind CSS v4's default palette, chroma tapers towards white and black, and any shade that would fall outside the sRGB range loses a little chroma rather than changing its hue or lightness.

Can I use the palette in Tailwind CSS?

Yes. The Tailwind export is an @theme block for Tailwind CSS v4: paste it into your main CSS file and classes such as bg-brand-500 and text-brand-900 work straight away.

Is my text uploaded or stored?

No. The tool runs in this browser tab. What you paste is never sent to KuponGuru, and it is gone when you close the tab.

Related tools

NewFree

Color Contrast Checker

Check text and background colors against WCAG AA and AAA, preview them, and get the nearest color that passes.

DesignUse tool
NewFree

Color Converter

Convert any color between HEX, RGB, HSL, OKLCH, HSV and CMYK — type it the way you have it, copy it the way you need it.

DesignUse tool
NewFree

CSS Gradient Generator

Linear, radial and conic gradients with up to eight color stops, a live preview, and CSS or Tailwind to copy.

DesignUse tool

Looking for something else? Browse every tool.