🎨 Color Palette Generator

Generate beautiful color palettes for your designs. Get hex codes, RGB, HSL values and export as CSS or image.

Palette Type

Base Color

What is the Color Palette Generator?

This tool builds a five-color palette from a single base color you pick, using real color theory rather than guesswork. Choose a scheme type — random, monochromatic, complementary, analogous, triadic, or shades — and it calculates matching hex, RGB, and HSL values for each swatch instantly.

How to Use It

Pick a base color with the color picker, then choose a palette type from the dropdown. The five-swatch preview and the code panel below update immediately. Click any swatch to copy its hex code, or use the buttons to copy the whole palette as CSS custom properties or as JSON for use in code.

When to Use It

Use it when starting a new website or app design and you need a coordinated color scheme, when building a brand style guide, or when you have one brand color and need complementary or analogous shades to round out buttons, backgrounds, and accents without clashing.

Who Benefits

Web designers and front-end developers setting up a project's CSS variables, freelancers pitching mockups to clients, and hobbyists building a personal site all get a usable, theory-backed palette in seconds instead of trial-and-error guessing in an image editor.

How Each Palette Is Built

The tool converts your base colour to hue, saturation and lightness (HSL) and then builds five colours from it.

Monochromatic and shades: the same hue and saturation at lightness 10, 30, 50, 70 and 90.
Complementary: your hue at lightness 30, 50 and 70, plus the opposite hue (180° away) at 50 and 70.
Analogous: hues 30° and 15° either side of yours, keeping your saturation and lightness.
Triadic: your hue and the two hues 120° and 240° away, at light and dark lightness.
Random: five unrelated colours, useful only for ideas.

Worked Example

The base #3366CC converts to HSL 220, 60%, 50%. An analogous palette then uses hues 190, 205, 220, 235 and 250 at 60% saturation and 50% lightness, which gives a run from teal-blue to blue-violet. The complementary partner of hue 220 is hue 40, an orange.

Using a Palette Well

Pick one dominant colour, one or two supporting colours and a neutral. Do not give all five equal weight.
Check text contrast. Light text on a light swatch is hard to read, so test your pairs before you use them.
The palettes are a starting point. Adjust by eye for your brand and your screen.

Read the colour palette basics guide for how these schemes are used in design.

Frequently Asked Questions

Complementary colors sit opposite each other on the color wheel and create high contrast, bold combinations — good for calls-to-action and accent colors. Analogous colors sit next to each other and create a calmer, more harmonious look — good for backgrounds and broader UI.

Yes. Use the "Copy as CSS Variables" button to get a ready-to-paste ":root" block with each color as a custom property, or "Copy as JSON" if you're feeding the palette into a design token file or app config.

Both take your base hue and saturation and vary only the lightness, so the colors are technically the same formula — the difference is just the order the swatches are generated in (light-to-dark versus dark-to-light), giving you two ways to preview the same tonal range.