What color harmony modes are available?

Six modes are available: Monochromatic (shades of one hue), Complementary (opposite colors), Analogous (neighboring hues), Triadic (three evenly spaced hues), Split-Complementary, and Tetradic (four-color rectangle).

What formats can I export my palette in?

You can copy colors as HEX, RGB, or HSL values. The export panel also generates CSS variables, SCSS variables, and a Tailwind config snippet. You can also download the entire palette as a PNG image.

Can I save and share my color palette?

Yes. Click Save to store palettes in your browser (up to 20). Use the Share button to generate a URL that encodes your exact palette — anyone with the link will see the same colors when they open it.

How do I lock a color so it doesn't change?

Hover over any swatch and click the Lock button. Locked colors are preserved when you generate a new palette or press Space — only unlocked swatches are regenerated.

What is the difference between Triadic and Split-Complementary?

Triadic uses three colors spaced 120° apart on the color wheel, creating bold contrast. Split-Complementary uses your base color plus the two colors adjacent to its complement, giving similar contrast with a slightly softer feel.

Can I use generated palettes in commercial projects?

Yes. All color palettes generated with this tool are free to use in any personal or commercial project, including websites, apps, branding, and print design.

Color Palette Generator

Q: What is a color palette generator?

A color palette generator is an online tool that creates harmonious sets of colors from a single base color using color theory principles such as complementary, analogous, triadic, and split-complementary relationships.

Q: Is this color palette generator free?

Yes. The Mockup Shelf color palette generator is completely free to use with no sign-up, no watermarks, and no limits on how many palettes you can generate or download.

Create, test, export, and save production-ready color systems.

Base color

Harmony mode

Palette size

Colors

Quick actions

Copy format

Gradient direction

Live palette preview, gradient stops, and component treatment.

Palette Variations

Click any chip to copy

Tints & Shades

Light-to-dark ranges

Contrast Checker

WCAG AA / AAA with white and black

AAA 7:1+ AA 4.5:1+ AA Large 3:1+ Fail

Export Codes

Developer-ready snippets

Download the current palette as a PNG swatch card.

Saved Palettes

No saved palettes yet - hit Save to keep a palette.

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 color palette makes all the difference. This free color palette generator creates harmonious, professional color combinations from any base color instantly, with no sign-up required.

Pick a starting color, select a harmony mode, and get a ready-to-use palette in seconds. Copy individual hex codes, export the full palette as CSS variables, SCSS variables, or a Tailwind config snippet, and download a PNG swatch card to share with your team.

What You Can Do

6 harmony modes - Monochromatic, Complementary, Analogous, Triadic, Split-Complementary, and Tetradic.
Flexible color counts - Generate 2, 3, 4, or 5 colors per palette.
Multiple formats - Copy as HEX, RGB, or HSL with one click.
Developer-ready export - CSS custom properties, SCSS variables, and Tailwind color config.
Contrast grid - Check WCAG accessibility contrast ratios between all color pairs.
Save and share - Save up to 20 palettes in your browser or share via URL.

Frequently Asked Questions

What is a color palette generator?

A color palette generator creates sets of harmonious colors from a single base color using color theory relationships such as complementary, analogous, triadic, and split-complementary palettes.

Is this color palette generator free?

Yes. It is free to use with no account, no watermarks, and no limits on palette generation or downloads.

What export formats are supported?

You can copy individual colors as HEX, RGB, or HSL. The export panel also provides HEX lists, RGB lists, HSL lists, CSS variables, SCSS variables, Tailwind config, and PNG download.

Can I share my color palette?

Yes. Click Create share link to generate a URL that encodes your exact palette, base color, mode, and color count.