Color Palette Picker

Pick a base color, generate palettes, and export in developer-friendly formats.
All Tools
Used for CSS variables / classes.
Palette preview
Click any swatch to copy its HEX value.
Export output
Use in CSS, design systems, apps, and docs.
What this tool helps with
  • Build consistent UI color palettes fast
  • Export CSS variables for design tokens
  • Create Tailwind-style color objects
  • Quickly test contrasts and themes
Tips
  • Start with a base color, then try Analogous or Triadic.
  • Use Shades/Tints to generate neutral UI scales.
  • Keep Count between 5–8 for most UI needs.
Formats
HEX RGB HSL CSS Vars Tailwind JSON
Manual palette
Your picked colors (used when Mode is Manual).

Color Palette Picker

This color palette picker helps you build beautiful, consistent color sets for websites, apps, dashboards, brand kits, and design systems. Choose a base color, generate harmonies like analogous and complementary palettes, and export the result in practical formats like CSS variables, Tailwind-style objects, JSON, or simple HEX lists.

Common use cases
UI themes Brand colors Design tokens Style guides Prototypes
  • Generate a primary palette for buttons, links, and highlights.
  • Create shade/tint scales for backgrounds, borders, and states.
  • Export variables for quick theming across multiple pages.
FAQ
Does this store my colors?
No. Everything is generated client-side in your browser.
Which format should I use?
Use CSS variables for websites, Tailwind for config objects, and JSON for apps/seed data.