Color Palette Generator

Generate color palettes with harmony rules, lock your favorite swatches, and edit each color. Copy CSS variables, Tailwind themes, JSON, SCSS, or SVG.

Runs locally in your browser

Palette

Press the spacebar to generate a new palette.

base

#0B1F3A

black

surface

#1D6A96

steelblue

primary

#4FB3BF

cadetblue

secondary

#A9D6C3

paleturquoise

accent

#F2E9DC

linen

0 locked

Harmony rule

Edit base

Usable text pairings

Combinations from this palette that clear WCAG AA at 4.5:1. Analogous palettes often need a near-white or near-black to find any.

Readable body text
#0B1F3A on #F2E9DC · 13.74:1
Readable body text
#F2E9DC on #0B1F3A · 13.74:1
Readable body text
#0B1F3A on #A9D6C3 · 10.30:1
Readable body text
#A9D6C3 on #0B1F3A · 10.30:1
Readable body text
#0B1F3A on #4FB3BF · 6.71:1
Readable body text
#4FB3BF on #0B1F3A · 6.71:1
Readable body text
#1D6A96 on #F2E9DC · 4.91:1
Readable body text
#F2E9DC on #1D6A96 · 4.91:1

Export

:root {
  --palette-base: #0B1F3A;
  --palette-surface: #1D6A96;
  --palette-primary: #4FB3BF;
  --palette-secondary: #A9D6C3;
  --palette-accent: #F2E9DC;
}

Complete tool guide

Color Palette Generator guide

Generate a color palette for a website, illustration, or interface using hue relationships such as analogous, complementary, and triadic harmony. Lock colors you want to keep, adjust individual swatches, and export the result as reusable values.

Your input is processed in the current browser tab and is not sent to the application server.

Why use this tool?

Keep approved colors while exploring new combinations.
Compare harmony families and edit each swatch independently.
Export CSS variables, Tailwind v4 themes, SCSS, JSON, or an SVG swatch strip.

Common use cases

Finding a starting palette for a brand, site, or product
Expanding one approved brand color into a working set
Checking which pairs in a palette are safe for text before committing
Exporting tokens straight into CSS, Tailwind, or a design system

How to use it

1
Choose a harmony rule, then press Generate or the spacebar to explore.
2
Lock any swatch you want to keep, and generate again around it.
3
Click a swatch to fine-tune it in the picker.
4
Copy the export format your project uses.

Controls and results explained

Harmony rules

Analogous colors use neighboring hues; complementary colors use opposing hues; triadic colors spread around the hue wheel. These describe relationships, not guaranteed contrast.

Locks and generation

Lock a swatch to preserve it when generating another palette. Generation varies the unlocked colors, so results are exploratory rather than a fixed brand specification.

Role names and exports

Names such as base, surface, and primary are assigned by position for convenience. Review their actual role and contrast before using the exported variables.

Worked examples

Keep a brand color during exploration

Start with: #663399 as an approved brand color

Edit the first swatch to #663399 and lock it.
Choose a harmony and generate another palette.

Locked swatch: #663399
Unlocked swatches: new generated colors

The locked value stays fixed. The other values vary, so select them by role and test their contrast.

Export a CSS color token

Start with: #000000 in the first swatch

Edit the first swatch to #000000.
Select CSS variables in the output panel.

--palette-base: #000000;

This declaration is part of the exported :root block. The name base reflects position, not a certified background or text role.

Palette or color scale?

A palette combines colors for different roles. A scale creates light and dark steps from one base color. Use the scale generator when you need a numbered 50–950 ramp.

Choosing text pairs

The readable-pairs panel lists selected combinations that meet 4.5:1 for normal text at AA. It does not test every state, external background, or non-color accessibility requirement.

Using exported tokens

CSS variables belong in a stylesheet; the Tailwind v4 output uses @theme. JSON is a plain color map that may need adaptation to your token pipeline.

Practical tips for better results

Lock the brand swatch before generating supporting colors.
Use accent colors selectively and test the text placed on them.
Rename positional tokens to semantic roles such as text or surface after checking the actual layout.

Frequently asked questions

Does a complementary palette guarantee accessible colors?

No. Hue relationships do not guarantee sufficient text contrast or distinguishable chart series. Check the actual foreground/background pairs and add labels where colors convey meaning.

How do I generate shades of one color?

Choose a monochromatic harmony for exploration, or use the Color Scale Generator for an 11-step ramp with numbered tokens and contrast columns.

Can I reproduce a randomly generated palette?

Copy or export its values before generating again. Locked swatches survive generation, but a random result is not saved as a permanent URL.

What to check before using the result

Readable pairs use opaque colors. Retest after changing opacity or placing colors over photos.
A palette export does not include typography, component states, or a complete theme.

References and further reading

Keep working

Continue with another focused tool from the same collection.

Color Scale GeneratorTurn one brand color into a balanced 50 to 950 ramp with contrast checked.Image Color ExtractorPull a dominant color palette out of any photo, screenshot, or logo.Color Picker and ConverterPick a color visually and convert between HEX, RGB, HSL, HSV, CMYK, and OKLCH.Color Contrast CheckerCheck WCAG 2.1 and 2.2 text contrast, explore suggested fixes, and view a separate APCA estimate.