Color Palette Generator

Seed Inspector

Shade Steps

Color Sliders

G212

B170

Contrast Shift

Algorithm

Naming Pattern

Press Space for a new seed

Color Steps

Export Palette

:root {
  --palette-my-palette-50: #f0fffa;
  --palette-my-palette-95: #d9fff4;
  --palette-my-palette-145: #c3feee;
  --palette-my-palette-190: #acfee8;
  --palette-my-palette-240: #96fee3;
  --palette-my-palette-285: #7ffedf;
  --palette-my-palette-335: #68fdda;
  --palette-my-palette-380: #52fdd7;
  --palette-my-palette-430: #3bfdd4;
  --palette-my-palette-475: #25fdd1;
  --palette-my-palette-525: #0efdcf;
  --palette-my-palette-570: #02f1c6;
  --palette-my-palette-620: #03dab5;
  --palette-my-palette-665: #03c3a4;
  --palette-my-palette-715: #04ac92;
  --palette-my-palette-760: #049580;
  --palette-my-palette-810: #037e6e;
  --palette-my-palette-855: #03685c;
  --palette-my-palette-905: #025249;
  --palette-my-palette-950: #023b36;
}

Contrast Check

1.0:1Fail

1.1:1Fail

1.2:1Fail

1.3:1Fail

1.4:1Fail

1.7:1Fail

2.2:1Fail

2.8:1Fail

3.6:1AA+

4.8:1AA

6.5:1AA

8.8:1AAA

12.1:1AAA

1.0:1Fail

1.1:1Fail

1.2:1Fail

1.4:1Fail

1.7:1Fail

2.1:1Fail

2.7:1Fail

3.5:1AA+

4.6:1AA

6.2:1AA

8.5:1AAA

11.6:1AAA

1.0:1Fail

1.1:1Fail

1.2:1Fail

1.3:1Fail

1.6:1Fail

2.0:1Fail

2.6:1Fail

3.3:1AA+

4.4:1AA+

6.0:1AA

8.1:1AAA

11.1:1AAA

1.0:1Fail

1.1:1Fail

1.3:1Fail

1.5:1Fail

1.9:1Fail

2.5:1Fail

3.2:1AA+

4.3:1AA+

5.8:1AA

7.8:1AAA

10.8:1AAA

1.0:1Fail

1.1:1Fail

1.2:1Fail

1.5:1Fail

1.9:1Fail

2.4:1Fail

3.1:1AA+

4.2:1AA+

5.6:1AA

7.6:1AAA

10.5:1AAA

1.0:1Fail

1.1:1Fail

1.2:1Fail

1.5:1Fail

1.8:1Fail

2.3:1Fail

3.1:1AA+

4.1:1AA+

5.5:1AA

7.4:1AAA

10.2:1AAA

1.0:1Fail

1.2:1Fail

1.4:1Fail

1.8:1Fail

2.3:1Fail

3.0:1Fail

4.0:1AA+

5.3:1AA

7.2:1AAA

9.9:1AAA

1.0:1Fail

1.1:1Fail

1.4:1Fail

1.8:1Fail

2.2:1Fail

2.9:1Fail

3.9:1AA+

5.2:1AA

7.1:1AAA

9.7:1AAA

1.0:1Fail

1.1:1Fail

1.4:1Fail

1.7:1Fail

2.2:1Fail

2.9:1Fail

3.8:1AA+

5.2:1AA

7.0:1AAA

9.6:1AAA

1.0:1Fail

1.1:1Fail

1.4:1Fail

1.7:1Fail

2.2:1Fail

2.9:1Fail

3.8:1AA+

5.1:1AA

7.0:1AA

9.5:1AAA

1.1:1Fail

1.4:1Fail

1.7:1Fail

2.2:1Fail

2.8:1Fail

3.8:1AA+

5.1:1AA

6.9:1AA

9.5:1AAA

1.2:1Fail

1.5:1Fail

2.0:1Fail

