Color Palette Generator
Generate matching colors from a HEX code, extract a palette from an image, or explore theme presets. Use General Palette mode for unrestricted swatches, or Website / UI mode for suggested color roles and a protected light background. Edit, lock, compare contrast, and export your palette.
Build Your Color Palette
Choose a purpose first, then a starting method. Lock colors you want to keep and regenerate only the remaining swatches.
General Palette keeps every swatch fully editable. Use it for graphics, illustration, branding, mood boards, and other color exploration.
Maximum 12 MB. The selected image is processed in your browser; it is not uploaded by this tool. Dominant-color extraction may differ from an exact pixel sample.
Selected pixel:
The sample reads one pixel at the mapped source-image coordinate. Semi-transparent pixels are blended against white for the resulting opaque HEX color.
Check two palette colors
Choose the actual foreground and background colors you plan to pair. This checks that pair only; it does not certify an entire website or design.
How to Use This Color Palette Generator
- Choose a purpose: use General Palette when every swatch should stay unrestricted, or Website / UI Palette when you want suggested roles and a protected light background.
- Choose a starting method: enter a HEX color, extract colors from an image, or use a theme preset.
- Refine: edit individual HEX values, lock colors you like, and regenerate the remaining swatches. In Website / UI mode you can also change each suggested role.
- Check real combinations: compare any foreground and background pair instead of assuming colors are accessible because they look harmonious.
- Export: copy HEX values, CSS variables or JSON, or download a PNG palette card.
Generate Matching Colors From a HEX Code
Already have a brand color or a HEX value? The From HEX mode preserves the exact starting color in the generated palette and uses color-wheel relationships to create supporting shades. Adjust each swatch independently when the automatic result needs refinement.
| Color harmony | Relationship | Practical use |
|---|---|---|
| Monochromatic | One hue with different lightness levels | Restrained interfaces and supporting shades |
| Analogous | Neighboring hues | Gentle, cohesive visual transitions |
| Complementary | Opposite hues on the color wheel | Distinct accents and calls to action |
| Split complementary | Base hue and two hues near its opposite | Contrasting options with more flexibility |
| Triadic | Three hue families spaced about 120° apart | Colorful graphics and broader brand systems |
| Tetradic | Two complementary hue pairs | Multiple roles in larger color systems |
Extract a Color Palette From an Image
Use an image when your starting point is a visual rather than a known HEX color. The image palette extractor groups sampled pixels into dominant color families. In General Palette mode, all requested swatches come from those image color families. In Website / UI mode, the final swatch becomes a derived light background. For a logo edge, solid background, or tiny detail, use the image picker to select a specific source pixel and replace the swatch you choose.
Why can results differ? A dominant-color palette describes prominent regions, while an eyedropper reads one location. A small highlight can be easy to sample but too rare to appear among dominant colors. Transparent pixels and anti-aliased edges may also affect the sampled HEX value.
Check Color Contrast for Real Foreground and Background Pairs
A palette can look harmonious and still fail as a text/background combination. Each swatch shows whether black or white produces stronger contrast, and the pair checker lets you compare any two palette colors directly. Website / UI mode also protects a light background swatch, but that does not make every other color suitable for text on it.
As a reference, WCAG 2.2 Level AA specifies at least 4.5:1 contrast for normal text and 3:1 for large text, subject to exceptions. These measurements do not certify an entire page or brand system as accessible. Verify all real UI states, links, icons, and form controls in your final design.
Copy HEX, CSS, JSON or a Palette PNG
Copy one swatch when you need a single color, copy the full HEX list for a brief, or export CSS variables and JSON for a website or design system. In Website / UI mode, exports include your selected role names. The PNG export contains only the generated swatches and labels; it does not include the uploaded source image.
Tip: role names are suggestions, not universal rules. Change them when your actual design system uses a different structure, and check the real foreground/background combinations before publishing.
Continue Your Design With Free Tools
Color Palette Generator FAQ
Can I create a color palette from one HEX code?
Yes. Enter a six-digit HEX value, choose a harmony and generate a palette. The starting HEX color is preserved in the generated set while unlocked supporting swatches can vary.
Can I extract colors from a photo?
Yes. Choose a JPG, PNG or WebP file to create a dominant-color palette. You can also click an exact source-image pixel when a small detail or specific location matters.
Is my image uploaded to a server?
No. File selection, dominant-color extraction and exact-pixel sampling for this tool run locally in your browser.
What is the difference between General Palette and Website / UI Palette?
General Palette keeps every swatch unrestricted. Website / UI Palette reserves a light final background and adds editable suggested roles such as primary, accent, text, surface and background.
Why can an extracted palette differ from a pixel I click?
Dominant-color extraction summarizes larger color regions, while the picker reads one mapped source pixel. A tiny highlight may be easy to sample but too rare to become a dominant color.
Can I edit and lock colors?
Yes. Enter a valid HEX value or lock a swatch while regenerating. In Website / UI mode, the protected background swatch must remain very light; General Palette has no such restriction.
Can I check contrast between two palette colors?
Yes. Use the pair checker to select a foreground and background. It reports the contrast ratio and whether that pair reaches the common WCAG 2.2 AA thresholds for normal and large text. This does not certify the whole design.
Can I export the result?
Yes. Copy HEX values, CSS variables or JSON, or download a PNG palette card. The exported PNG does not include an uploaded source image.
Share This Free Palette Tool
Know someone choosing colors for a website, brand or graphic? Share the generator or copy its link.
Create Better Visuals and Trackable Campaigns
Explore free tools for QR codes, campaign tracking links, structured AI prompts, color palettes, CSS gradients, random colors, and proportional image or video dimensions.
