Color Palette Generator
Create color palettes from color harmony rules or from a photo. See shades, contrast and gradients, and export to CSS, SCSS, Tailwind, JSON, Swift, Android or Figma.
Loading Color Palette Generator…
Your files never leave your device
About this tool
This color palette generator builds harmonious color schemes for websites, apps, brands and illustrations. Start from one base color and a harmony rule, or upload a photo and pull its main colors out. Every color comes with its shades, HEX, RGB and HSL values and a contrast check, and the whole palette exports straight into your code or design tool.
How to create a palette
- Pick a base color, or upload an image to extract a palette from it.
- Choose a harmony rule (see below) or start from a preset.
- Adjust colors, then click any color or shade to copy its value.
- Check the WCAG contrast results before using colors for text.
- Export the palette in the format you need.
Color harmony rules
- Complementary: two colors opposite each other on the color wheel, for strong contrast.
- Analogous: neighbors on the wheel, calm and natural.
- Triadic: three evenly spaced colors, lively but balanced.
- Tetradic and double split: four colors for rich schemes; let one dominate.
- Split complementary: a base color plus the two neighbors of its complement, softer than complementary.
- Monochromatic: tints and shades of one hue, elegant and safe.
- Custom: pick each color yourself.
Export formats
Copy or download the palette as CSS custom properties, SCSS variables, a Tailwind color config, JSON, Swift (iOS), Android XML colors or a Figma-ready list. The gradient builder creates linear, radial or conic gradients from your colors and copies the CSS.
Tips for a palette that works
- Use the 60-30-10 rule: a dominant color for most of the space, a secondary color, and an accent for buttons and highlights.
- Check text contrast. WCAG AA asks for at least 4.5:1 for normal text, AAA for 7:1.
- Add neutrals. Most interfaces need a gray scale besides the brand colors.
- Test in dark mode if your product has one; saturated colors can glow on dark backgrounds.
To check one pair of colors in detail, use the contrast checker.
Frequently asked questions
Can I get a color palette from an image?
Yes. Upload a photo and the tool extracts its dominant colors into a palette you can edit and export.
What is a color harmony?
A rule for choosing colors that look good together based on their positions on the color wheel, such as complementary, analogous or triadic.
Can I export the palette to Tailwind CSS?
Yes. Choose the Tailwind export to get a colors config you can paste into your Tailwind setup. CSS, SCSS, JSON, Swift, Android and Figma formats are available too.
How do I know if text will be readable on a color?
The palette shows a WCAG contrast check. Aim for at least 4.5:1 for normal text (AA) or 7:1 for the stricter AAA level.
How do I copy a color code?
Click any color or shade and its value is copied. HEX, RGB and HSL values are shown for every color.
Can I make a gradient from my palette?
Yes. The gradient builder makes linear, radial or conic gradients from your colors and copies the CSS.