2.6:1Fail

3.4:1AA+

4.6:1AA

6.2:1AA

8.6:1AAA

1.3:1Fail

1.6:1Fail

2.1:1Fail

2.8:1Fail

3.7:1AA+

5.1:1AA

7.0:1AA

1.3:1Fail

1.7:1Fail

2.2:1Fail

3.0:1Fail

4.1:1AA+

5.6:1AA

1.3:1Fail

1.7:1Fail

2.3:1Fail

3.2:1AA+

4.4:1AA+

1.3:1Fail

1.8:1Fail

2.4:1Fail

3.3:1AA+

1.3:1Fail

1.8:1Fail

2.5:1Fail

1.4:1Fail

1.9:1Fail

1.4:1Fail

Send feedback for this tool

Report bugs, incorrect results, or improvement requests with the tool context attached.

Only your message and basic technical context are stored. Your file contents are not sent automatically.

What stands out in Color Palette Generator

Harmony, random, and image-based palette generation modes
WCAG contrast checking for accessibility review
Multiple export formats including CSS, JSON, and Tailwind

Using Color Palette Generator, step by step

Choose a palette creation mode
Start from a base color, try random combinations, or extract colors from an existing image.
Refine and lock the colors
Keep the tones that work, remove the ones that do not, and fine-tune the palette toward your target UI.
Check contrast and export
Validate readability for text/background pairs, then copy or export the palette in the format you need.

When Color Palette Generator fits best

Creating a starter palette for a UI kit, brand guide, or landing page
Pulling colors from an existing visual identity into a digital interface
Testing accessible text/background combinations before handoff

Is a good palette only about visual taste?

No. A strong palette also needs contrast, repeatability, and predictable behavior across components, not just attractive swatches.

Color Palette Generator: common questions

Why is contrast checking important?

Even a beautiful palette can fail if the text becomes hard to read. Contrast review helps catch usability problems early.

Are image-extracted colors always ready for UI work?

Not always. They often need balancing for saturation, lightness, and contrast before they fit interface usage.

Why would I lock colors in a palette?

Locking lets you preserve core brand colors while regenerating or adjusting the rest of the palette more safely.

Color Tools category includes related tools and follow-up pages worth checking next.

Palette Creation Modes

Harmony Mode: Select a base color and generate harmonious palettes based on color theory. Choose from six different harmony types.
Random Mode: Generate random yet harmonious palettes using the golden ratio method. Press Spacebar or click the button to try new palettes. Locked colors are preserved.
Image Extraction: Upload an image or drag and drop it to automatically extract the dominant colors from the image.

Harmony Types

Complementary: Two colors opposite each other on the color wheel. Provides high contrast and vibrancy.
Analogous: Colors adjacent to each other on the color wheel. Creates a natural, peaceful harmony.
Triadic: Three colors equally spaced on the color wheel. Offers a balanced yet rich palette.
Tetradic: Four colors forming a rectangle on the color wheel. Provides variety but requires careful balancing.
Split-Complementary: A color and the two neighbors of its complement. Offers high contrast with a softer look.
Monochromatic: Different saturation and lightness values of a single hue. Creates an elegant, cohesive look.

Palette Management

Generated palettes can contain between 3 and 8 colors. Each color card supports the following actions:

Locking: Click the lock icon to lock a color. Locked colors are preserved when refreshing with Spacebar or changing harmony types.
Deleting: Remove unwanted colors with a single click (minimum 3 colors).
Adding Colors: Click the + button between colors to expand your palette (maximum 8 colors).
Reordering: Drag and drop color cards to rearrange them.
Spacebar Shortcut: Press Spacebar (when not focused on an input field) to instantly refresh unlocked colors.

Color Editing

Click on any color in the palette to open the detailed editing panel:

HEX Input: Enter a HEX code directly, such as #FF5733.
RGB Input: Enter red, green, and blue values (0-255) individually.
HSL Input: Enter hue, saturation, and lightness values.
HSL Sliders: Visually adjust H, S, and L values using sliders.
Color Picker: Use the browser's built-in color picker for visual selection.

