Dev.to WebDev 🛠 Dev 👁 0

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

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

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;
}

Tailwind config

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

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?

📰 Read the original article on Dev.to WebDev

Originally published by Dev.to WebDev. Aggregated on AIWithGhost for educational purposes — full credit and traffic to the original publisher.