MockupShelf / Free Tools / Color Palette Generator
Click to copy · hover to lock · Space random
Monochromatic
Gradient Preview
Palette Variations
Click any chip to copy
Tints & Shades
Click any chip to copy
Contrast Checker
WCAG AA / AAA · incl. White & Black
AAA ≥ 7:1 AA ≥ 4.5:1 AA Large ≥ 3:1 Fail < 3:1
UI Preview
Your palette on real components
Export Codes
Updates live with your palette
Download palette as PNG image
Saved Palettes
No saved palettes yet — hit Save to keep one.

Free Color Palette Generator —
Create Beautiful Color Schemes

Whether you're designing a website, building a brand identity, or choosing colors for a UI, the right palette makes all the difference. Pick a base color, choose a harmony mode, and get a production-ready palette in seconds — free, no sign-up required.

How to Use the Generator

01
Pick a base color Click the color swatch or type any HEX code. Hit the shuffle icon for a random starting point.
02
Choose a harmony mode Select from Monochromatic, Complementary, Analogous, Triadic, Split, or Tetradic.
03
Lock & refine Hover any swatch and click Lock to fix it. Change the base color to regenerate only unlocked swatches.
04
Export & share Copy as CSS variables, SCSS, Tailwind config, or HEX/RGB/HSL. Download a PNG swatch card or share via URL.

Export Formats

CSS Variables
Paste directly into your stylesheet as --color-1 custom properties.
SCSS Variables
Ready-to-use $color-1 Sass variables for any SCSS project.
Tailwind Config
Drop into your tailwind.config.js colors object with one copy.
HEX Codes
Plain list of uppercase HEX values — paste anywhere.
RGB Values
Copy as rgb(r, g, b) for CSS, Canvas, or design tools.
HSL Values
Copy as hsl(h, s%, l%) — great for theming and animations.

Frequently Asked Questions

A color palette generator creates harmonious sets of colors from a single base color using color theory principles such as complementary, analogous, triadic, and split-complementary relationships.
Yes — completely free. No account, no watermarks, no limits. Generate and download as many palettes as you need.
Monochromatic uses shades of a single hue. Complementary pairs colors from opposite sides of the wheel. Analogous groups neighboring hues. Triadic places three colors 120° apart. Split-Complementary uses a base plus the two neighbors of its complement. Tetradic creates a four-color rectangle.
Copy individual colors as HEX, RGB, or HSL. The export panel offers HEX list, RGB list, HSL list, CSS variables, SCSS variables, and Tailwind config. You can also download the full palette as a PNG image.
Hover over any swatch and click the Lock button. Locked swatches stay fixed when you change the harmony mode, pick a new base color, or press Space to randomize — only unlocked swatches update.
Yes. Click the Share button to generate a unique URL that encodes your exact palette. Anyone who opens the link will see the same colors.
Absolutely. All palettes generated here are free for personal or commercial use — websites, apps, branding, print, and more.