ColorPalette.live
Crafted for designers, devs & creatives

Beautiful palettes,
instantly.

Generate, edit, and export stunning color palettes with live previews, contrast checks, and one-click exports to CSS, Tailwind, JSON and PNG.

PressSpaceto regenerate
Need a starting point? Palette ideas
Color editor
Editing swatch 1
#1B1033
H 259° · S 52% · L 13%
259°
52%
13%
0
Live previews
See your palette in the wild
Lumina
New in 2026

Design with confidence, ship with joy.

The fastest way to build interfaces your users will love. Beautiful by default, opinionated where it matters.

Fast
Crafted to feel instant and effortless across devices.
Layered
Crafted to feel instant and effortless across devices.
Loved
Crafted to feel instant and effortless across devices.
Shades & Tints
Tailwind-style scale from #1B1033
Accessibility
WCAG contrast & color blindness
Contrast preview
The five boxing wizards
Jump quickly to test legibility across pairings in your palette.
Text
Background
Ratio16.45:1
AA · SmallPass
AA · LargePass
AAA · SmallPass
AAA · LargePass
Color blindness simulation
Export
Ship it everywhere
CSS Variables
:root {
  --color-1: #1B1033;
  --color-2: #5132A8;
  --color-3: #7C5CFF;
  --color-4: #22D3EE;
  --color-5: #F4F4FF;
}
Tailwind Config
// tailwind.config.ts
export default {
  theme: {
    extend: {
      colors: {
        palette: {
          100: '#1B1033',
          200: '#5132A8',
          300: '#7C5CFF',
          400: '#22D3EE',
          500: '#F4F4FF',
        },
      },
    },
  },
}
JSON
{
  "name": "ColorPalette.live",
  "colors": [
    "#1B1033",
    "#5132A8",
    "#7C5CFF",
    "#22D3EE",
    "#F4F4FF"
  ]
}
SCSS
$color-1: #1B1033;
$color-2: #5132A8;
$color-3: #7C5CFF;
$color-4: #22D3EE;
$color-5: #F4F4FF;
My Palettes
0 saved · stored locally
No palettes yet. Save your favorites and they'll live here.

Frequently asked questions

Is ColorPalette.live free?

Yes. Every feature is free, with no sign-up and no watermark on exports.

How do I generate a colour palette?

Pick a base colour and a harmony (analogous, complementary, triadic, tetradic, monochromatic, shades or random), then press Generate or hit the spacebar. Lock any colours you want to keep before regenerating.

Can I check if my colours are accessible?

Yes. The accessibility panel shows the contrast ratio between colours and whether each pair passes WCAG AA and AAA for normal and large text.

What export formats are supported?

CSS variables, a Tailwind config, SCSS variables and JSON, plus PNG and SVG image downloads.

How do I share a palette?

Use the Share button to copy a link. Anyone who opens it sees the same colours, and the link shows a preview of the palette when posted on social media or in chat apps.

Where are my saved palettes stored?

In your browser only (local storage). Nothing is uploaded, so clearing your browser data removes them.