How do I generate a color palette?

Press the spacebar or click Generate to create a new color palette. Lock any colors you like, and the generator will create harmonious combinations around your locked choices.

What color harmony modes are available?

The generator supports complementary, analogous, triadic, split-complementary, tetradic, monochromatic, warm, cool, earth, pastel, neon, and vintage harmony modes — all calculated in the perceptually uniform OKLCH color space.

Can I export palettes to Tailwind CSS?

Yes. The export panel supports Tailwind CSS config, CSS variables, SCSS, JSON, W3C Design Tokens, Flutter, SwiftUI, Figma tokens, PNG image, and SVG card formats.

Does the palette generator check accessibility?

Yes. The contrast matrix shows WCAG AA/AAA compliance between all color pairs. You can also generate accessibility-first palettes that guarantee minimum contrast ratios.

What color space does the generator use?

All generation algorithms use the OKLCH color space for perceptual uniformity. This ensures that lightness steps look visually equal across different hues, unlike HSL-based generators.

Yes, the Color Palette Generator is completely free with no account required, no limits, and no watermarks on exports.

Color Palette Generator

Create stunning color palettes with harmony rules, accessibility checks, and live UI previews. Press Space to generate.

#4F46E5

Blue

Primary

#7C3AED

Purple

Secondary

#06B6D4

Teal

Accent

#374151

Dark Muted Blue

Neutral

#F8FAFC

Near White

Surface

Palette Intelligence

MoodCool & Trustworthy

TemperatureCool

CoolWarm

SaturationModerate

Best for

TechnologyHealthcareSaaS

Suggestions

• All cool hues — a warm accent can add energy

Contrast Matrix

Score:30/100


—	Fail1.1	Fail2.6	Fail1.6	AA6.0
Fail1.1	—	Fail2.3	Fail1.8	AA5.4
Fail2.6	Fail2.3	—	AA-L4.2	Fail2.3
Fail1.6	Fail1.8	AA-L4.2	—	AAA9.9
AA6.0	AA5.4	Fail2.3	AAA9.9	—

AAA (7:1+) AA (4.5:1+) Large (3:1+) Fail

Design System Preview

Buttons

Input

[email protected]

Focused input

Alerts

Info: This is an informational message

Success: Operation completed successfully

Error: Something went wrong

Card

Card Title

Subtitle text

This is a preview of how your palette would appear in a real card component.

Tag 1

Tag 2

Badges

PrimarySecondaryAccentNeutralSurface

Chart Colors

Primary

Secondary

Accent

Neutral

Surface

Export as:

module.exports = {
  theme: {
    extend: {
      colors: {
        'primary': {
          '50': '#f2f4ff',
          '100': '#e6eaff',
          '200': '#c5ceff',
          '300': '#99a5ff',
          '400': '#757eff',
          '500': '#5854f2',
          '600': '#4230cf',
          '700': '#2e03a5',
          '800': '#190069',
          '900': '#0c0041',
          '950': '#040023',
        },
        'secondary': {
          '50': '#f5f3ff',
          '100': '#ebe8ff',
          '200': '#d2c8ff',
          '300': '#b29bff',
          '400': '#986eff',
          '500': '#7e3fef',
          '600': '#630bcc',
          '700': '#450093',
          '800': '#29005c',
          '900': '#160039',
          '950': '#08001e',
        },
        'accent': {
          '50': '#e4faff',
          '100': '#c8f4ff',
          '200': '#8ee0f4',
          '300': '#52bfd7',
          '400': '#00a0bb',
          '500': '#007f95',
          '600': '#006071',
          '700': '#00424f',
          '800': '#00272f',
          '900': '#00151b',
          '950': '#00070b',
        },
        'neutral': {
          '50': '#f0f6ff',
          '100': '#e5ecf6',
          '200': '#c9d2df',
          '300': '#a5afbe',
          '400': '#8590a1',
          '500': '#677284',
          '600': '#4b5666',
          '700': '#323b4a',
          '800': '#1a222e',
          '900': '#0c121c',
          '950': '#03060d',
        },
        'surface': {
          '50': '#f4f5f6',
          '100': '#eaebec',
          '200': '#d0d1d2',
          '300': '#acaeb0',
          '400': '#8e8f91',
          '500': '#707273',
          '600': '#545557',
          '700': '#393b3c',
          '800': '#212223',
          '900': '#111213',
          '950': '#050606',
        },
      }
    }
  }
}

