Generate perfect color palettes
in 3 seconds
Press Space to generate. Click to lock. Export to CSS, Tailwind, or JSON.
No signup. No limits. Just colors that work.
🎹 Press SPACE to generate • 🔒 Click any color to lock it • 📋 Copy codes instantly
👆 Tap "Generate" • 🔒 Tap colors to lock • 📋 Tap hex codes to copy
Dashboard Designer
Create custom dashboard mockups. Pick Admin, Analytics, E-commerce, SaaS, or Project templates. Customize colors, gradients & fonts. Export as image or code.
What you can do
Dashboard Designer
Design custom dashboards. Pick template, colors, gradients & fonts. Export as image or code.
Palette Generator
Create unique color schemes in seconds. Hit Space to generate, click to lock colors.
Explore Millions
Browse millions of palettes. Warm, cool, neon, sunset—find your perfect combo.
Image Picker
Extract colors from any photo. Upload and get a ready-to-use palette.
Contrast Checker
Test WCAG accessibility. Ensure your text is readable for everyone.
Palette Visualizer
Preview palettes on real designs—dashboards, landing pages, mobile.
Gradient Maker
Build linear, radial, conic gradients. Add stops, copy CSS instantly.
Browse Gradients
Millions of gradient presets. Copy CSS or use as palette.
Color Picker
Get color info, harmonies, accessibility for any hex.
Color Names
90+ named colors with hex codes. Quick reference.
Text & Fonts
Browse 150+ fonts, choose presets, preview and download as PNG.
Collage Maker
Combine image + palette into a shareable collage.
Your Library
Save palettes. Organize, search, load anytime.
Export
CSS, Tailwind, JSON, SCSS, SVG. Copy or download.
Palettes by Mood
View all moods →Palettes by Industry
View all industries →How It Works
Generate
Press Space or tap Generate to create a random color palette instantly.
Customize
Lock colors you love, adjust hues, or choose from millions of presets.
Export
Copy hex codes, export to CSS, Tailwind, JSON, or save to your library.
Generate unlimited palettes
Press Space to generate • Click a color to lock it • Lock colors you love. Generate until it's perfect.
Color harmony
Build relationships. Choose a base color and explore complementary, triadic, analogous, and split schemes.
Color wheel reference
Harmony mode
Base color
Preview
Gradient lab
Build linear, radial, or conic gradients. Add stops, adjust angle, then copy the CSS.
background: linear-gradient(160deg, #6366f1, #8b5cf6);Contrast checker
Test WCAG AA/AAA compliance, simulate color blindness, and ensure your designs are readable for everyone.
How does this combination look? Test different text sizes below.
Extract from image
Drop a photo. We'll pull the dominant tones and suggest a balanced palette.
Drop image here
or click to browse
No colors extracted yet
Upload an image to get started
Palette visualizer
See your colors in real designs. Dashboard, landing page, mobile app, cards, e-commerce, blog—preview before you build.
Preview your palette on 6 templates. Switch tabs to explore different layouts.
Your library
All saved palettes. Load, copy, rename, or delete. Search and sort to find what you need.
Your library is empty
Save your first palette to see it here. Click the "Save" button after generating a palette you love.
Generate a Palette →Export for any workflow
Copy CSS variables, Tailwind config, or JSON. Paste into Figma, VS Code, or your design system.
:root {
}