Color Scheme Generator

Choose a base color and a harmony rule, then press Generate. You get a matching palette with the best text color for each swatch, tints and shades of the base, and code to copy in eight formats.

Try a base color

About this color scheme generator

Color harmony rules pick colors by their position on the color wheel, which is why the results tend to look good together. This generator turns your base color into HSL, rotates the hue by the angles of the chosen rule, and keeps the saturation and lightness, so the palette shares the mood of the base color. Each swatch shows whether white or black text reads better on it, using the WCAG 2.1 contrast ratio. Five tints and five shades of the base color are added for backgrounds, borders, and hover states, and the whole palette can be copied as plain values, CSS or SCSS variables, or a Tailwind CSS colors entry.

How to create a color scheme

  1. Choose a base color. Type a hex code or other color value, use the picker, or press one of the example colors, such as your brand color.
  2. Pick a harmony rule. Choose complementary, analogous, triadic, split complementary, square, tetradic, or monochromatic. A short note explains each rule.
  3. Generate and export. Press Generate scheme, click any swatch to copy its hex code, and choose an export format to copy the whole palette as code.

Frequently asked questions

Which harmony rule should I use?

Monochromatic and analogous palettes are the safest for calm interfaces. Complementary gives one strong accent color, while triadic and square palettes are lively and work best when one color leads and the others are used sparingly.

Is my base color always in the palette?

Yes. Your exact base color is always one of the swatches (the middle one for analogous and monochromatic schemes), and the others are calculated from it, so you can build around an existing brand color.

What does white text 4.83:1 under a swatch mean?

It tells you which text color reads better on that swatch and the contrast ratio it reaches. A value of 4.5:1 or more passes WCAG AA for normal text.

How do I use the Tailwind config export?

Paste it inside theme.extend in tailwind.config.js. The colors become classes such as bg-palette-100 and text-palette-200, numbered in the order of the swatches.

What are the RGB and HSL channel formats for?

They list the numbers without the rgb() or hsl() wrapper, such as 37 99 235. This format is handy for CSS variables used with an opacity value, like rgb(var(--brand) / 50%).