Color Palette Generator
Generate color schemes, extract a palette from a photo, and export as CSS, Tailwind, SCSS, JSON, or PNG
Color Schemes Explained
- • Complementary: Colors opposite on the color wheel. High contrast.
- • Analogous: Colors adjacent on the color wheel. Usually smoother together.
- • Triadic: Three colors evenly spaced on the color wheel. More contrast than analogous.
- • Monochromatic: Variations of a single hue.
- • Random: Random colors with no wheel rule.
Tip: Click on any color to copy its hex code. Use the lock icon to keep colors when regenerating, or switch to "Extract from an Image" to pull a palette straight from a photo.
How to Use
- 1Choose a color scheme type (Complementary, Analogous, etc.), or switch to Extract from an Image
- 2Select a base color using the color picker, or upload a photo to sample colors from
- 3Click 'Generate Palette' (or let extraction run automatically after upload)
- 4Lock colors you want to keep by clicking the lock icon
- 5Click on any color to copy its hex code, or use Export for a CSS, Tailwind, SCSS, JSON, or PNG snippet
Tips
- •Use complementary colors for high impact and contrast
- •Analogous colors create harmonious and calming designs
- •Monochromatic schemes are perfect for elegant, minimalist designs
- •Lock your favorite colors and regenerate to explore variations
- •Extract from an Image works best on photos with a few dominant colors; busy, high-detail images produce more averaged, muted swatches
Frequently Asked Questions
What are complementary colors?
Complementary colors sit opposite each other on the color wheel. Used together, they create high contrast. Blue and orange are one example.
What's the difference between analogous and triadic colors?
Analogous colors sit next to each other on the color wheel (for example blue, blue-green, and green) and tend to feel smoother together. Triadic uses three colors equally spaced around the wheel, which usually adds more contrast.
Can I lock colors and regenerate others?
Yes. Click the lock icon on any color to keep it while generating new colors for the unlocked positions. You can build the palette one lock at a time.
What color formats can I copy?
You can copy colors in HEX (#FF5733), RGB (rgb(255, 87, 51)), or HSL (hsl(9, 100%, 60%)). Click the format you want to copy.
Can I create a palette from a photo instead of picking a base color?
Yes. Switch to "Extract from an Image" mode and upload a photo. The tool samples the image's pixels in your browser with median-cut color quantization and returns the 5 most representative colors. No AI and no upload to a server. The image never leaves your device.
Can I export this palette for CSS or Tailwind?
Yes. The Export section below the palette generates CSS custom properties, SCSS variables, a Tailwind config colors block, or JSON, plus a downloadable PNG swatch card with each color's hex code. Copy the snippet or download it as a file.
How do I use these colors in my designs?
Copy individual color codes, or use the Export section to generate a CSS, SCSS, Tailwind, or JSON snippet for the whole palette.