DEV Community

Cover image for I built a free color palette generator that exports to CSS, Tailwind and SCSS
Avishek Dhimal
Avishek Dhimal

Posted on

I built a free color palette generator that exports to CSS, Tailwind and SCSS

#webdev #css #tailwindcss #design

As a developer I kept hitting the same problem — I'd find a nice color palette somewhere, then spend 10 minutes manually converting hex codes into CSS variables or a Tailwind config before I could actually use it.

So I built PaletteCSS — a free color palette generator that lets you skip that step entirely.

What it does

  • 🎨 Visual color picker — pick colors by hue/saturation/brightness or paste a hex code
  • ⚡ 4-color palette builder with a random generator (Space bar shortcut)
  • ✅ WCAG AA/AAA contrast checker — see instantly which color pairs are accessible
  • 🎛️ Color shades panel — 10 tints and shades of any selected color

5 export formats, copy-ready

CSS custom properties

:root {
  --color-1: #FF6B6B;
  --color-2: #4ECDC4;
  --color-3: #45B7D1;
  --color-4: #96CEB4;
}
Enter fullscreen mode Exit fullscreen mode

Tailwind config

colors: {
  primary:   '#FF6B6B',
  secondary: '#4ECDC4',
  accent:    '#45B7D1',
  neutral:   '#96CEB4',
}
Enter fullscreen mode Exit fullscreen mode

Also exports as SCSS variables, hex array, JSON, and PNG for Figma or Sketch.

Try it free

👉 https://palettecss.com/color-palette-generator

No signup. No limits. The site also has 5,000+ curated palettes you can browse and export in the same formats.

Would love feedback — is there an export format you wish it supported?

Top comments (0)