Palette Health Score

69/100

Good, minor improvements possible

Lightness Range

20/25

Range: 61% (37–98%)

Contrast Compliance

10/25

4/10 pairs meet 3:1+ ratio (40%)

Color Distinctiveness

14/20

Min distance: 0.110, Avg: 0.649

Chroma Balance

15/15

Has both neutral and vibrant tones

Role Coverage

10/15

Missing: background, foreground

Semantic Token Mapping

#4F46E5Suggest: secondary

#7C3AEDSuggest: primary

#06B6D4Suggest: surface

#374151Suggest: foreground

#F8FAFCSuggest: background

Token Preview

Colors applied to their semantic roles

Dark Mode Generation

Desaturation30%

Light

Dark

→

#4a45d31.9:1

→

#6424c52.3:1

→

#00303a4.0:1

→

#7f899a1.0:1

→

#0102025.9:1

Color Vision Simulation

3 conflicts

Normal vision

Deuteranopia (~5% males)

Colors that may appear indistinguishable:

Primary≈
Secondary

~8% of men and ~0.5% of women have color vision deficiency. Ensure your palette remains distinguishable.

ShortcutsSpace GenerateL LockC Copy←→ NavigateShift+←→ ReorderN AddDel RemoveS ShareE ExportP PreviewD Dark/LightCtrl+Z Undo

How to Create a Color Palette

Start with a base color — Click any color column and use the picker to set your brand or primary color.
Lock your anchors — Click the lock icon on colors you want to keep. The generator will create harmonious combinations around them.
Generate variations — Press Space or choose a harmony mode. Try complementary, analogous, triadic, or mood-based generation.
Check accessibility — The contrast matrix ensures your palette meets WCAG standards for text readability.
Preview in context — Use the Live Preview to see your palette applied to real landing pages and dashboards.
Export — Download as CSS variables, Tailwind config, Design Tokens, or any of 10+ formats ready for production.

Understanding Color Harmony

Complementary

Colors opposite on the color wheel. Creates high contrast and visual tension — perfect for CTAs and accent elements.

Analogous

Adjacent colors on the wheel. Creates harmonious, cohesive palettes ideal for backgrounds and subtle gradients.

Triadic

Three equally-spaced colors. Balanced yet vibrant — great for playful interfaces and creative brands.

Monochromatic

Single hue with varying lightness. Elegant and safe — ideal for minimalist designs and professional interfaces.

Split-Complementary

A base color plus two colors adjacent to its complement. Provides contrast with less tension than full complementary.

OKLCH Color Space

Our generator uses OKLCH for perceptual uniformity — equal lightness steps appear equally bright across all hues, unlike HSL.

Frequently Asked Questions

How many colors can a palette have?

Between 2 and 10 colors. The default is 5, which covers primary, secondary, accent, neutral, and surface roles for most design systems.

Can I share my palette?

Yes. Each palette generates a unique URL that you can share with colleagues or bookmark for later. The colors are encoded directly in the URL.

What makes this different from Coolors?

Our generator uses the perceptually uniform OKLCH color space, provides real-time UI mockup previews, includes an accessibility contrast matrix, offers 10+ export formats including W3C Design Tokens, and provides palette intelligence analysis — all in one free tool.

Do I need an account?

No. Everything works without login. Palettes are saved locally in your browser and can be shared via URL.

Does it support dark mode?

Yes. The live preview panel lets you toggle between light and dark themes to see how your palette performs in both contexts.

—

Fail1.1

Fail2.6

Fail1.6

AA6.0

Fail1.1

—

Fail2.3

Fail1.8

AA5.4

Fail2.6

Fail2.3

—

AA-L4.2

Fail2.3

Fail1.6

Fail1.8

AA-L4.2

—

AAA9.9

AA6.0

AA5.4

Fail2.3

AAA9.9

—

