Skip to content
Color Codes

Palette generator

Color Palette Generator – Lock, Shuffle & Export

Generate color palettes in one click. Press Space to shuffle, lock the colors you like, check text contrast and export CSS, SCSS, Tailwind or JSON.

5 colors
≈ DarkSlateGray
≈ DarkGreen
≈ LightCyan
≈ DarkCyan
≈ SkyBlue
Check for color blindness

Readable text on each color

Export

:root {
  --color-1: #1F2917;
  --color-2: #006C41;
  --color-3: #D7F1ED;
  --color-4: #0095A8;
  --color-5: #94C3E2;
}

How to use this tool

Each palette is built in the OKLCH color space, so lightness steps look even and the colors stay balanced. Pick a style such as analogous, complementary or pastel, lock any color you want to keep and generate until the palette fits your project. The URL updates with every palette, so you can bookmark or share it.

  1. 1 Press Space or Generate to create a new palette.
  2. 2 Lock the colors you like and keep generating the rest.
  3. 3 Copy the HEX codes, save to My Palettes or export code.

Frequently asked questions

How does the palette generator choose colors?

It picks a base hue, then places the other colors with a harmony rule (analogous, complementary, triadic, monochrome or pastel) in OKLCH. Lightness is spread from dark to light so every palette has usable contrast.

Can I keep one color and change the others?

Yes. Lock a color with the padlock button; it stays in place and anchors the hue of the next palettes. You can also edit any color directly.

How do I share a palette?

The page URL always contains the current colors, for example ?colors=1F2917-006C41-D7F1ED. Copy the link to share it or bookmark it for later.

Are the generated palettes accessible?

Every color shows its most readable text color and contrast ratio. Use the color blindness check to make sure important colors stay distinguishable for people with color vision deficiencies.