No saved palettes yet
How to use the Color Palette Generator
Pick a base color and a harmony, then lock, reorder and export the colors you like.
-
Step 1
Pick a base color
Use the wheel, the picker or a HEX code.
-
Step 2
Choose a harmony
Eleven color rules, from analogous to tones.
-
Step 3
Lock, tweak and export
CSS, Tailwind, JSON, ASE or a PNG image.
- Free to use
- No sign-up
- Runs in your browser
Color schemes for design and code
11 harmony types
Every classic color rule from one base color.
Lock and reorder
Keep the colors you like, drag them into place.
WCAG contrast check
Ratios for every text and background pair.
Nine export formats
CSS, Tailwind, Adobe ASE, PNG and more.
Color Palette Generator FAQ
What is a color palette generator and how does it work?
A color palette generator is a design tool that creates harmonious color combinations based on color theory principles. Our generator uses algorithms to produce complementary, triadic, analogous, monochromatic, and other color harmonies. Simply select a base color, choose your preferred harmony type, and the tool automatically generates a cohesive palette that works well together for web design, graphic design, and UI/UX projects.
What export formats are available for the generated color palettes?
You can copy or download the palette as CSS variables, SCSS variables with a Sass map, a Tailwind config snippet or JSON data, and download it as a PNG image, an SVG palette, an Adobe ASE swatch file for Photoshop, Illustrator and InDesign, a Sketch palette or a GIMP palette. Values can be written as HEX, RGB, HSL or OKLCH, and clicking a swatch copies its color.
What types of color harmonies can I create with this tool?
There are 11 harmony types: Random (no base color, with an optional warm, cool or neutral temperature), Monochromatic (one hue at different lightness and saturation), Analogous (neighboring hues), Complementary (opposite hues), Split Complementary (the base plus the two hues beside its complement), Triadic (three hues 120 degrees apart), Tetradic (four hues in a square), Compound (the base, a neighbor and both of their complements), and Shades, Tints and Tones (the base mixed with black, white or gray).
How do I keep a color I like and generate new ones?
Click the lock on that swatch. Generate, or the Space bar on a computer, then replaces only the unlocked colors. A color you change by hand is locked for you, you can drag swatches into any order, and Undo brings back the previous palette.
How do I check if text is readable on my palette colors?
Each swatch shows whether black or white text reads better on it, with the WCAG contrast ratio and its AA or AAA level. The Contrast tab tests every palette color as text on every other one, plus white and black. WCAG AA needs 4.5:1 for normal text and 3:1 for large text, and AAA needs 7:1.
Can I use the color palette in Tailwind CSS?
Yes. The Tailwind tab gives a tailwind.config.js snippet that adds every color under theme.extend.colors.palette, so you get classes like bg-palette-blue and text-palette-blue. Pick HEX, RGB, HSL or OKLCH values, then copy the snippet or download the file.