🎨 Palette Generator
Press Space
to regenerate
🖼️ Image to Palette
Extract colors from image
Upload an image and Palette Grid will extract the dominant colors.
🌈 Gradient
Create Gradient
background: linear-gradient(135deg, #4f46e5, #7c3aed);
♿ Contrast Checker
WCAG Accessibility Check
Text Color
Background
The quick brown fox jumps over the lazy dog
This is how small body text looks at this contrast level. WCAG requires 4.5:1 for normal text.
21.00
Contrast Ratio
AA Normal Text
PASS ✓
AA Large Text
PASS ✓
AAA Normal Text
PASS ✓
AAA Large Text
PASS ✓
📐 Design System
Color tokens 50-900 generated from your active palette.
💡
Export and Style Guide PDF are available in 🖼️ Design System Preview. Select a font pair there before exporting.
🖼️ Design System Preview
🧩 Pick a Color Palette
Browse ready-made palettes and load them into the generator.
💾 Saved Palettes
No palettes yet
Generate and save palettes from the Palette Generator
⭐ Saved Gradients
No gradients saved yet
Create and save gradients from the Gradient tool
❤️ Favorite Palettes
No favorites yet
Heart any saved palette to add it here
⚙️ Settings
Account
Danger Zone
👁️ Color Blindness Simulator
Simulate your palette across 4 vision types
🎨
Generate a palette first, then come back here.
🖌️ Change SVG Color
Upload an SVG file to get started
📷 Image Editor
Upload an image (PNG, JPG…) to get started