Color Palette supports two modes: color scheme generation and image palette extraction. In Generate mode, pick a base color and a harmony rule to create a harmonious palette. In Extract mode, upload an image to auto-extract its dominant colors, or use the eyedropper for precise picking. All processing happens in your browser.
Upload images to auto-extract color palettes with eyedropper for precise picking
Export as CSS variables, Tailwind v4, and SCSS variables
Lock individual colors to preserve them when regenerating
Click to copy any color in HEX, RGB, or HSL format
Fully offline processing -- nothing uploaded to servers
How to Use
1In Generate mode, pick a base color and select a harmony rule
2The palette updates automatically -- lock or copy individual colors
3Switch to Extract mode and upload an image to extract its palette
4Click an export button to copy CSS/Tailwind/SCSS configuration
FAQs
How is this different from the Color Converter and Color Picker tools?
Color Converter converts between HEX, RGB, HSL, and other formats. Color Picker picks a single color from an image. Color Palette generates harmonious color schemes from a base color or extracts complete palettes from images.
Can I lock individual colors in a palette?
Yes. Each swatch has a lock button. Locked colors are preserved when you change the base color or harmony rule. Only unlocked colors are regenerated.
Which harmony rules should beginners use?
Complementary creates high-contrast designs. Analogous is subtle and unified -- great for branding. Monochromatic is clean and professional. Triadic and tetradic are more advanced but create rich, balanced palettes.
How accurate is image palette extraction?
Using color bucketing with Euclidean distance merging, the tool extracts up to 8 dominant colors. Transparent pixels are filtered, and each color shows its percentage. For precise picking, use the eyedropper mode.
Is my data uploaded to any server?
No. All color computation and image processing happens entirely in your browser. Nothing is uploaded.
Which Tailwind version does the export target?
The Tailwind export generates Tailwind CSS v4 @theme custom color syntax using --color-* variables.