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
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.46: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.