Color Palette Generator

How the color palette generator builds a color scheme

Every palette starts from one base color. The generator turns that color around a color wheel by fixed angles, the classic rules of color harmony, and adds lighter and darker versions where a harmony has fewer than five colors. What makes the result look balanced is the color space it works in.

The simplest way to build harmonies is to turn the hue in HSL, the hue, saturation and lightness model of CSS. But HSL lightness is plain math, not perception: hsl(60, 100%, 50%) yellow and hsl(240, 100%, 50%) blue share 50% lightness, yet the yellow looks far brighter, and OKLCH rates them at 97% and 45% lightness. Harmonies built in HSL mix colors that jump out with colors that sink.

This tool works in OKLCH, the polar form of Oklab, a color space Björn Ottosson published in 2020 to predict how light, colorful and which hue a color looks. OKLCH has three values: lightness L from 0 to 100%, chroma C for how colorful it is, and hue H in degrees. Two colors with the same L look about equally light, whatever their hue. So the harmony colors keep the lightness and chroma of your base and only the hue changes, which gives every color in the palette the same visual weight.

One limit remains: HEX and RGB can only store colors inside sRGB, and some hues cannot be as colorful as others at a given lightness. When a harmony color falls outside sRGB, the generator keeps its lightness and hue and lowers only the chroma until it fits. Every color you copy is a real, displayable color.

Color harmonies at a glance

The angles are hue steps on the OKLCH wheel, measured from the base color. The example palettes below all start from #2A9D8F and come from the same code as the tool.

• Complementary pairs colors from opposite sides of the wheel. It gives the strongest contrast, so let one color lead and use the other sparingly, for example on a single button.
• Analogous uses neighbors 30 degrees apart. The colors blend easily, which suits calm brands, photography sites and illustrations.
• Triadic spaces three hues evenly, 120 degrees apart. It stays colorful and balanced, and works best when one hue dominates.
• Split complementary swaps the single opposite for the two hues next to it. You keep strong contrast with less tension.
• Tetradic, also called rectangle, combines two complementary pairs. Four distinct hues are great for charts and rich palettes but need a clear leader.
• Monochromatic keeps one hue and changes only the lightness. It is the safest choice and looks calm and elegant.

Shades and tints from 50 to 950

A design system needs more than one lightness of each color: a light tint for backgrounds, a mid tone for buttons and dark shades for text. Tailwind CSS names these steps from 50 to 950: every color in its default palette has 11 steps, with 50 the lightest and 950 the darkest.

The Shades and tints mode builds such a scale. Your color sits at the step closest to its lightness, the lighter steps climb in equal OKLCH lightness steps to an almost white 50, and the darker steps go down to 950. Chroma fades toward white, so the tints stay soft and usable as backgrounds. Here is the scale for #2563EB, with its contrast against white and black text:

Check contrast before you ship

A palette that looks great can still be hard to read. WCAG 2, the Web Content Accessibility Guidelines, ask for a contrast ratio of at least 4.5:1 for normal text at level AA and 3:1 for large text, which means at least 18 point or 14 point bold. Level AAA raises that to 7:1 and 4.5:1.

The table under the palette checks every color with white and black text. AA large means the pair passes only for large text. A practical rule of thumb: use the colors that pass with white text for buttons and dark surfaces, and the ones that pass with black text for light backgrounds and badges. For any other pair, such as text in one palette color on another, use the Color Contrast Checker.

Exporting your palette

• CSS variables go into :root, ready for var(--brand-1) anywhere in your stylesheet.
• Tailwind 4 gives an @theme block. Tailwind 4 reads custom colors from the --color- namespace, so --color-brand-500 becomes classes like bg-brand-500 and text-brand-500.
• Tailwind 3 gives a colors object for theme.extend in tailwind.config.js, which adds your palette next to the default colors.
• JSON lists each color with its name, role, HEX, RGB, HSL and OKLCH value, handy for design tokens and scripts.
• HEX list puts one code per line, handy for design apps, documents and brand guides.
• PNG downloads a swatch image with the HEX codes for mood boards and presentations.

The values switch lets you write the CSS and Tailwind code as HEX, RGB, HSL or OKLCH. The oklch() function has worked across all major browsers since May 2023, so OKLCH values are a safe choice for modern sites. To convert a single color into more formats, use the Color Converter.

Tips for a palette that works

• Pick one leader. Let the base color carry the brand and use the other colors as accents for buttons, highlights and charts.
• Add neutrals. Your palette also needs colors for text, surfaces and borders. Run your base through Shades and tints, or pick a gray with a hint of your hue as a new base and use its light and dark steps.
• Vary the lightness. If a palette feels flat, press Space a few times. Generate varies the lightness and chroma of the harmony colors while keeping their hues.
• Test in context. Try the palette on real buttons, cards and backgrounds in a quick mockup, or blend two colors in a CSS gradient, before you commit.
• Save the link. Copy link stores the base, the harmony, the variations and your locked colors in the URL, so you can come back to the exact palette or share it with your team.

How to use the color palette generator

1. 1Enter your base color as HEX, RGB, HSL or OKLCH, or choose it with the color picker.
2. 2Choose a harmony: complementary, analogous, triadic, split complementary, tetradic, monochromatic, or shades and tints for a 50 to 950 scale.
3. 3Lock the colors you like and press Space or Generate to vary the rest. Undo goes back one step.
4. 4Check the text contrast table, then export the palette as CSS variables, Tailwind, JSON or a HEX list, download a PNG or copy a link.

Frequently asked questions