𝗙𝗿𝗲𝗲𝗧𝗼𝗼𝗹 DEV

Color Palette Generator

Create harmonious color palettes online. Generate random or themed colors, lock your favorites, view shade scales, check contrast and color blindness simulation, and export in CSS, SCSS, JSON, Tailwind, HEX, RGB, HSL or OKLCH.

Click a palette to open it in the editor

Edit color

About this tool

Create harmonious color palettes in seconds. Browse the gallery of auto-generated palettes or open the editor to generate variations, lock favorite colors, adjust the number of colors, and export for your projects. Colors are calculated in the perceptual Okhsl color space, which keeps tones visually balanced and avoids the common distortions of traditional HSL.

Key features

Generate random or themed palettes — pastel, vibrant, dark, vintage, and earth
Lock favorite colors, generate new variations, and adjust the palette size
View perceptual shade scales, check WCAG contrast, and simulate color blindness
Export in HEX, RGB, HSL, OKLCH, CSS, SCSS, JSON or Tailwind and share via link

Common uses

  • Discover new palettes and combinations for interfaces and design systems, with perceptually balanced tones ready to use
  • Define color schemes for presentations, posts, and marketing materials with visual harmony
  • Copy color values in HEX, RGB, HSL or OKLCH directly into CSS, without manually calculating colors
  • Test different color harmonies (analogous, monochromatic, complementary, triadic, tetradic) in interface redesigns before finalizing the project
  • Check contrast accessibility and visualize how the palette looks to people with color blindness

How to use

1

Browse the gallery

The page opens with several auto-generated palettes. Choose between random and theme mode, press the Space key to generate new options, or click 'Load more' to expand the gallery.

2

Open in the editor

Click a palette to open it in the editor. Lock the colors you want to keep and generate again to vary only the rest.

3

Adjust and export

Adjust the number of colors, view shade scales, check contrast and color blindness simulation, then export in the format you need or share via link.

Technical notes

A few details help explain how colors are generated and why they stay balanced:

Colors are generated in the Okhsl space, which is perceptually uniform: varying lightness produces visually even steps, unlike HSL where the same lightness value appears brighter in yellow than in blue
Clicking 'view shade scale' on a color generates a ramp from 50 to 900, keeping hue and saturation fixed while varying only perceptual lightness — ready for design system scales and copyable as CSS or Tailwind
Contrast checking uses the WCAG ratio between the color and its legible text; the AA badge indicates a ratio of at least 4.5:1
The color blindness simulation is an approximation for quick review and does not replace testing with real users

FAQ

How do I generate a color palette?

The page opens with several auto-generated palettes. Press the space bar (or the Generate new button) to create more, or choose a theme like pastel or dark. Clicking a palette opens the editor where you can lock colors and adjust as needed.

What is the difference between random mode and theme mode?

In random mode, colors can come from any point in the spectrum. In theme mode, generation is biased toward a specific look — pastel uses light and soft colors, dark uses low-lightness tones, vintage uses aged and desaturated tones, and so on.

What is the Okhsl color space and why does it matter?

Okhsl is a perceptually uniform color model. In practice, this means that adjusting a color's lightness produces changes the eye perceives as even steps, resulting in more balanced palettes and shades than traditional HSL — especially when comparing very different colors like yellow and blue.

How do I save or share a palette?

In the editor, the Share button copies a link with the colors encoded in the URL. Anyone opening that link will see exactly the same palette in the editor. You can also export the colors as CSS, SCSS, JSON, Tailwind, or a HEX list.

See also