module.exports = { theme: { extend: { colors: { 'primary': { '50': '#f2f4ff', '100': '#e6eaff', '200': '#c5ceff', '300': '#99a5ff', '400': '#757eff', '500': '#5854f2', '600': '#4230cf', '700': '#2e03a5', '800': '#190069', '900': '#0c0041', '950': '#040023', }, 'secondary': { '50': '#f5f3ff', '100': '#ebe8ff', '200': '#d2c8ff', '300': '#b29bff', '400': '#986eff', '500': '#7e3fef', '600': '#630bcc', '700': '#450093', '800': '#29005c', '900': '#160039', '950': '#08001e', }, 'accent': { '50': '#e4faff', '100': '#c8f4ff', '200': '#8ee0f4', '300': '#52bfd7', '400': '#00a0bb', '500': '#007f95', '600': '#006071', '700': '#00424f', '800': '#00272f', '900': '#00151b', '950': '#00070b', }, 'neutral': { '50': '#f0f6ff', '100': '#e5ecf6', '200': '#c9d2df', '300': '#a5afbe', '400': '#8590a1', '500': '#677284', '600': '#4b5666', '700': '#323b4a', '800': '#1a222e', '900': '#0c121c', '950': '#03060d', }, 'surface': { '50': '#f4f5f6', '100': '#eaebec', '200': '#d0d1d2', '300': '#acaeb0', '400': '#8e8f91', '500': '#707273', '600': '#545557', '700': '#393b3c', '800': '#212223', '900': '#111213', '950': '#050606', }, } } } }

How to Create a Color Palette

Start with a base color — Click any color column and use the picker to set your brand or primary color.
Lock your anchors — Click the lock icon on colors you want to keep. The generator will create harmonious combinations around them.
Generate variations — Press Space or choose a harmony mode. Try complementary, analogous, triadic, or mood-based generation.
Check accessibility — The contrast matrix ensures your palette meets WCAG standards for text readability.
Preview in context — Use the Live Preview to see your palette applied to real landing pages and dashboards.
Export — Download as CSS variables, Tailwind config, Design Tokens, or any of 10+ formats ready for production.

Understanding Color Harmony

Complementary

Colors opposite on the color wheel. Creates high contrast and visual tension — perfect for CTAs and accent elements.

Analogous

Adjacent colors on the wheel. Creates harmonious, cohesive palettes ideal for backgrounds and subtle gradients.

Triadic

Three equally-spaced colors. Balanced yet vibrant — great for playful interfaces and creative brands.

Monochromatic

Single hue with varying lightness. Elegant and safe — ideal for minimalist designs and professional interfaces.

Split-Complementary

A base color plus two colors adjacent to its complement. Provides contrast with less tension than full complementary.

OKLCH Color Space

Our generator uses OKLCH for perceptual uniformity — equal lightness steps appear equally bright across all hues, unlike HSL.

Frequently Asked Questions

How many colors can a palette have?

Between 2 and 10 colors. The default is 5, which covers primary, secondary, accent, neutral, and surface roles for most design systems.

Can I share my palette?

Yes. Each palette generates a unique URL that you can share with colleagues or bookmark for later. The colors are encoded directly in the URL.

What makes this different from Coolors?

Do I need an account?

No. Everything works without login. Palettes are saved locally in your browser and can be shared via URL.

Does it support dark mode?

Yes. The live preview panel lets you toggle between light and dark themes to see how your palette performs in both contexts.

Color Palette Generator

Palette Intelligence

Contrast Matrix

Design System Preview

Shade Scales (50-950)

Palette Health Score

Semantic Token Mapping

Dark Mode Generation

Color Vision Simulation

How to Create a Color Palette

Understanding Color Harmony

Complementary

Analogous

Triadic

Monochromatic

Split-Complementary

OKLCH Color Space

Frequently Asked Questions

Color Palette Generator

Palette Intelligence

Contrast Matrix

Design System Preview

Shade Scales (50-950)

Palette Health Score

Semantic Token Mapping

Dark Mode Generation

Color Vision Simulation

How to Create a Color Palette

Understanding Color Harmony

Complementary

Analogous

Triadic

Monochromatic

Split-Complementary

OKLCH Color Space

Frequently Asked Questions