Palette Thief Documentation
Extract, generate, and export beautiful color palettes from any image. This guide covers all features and workflows.
Overview
Palette Thief Ultimate is a browser-based color palette extraction tool. Upload any image and instantly extract representative colors. Generate random palettes, create color variations, and export in multiple formats for your design workflow.
All image processing happens locally in your browser. No images are uploaded to any server. Your files stay on your device.
Key Features
- Image Extraction — Upload PNG, JPG, GIF, or WebP images and extract 4 to 24 colors
- Random Generator — Create palettes from presets like Pastel, Neon, Mono, Earthy, Ocean
- Color Variations — Generate tints, shades, analogous, and complementary colors from any hex
- Live Preview — Full-screen visualization of your palette
- Video Export — Export animated palette videos in WebM format
- Multiple Exports — CSS Variables, Tailwind, Figma Tokens, JSON, GPL, and more
- Palette Library — Save, organize, and reload your favorite palettes
- Share URLs — Generate shareable links to your palettes
Interface
The interface is divided into two main panels. The left panel contains controls for image upload, extraction settings, and tools. The right panel displays your extracted palette and export options.
Left Panel
Drag and drop images or click to browse. Supports PNG, JPG, GIF, and WebP formats.
Control palette size and filtering options for color extraction.
Sort, shuffle, and organize your palette colors.
Generate random palettes with customizable presets and sliders.
Input a hex color and generate tints, shades, and harmonies.
Create CSS gradients from any two colors in your palette. Click the copy icon next to Generate Gradient to copy the CSS directly to clipboard.
Right Panel
- Palette Grid — Displays extracted colors with hex values, names, and contrast information
- Intelligence Score — Shows palette quality metrics (contrast, harmony, range)
- Lock All / Unlock All — Locks or unlocks every swatch in the palette simultaneously
- Auto-Save Indicator — A subtle pill in the header confirms every palette state is automatically saved
- Action Bar — Export dropdown, Live Preview, and Share buttons
- Palette Library — Saved palettes with import/export functionality
- History — Recent palette states for quick restoration
Quick Start
Get started with Palette Thief Ultimate in three simple steps.
Drag and drop an image onto the dropzone, or click to browse your files. Supported formats: PNG, JPG, GIF, WebP.
Choose your palette size (4-24 colors) and toggle filtering options. Click "Regenerate" to extract colors.
Click "Exports" and choose your format: CSS Variables, Tailwind, Figma Tokens, JSON, and more.
Press R to quickly regenerate your palette, or Space to generate a new random palette using the last preset.
Extraction Settings
Fine-tune how colors are extracted from your images using these settings.
| Setting | Options | Description |
|---|---|---|
| Palette Size | 4 6 8 12 16 24 |
Number of colors to extract. Default is 16. |
| Ignore Dark Pixels | On / Off | Exclude very dark colors (luminance below 15%) from extraction. |
| Ignore Bright Pixels | On / Off | Exclude very bright colors (luminance above 90%) from extraction. |
| Boost Saturation | On / Off | Increase color saturation by 30% for more vibrant palettes. |
Regenerate with Locks
The Regenerate button respects locked colors. Lock specific swatches by clicking the "Lock" button on any color, then regenerate. Locked colors stay in place while new colors fill the remaining slots.
Tools
Organize and refine your palette using the sorting and manipulation tools.
| Tool | Shortcut | Description |
|---|---|---|
| Sort by Hue | H | Arrange colors by their hue value (0-360 degrees on the color wheel). |
| Sort by Saturation | S | Arrange colors from least to most saturated. |
| Sort by Brightness | B | Arrange colors from darkest to lightest. |
| Shuffle | X | Randomize the order of colors in your palette. |
| Remove Duplicates | — | Remove colors with identical or very similar hex values using perceptual distance matching. |
| Undo | Ctrl + Z | Step back through up to 40 previous palette states. Works after any destructive operation. |
| Redo | Ctrl + Y | Step forward after an undo. Also available as Ctrl + Shift + Z. |
| Expand All Tints | — | Opens the tint/shade strip on every swatch at once. Click again to collapse all. Expanded state persists through regeneration, sorting, and locking — stays open until you close it. |
Random Generator
Create random color palettes without an image using preset color schemes and adjustable parameters.
Presets
Soft, low-saturation colors with high lightness. Ideal for gentle, calming designs.
High-saturation, vibrant colors. Great for bold, energetic designs.
Single-hue palette with varying saturation and lightness. Clean and cohesive.
Warm browns, ambers, and terracottas. Natural, organic feel.
Teals, blues, and cool tones. Calming, aquatic aesthetic.
Sliders
| Slider | Range | Effect |
|---|---|---|
| Spread | 0 - 100 | How far apart colors are on the color wheel. Low = analogous, High = complementary spread. |
| Vibrancy | 0 - 100 | Overall saturation intensity. Higher values produce more vivid colors. |
| Chaos | 0 - 100 | Randomness applied to each color. Higher values create more variation. |
Press Space to instantly regenerate a palette using the last selected preset. Great for quickly browsing variations.
Color Variations
Generate color variations from any hex value. Enter a color manually or use the native color picker, then choose a variation mode.
Variation Modes
| Mode | Output | Description |
|---|---|---|
| All | ~20 colors | Complete set: tints, shades, analogous, and complementary colors. |
| Tints | 5 colors | Progressively lighter versions of the base color. |
| Shades | 5 colors | Progressively darker versions of the base color. |
| Analogous | 4 colors | Colors adjacent on the color wheel (±22° and ±44°). |
| Complement | 3 colors | True complement (180°) and split complements (150° and 210°). |
Click Add to Palette to append the generated variations to your current palette.
Working with Swatches
Each color in your palette is displayed as a swatch card with several interactive elements.
Swatch Information
- Hex Value — The color's hexadecimal code (e.g., #E74C3C)
- Color Name — An auto-generated name for the color
- Contrast Badge — Recommended text color (White/Black) with WCAG rating
Swatch Actions
| Action | How | Result |
|---|---|---|
| Copy Hex | Click the swatch | Hex code copied to clipboard |
| Lock Color | Click "Lock" button | Color preserved during regeneration |
| Lock All / Unlock All | Header button | Locks every swatch at once. Button toggles to "Unlock All" when all are locked. |
| View Details | Click "Detail" link | Opens sidebar with RGB, HSL, CMYK, LCH values |
| View Tints/Shades | Click "Tints" link | Expands 9-step tint/shade strip |
Detail Sidebar
Click "Detail" on any swatch to open the color detail sidebar, which displays:
- Color Values — HEX, RGB, HSL, CMYK, LCH, and oklch formats
- Accessibility — Contrast ratios against white and black with WCAG ratings
- Tints & Shades — 9-step strip from dark to light (click any to copy)
Export Formats
Export your palette in multiple formats for different design and development workflows.
Code Exports
CSS custom properties for use in any stylesheet.
Structured data with hex, RGB, and color names.
Plain text list with color information.
GIMP palette format for open-source image editing.
Design Tool Exports
W3C Design Tokens format for Figma's Tokens plugin.
JavaScript config for Tailwind CSS projects.
Complete CSS file with semantic variables and utility classes.
Visual Exports
Standalone HTML file with color swatches. Exports in your current theme — dark or light background.
Image file with color swatches and labels. Exports in your current theme — dark or light background.
Animated palette video with multiple styles and resolutions.
PNG Card and HTML Preview exports match your current app theme at the moment you export. Switch to light mode before exporting to get a light-background card, or stay in dark mode for a dark-background card. Video export is theme-independent.
Clipboard
All hex codes separated by spaces.
One hex code per line.
Video Export Styles
When exporting a video, choose from four animation styles:
| Style | Description |
|---|---|
| Sweep | Colors reveal left-to-right with a sliding curtain effect. |
| Bars | Colors animate upward as vertical bars of varying heights. |
| Cards | Individual color cards slide in with staggered timing. |
| Wave | Gradient background with animated wave overlays. |
Video exports are available in 480p, 720p, and 1080p resolutions.
Palette Library
Save palettes for later use and manage your collection.
Saving Palettes
Click Save to Library to store your current palette. You'll be prompted to give it a name. Palettes are saved locally in your browser.
Library Actions
| Action | Description |
|---|---|
| Load | Replace current palette with saved palette. |
| Delete | Remove palette from library. |
| Export Library | Download all saved palettes as a JSON file. |
| Import Library | Load palettes from a previously exported JSON file. |
Palettes are stored in your browser's local storage. Use Export Library to back up your collection before clearing browser data.
Sharing
Share your palettes with others using URL encoding.
Share via URL
Click the Share button to copy a URL that contains your palette. When someone opens the link, the palette loads automatically.
https://palettethief.app#E74C3C,F39C12,2ECC71,3498DB,9B59B6The URL format is simple: hex codes without the # symbol, separated by commas.
Keyboard Shortcuts
Speed up your workflow with keyboard shortcuts. Press ? at any time to view the shortcuts modal.
Palette Actions
| Action | Shortcut |
|---|---|
| Regenerate palette | R |
| Undo | Ctrl + Z |
| Redo | Ctrl + Y |
| Sort by hue | H |
| Sort by saturation | S |
| Sort by brightness | B |
| Shuffle palette | X |
| Save to library | Ctrl + S |
Random Generator
| Action | Shortcut |
|---|---|
| Regenerate last preset | Space |
| Pastel preset | 1 |
| Neon preset | 2 |
| Mono preset | 3 |
| Earthy preset | 4 |
| Ocean preset | 5 |
Views
| Action | Shortcut |
|---|---|
| Open Live Preview | L |
| Open Video Export | V |
| Open shortcuts modal | ? |
| Close any overlay | Esc |
Tips & Best Practices
Getting Better Palettes
- Use high-contrast images — Images with distinct color regions produce more varied palettes.
- Enable "Ignore Dark" for photos — Removes black backgrounds and shadows from results.
- Enable "Ignore Bright" for screenshots — Removes white backgrounds from UI screenshots.
- Lock colors before regenerating — Preserve colors you like while exploring alternatives.
- Start with fewer colors — 4-8 colors often produce cleaner palettes than 16-24.
Workflow Tips
- Use Undo freely — Every palette operation is undoable up to 40 steps. Experiment without fear of losing your work.
- Lock All before adding variations — Lock your entire palette first, then add tints or variations — only the new colors get regenerated.
- Expand All Tints before deciding — Open all shade strips at once to compare tonal ranges across your whole palette side by side.
- Switch themes before exporting — PNG Card and HTML exports match your current theme. Set light or dark mode first depending on the background you want in the export.
- Use History — The History panel stores your last 20 palette states. Click any to restore.
- Check the Intelligence Score — Hover over the score widget to see contrast, harmony, and range breakdowns.
- Use Live Preview — Full-screen mode helps you evaluate colors without distractions.
- Export before clearing — Save or export your palette before uploading a new image.
Accessibility
- Check contrast ratios — Each swatch shows WCAG ratings for white and black text.
- Use the Detail sidebar — View complete accessibility information for any color.
- Aim for AA or better — A contrast ratio of 4.5:1 or higher ensures readable text.