Shades, Tints, and Tones

When a color is selected in the palette, its tone variations are automatically displayed:

Shades: Darker versions created by mixing the color with black.
Tints: Lighter, pastel versions created by mixing the color with white.
Tones: Desaturated versions created by mixing the color with gray.

Click on any swatch to copy its HEX code to the clipboard.

WCAG Contrast Checker

Contrast ratios between all color pairs in your palette are automatically calculated and rated according to WCAG 2.1 accessibility standards:

AAA: Contrast ratio of 7:1 or higher. The highest accessibility level.
AA: Contrast ratio of 4.5:1 or higher. Sufficient for normal text.
AA+: Contrast ratio of 3:1 or higher. Sufficient only for large text (18pt and above).

This check helps you verify the readability of text and background color combinations in your designs.

Export Options

Export your palette in 6 different formats:

CSS Variables: CSS custom properties in --color-1: #FF5733; format.
HEX: Plain HEX code list.
RGB: Values in rgb(255, 87, 51) format.
HSL: Values in hsl(11, 100%, 60%) format.
JSON: Colors as a JSON array.
Tailwind: Ready-to-use Tailwind CSS configuration format.

Each format supports both clipboard copying and file download options.

Seed Inspector

Shade Steps

Color Sliders

G212

B170

Contrast Shift

Algorithm

Naming Pattern

Press Space for a new seed

Color Steps

Export Palette

:root {
  --palette-my-palette-50: #f0fffa;
  --palette-my-palette-95: #d9fff4;
  --palette-my-palette-145: #c3feee;
  --palette-my-palette-190: #acfee8;
  --palette-my-palette-240: #96fee3;
  --palette-my-palette-285: #7ffedf;
  --palette-my-palette-335: #68fdda;
  --palette-my-palette-380: #52fdd7;
  --palette-my-palette-430: #3bfdd4;
  --palette-my-palette-475: #25fdd1;
  --palette-my-palette-525: #0efdcf;
  --palette-my-palette-570: #02f1c6;
  --palette-my-palette-620: #03dab5;
  --palette-my-palette-665: #03c3a4;
  --palette-my-palette-715: #04ac92;
  --palette-my-palette-760: #049580;
  --palette-my-palette-810: #037e6e;
  --palette-my-palette-855: #03685c;
  --palette-my-palette-905: #025249;
  --palette-my-palette-950: #023b36;
}

Contrast Check

1.0:1Fail

1.1:1Fail

1.2:1Fail

1.3:1Fail

1.4:1Fail

1.7:1Fail

2.2:1Fail

2.8:1Fail

3.6:1AA+

4.8:1AA

6.5:1AA

8.8:1AAA

12.1:1AAA

1.0:1Fail

1.1:1Fail

1.2:1Fail

1.4:1Fail

1.7:1Fail

2.1:1Fail

2.7:1Fail

3.5:1AA+

4.6:1AA

6.2:1AA

8.5:1AAA

11.6:1AAA

1.0:1Fail

1.1:1Fail

1.2:1Fail

1.3:1Fail

1.6:1Fail

2.0:1Fail

2.6:1Fail

3.3:1AA+

4.4:1AA+

6.0:1AA

8.1:1AAA

11.1:1AAA

1.0:1Fail

1.1:1Fail

1.3:1Fail

1.5:1Fail

1.9:1Fail

2.5:1Fail

3.2:1AA+

4.3:1AA+

5.8:1AA

7.8:1AAA

10.8:1AAA

1.0:1Fail

1.1:1Fail

1.2:1Fail

1.5:1Fail

1.9:1Fail

2.4:1Fail

3.1:1AA+

4.2:1AA+

5.6:1AA

7.6:1AAA

10.5:1AAA

1.0:1Fail

1.1:1Fail

1.2:1Fail

1.5:1Fail

1.8:1Fail

2.3:1Fail

3.1:1AA+

4.1:1AA+

5.5:1AA

7.4:1AAA

10.2:1AAA

1.0:1Fail

1.2:1Fail

1.4:1Fail

1.8:1Fail

2.3:1Fail

3.0:1Fail

4.0:1AA+

5.3:1AA

7.2:1AAA

9.9:1AAA

1.0:1Fail

1.1:1Fail

1.4:1Fail

1.8:1Fail

2.2:1Fail

2.9:1Fail

3.9:1AA+

5.2:1AA

7.1:1AAA

9.7:1AAA

1.0:1Fail

1.1:1Fail

1.4:1Fail

1.7:1Fail

2.2:1Fail

2.9:1Fail

3.8:1AA+

5.2:1AA

7.0:1AAA

9.6:1AAA

1.0:1Fail

1.1:1Fail

1.4:1Fail

1.7:1Fail

2.2:1Fail

2.9:1Fail

3.8:1AA+

5.1:1AA

7.0:1AA

9.5:1AAA

1.1:1Fail

1.4:1Fail

1.7:1Fail

2.2:1Fail

2.8:1Fail

3.8:1AA+

5.1:1AA

6.9:1AA

9.5:1AAA

1.2:1Fail

1.5:1Fail

2.0:1Fail

2.6:1Fail

3.4:1AA+

4.6:1AA

6.2:1AA

8.6:1AAA

1.3:1Fail

1.6:1Fail

2.1:1Fail

2.8:1Fail

3.7:1AA+

5.1:1AA

7.0:1AA

1.3:1Fail

1.7:1Fail

2.2:1Fail

3.0:1Fail

4.1:1AA+

5.6:1AA

1.3:1Fail

1.7:1Fail

2.3:1Fail

3.2:1AA+

4.4:1AA+

1.3:1Fail

1.8:1Fail

2.4:1Fail

3.3:1AA+

1.3:1Fail

1.8:1Fail

2.5:1Fail

1.4:1Fail

1.9:1Fail

1.4:1Fail

Send feedback for this tool

Report bugs, incorrect results, or improvement requests with the tool context attached.

Only your message and basic technical context are stored. Your file contents are not sent automatically.

What stands out in Color Palette Generator

Harmony, random, and image-based palette generation modes
WCAG contrast checking for accessibility review
Multiple export formats including CSS, JSON, and Tailwind

Using Color Palette Generator, step by step

Choose a palette creation mode
Start from a base color, try random combinations, or extract colors from an existing image.
Refine and lock the colors
Keep the tones that work, remove the ones that do not, and fine-tune the palette toward your target UI.
Check contrast and export
Validate readability for text/background pairs, then copy or export the palette in the format you need.

When Color Palette Generator fits best

Creating a starter palette for a UI kit, brand guide, or landing page
Pulling colors from an existing visual identity into a digital interface
Testing accessible text/background combinations before handoff

Is a good palette only about visual taste?

No. A strong palette also needs contrast, repeatability, and predictable behavior across components, not just attractive swatches.

Color Palette Generator: common questions

Why is contrast checking important?

Even a beautiful palette can fail if the text becomes hard to read. Contrast review helps catch usability problems early.

Are image-extracted colors always ready for UI work?

Not always. They often need balancing for saturation, lightness, and contrast before they fit interface usage.

Why would I lock colors in a palette?

Locking lets you preserve core brand colors while regenerating or adjusting the rest of the palette more safely.

Color Tools category includes related tools and follow-up pages worth checking next.

Color Palette Generator

Palette Creation Modes

Harmony Mode: Select a base color and generate harmonious palettes based on color theory. Choose from six different harmony types.
Random Mode: Generate random yet harmonious palettes using the golden ratio method. Press Spacebar or click the button to try new palettes. Locked colors are preserved.
Image Extraction: Upload an image or drag and drop it to automatically extract the dominant colors from the image.

Harmony Types

Complementary: Two colors opposite each other on the color wheel. Provides high contrast and vibrancy.
Analogous: Colors adjacent to each other on the color wheel. Creates a natural, peaceful harmony.
Triadic: Three colors equally spaced on the color wheel. Offers a balanced yet rich palette.
Tetradic: Four colors forming a rectangle on the color wheel. Provides variety but requires careful balancing.
Split-Complementary: A color and the two neighbors of its complement. Offers high contrast with a softer look.
Monochromatic: Different saturation and lightness values of a single hue. Creates an elegant, cohesive look.

Palette Management

Generated palettes can contain between 3 and 8 colors. Each color card supports the following actions:

Locking: Click the lock icon to lock a color. Locked colors are preserved when refreshing with Spacebar or changing harmony types.
Deleting: Remove unwanted colors with a single click (minimum 3 colors).
Adding Colors: Click the + button between colors to expand your palette (maximum 8 colors).
Reordering: Drag and drop color cards to rearrange them.
Spacebar Shortcut: Press Spacebar (when not focused on an input field) to instantly refresh unlocked colors.

Color Editing

Click on any color in the palette to open the detailed editing panel:

HEX Input: Enter a HEX code directly, such as #FF5733.
RGB Input: Enter red, green, and blue values (0-255) individually.
HSL Input: Enter hue, saturation, and lightness values.
HSL Sliders: Visually adjust H, S, and L values using sliders.
Color Picker: Use the browser's built-in color picker for visual selection.

Shades, Tints, and Tones

When a color is selected in the palette, its tone variations are automatically displayed:

Shades: Darker versions created by mixing the color with black.
Tints: Lighter, pastel versions created by mixing the color with white.
Tones: Desaturated versions created by mixing the color with gray.

Click on any swatch to copy its HEX code to the clipboard.

WCAG Contrast Checker

Contrast ratios between all color pairs in your palette are automatically calculated and rated according to WCAG 2.1 accessibility standards:

AAA: Contrast ratio of 7:1 or higher. The highest accessibility level.
AA: Contrast ratio of 4.5:1 or higher. Sufficient for normal text.
AA+: Contrast ratio of 3:1 or higher. Sufficient only for large text (18pt and above).

This check helps you verify the readability of text and background color combinations in your designs.

Export Options

Export your palette in 6 different formats:

CSS Variables: CSS custom properties in --color-1: #FF5733; format.
HEX: Plain HEX code list.
RGB: Values in rgb(255, 87, 51) format.
HSL: Values in hsl(11, 100%, 60%) format.
JSON: Colors as a JSON array.
Tailwind: Ready-to-use Tailwind CSS configuration format.

Each format supports both clipboard copying and file download options.

Send feedback for this tool

What stands out in Color Palette Generator

Using Color Palette Generator, step by step

Choose a palette creation mode

Refine and lock the colors

Check contrast and export

When Color Palette Generator fits best

Is a good palette only about visual taste?

Color Palette Generator: common questions

Why is contrast checking important?

Are image-extracted colors always ready for UI work?

Why would I lock colors in a palette?

Where to go after Color Palette Generator

Open this category

Browse all tools

Color Converter

Color Palette Generator

Palette Creation Modes

Harmony Types

Palette Management

Color Editing

Shades, Tints, and Tones

WCAG Contrast Checker

Export Options

Send feedback for this tool

What stands out in Color Palette Generator

Using Color Palette Generator, step by step

Choose a palette creation mode

Refine and lock the colors

Check contrast and export

When Color Palette Generator fits best

Is a good palette only about visual taste?

Color Palette Generator: common questions

Why is contrast checking important?

Are image-extracted colors always ready for UI work?

Why would I lock colors in a palette?

Where to go after Color Palette Generator

Open this category

Browse all tools

Color Converter

Color Palette Generator

Palette Creation Modes

Harmony Types

Palette Management

Color Editing

Shades, Tints, and Tones

WCAG Contrast Checker

Export Options