Color Palette
Extract dominant colors from any image. Get hex, RGB, HSL values, contrast grades, copy-all-as-CSS, deep-link settings.
Drop an image here or click to upload
PNG, JPG, WebP
About this tool
Drop an image into the tool and it extracts the dominant colors using median-cut quantization, giving you the palette that best represents the picture. Each swatch shows its hex, RGB and HSL values, a contrast grade against white and black, and a one-click copy button.
Example: uploading a sunset photo might yield #E8743C, #3B2C5F, #F2C49B as the top three colors. Use the "Copy all as CSS" button to get ready-to-paste custom properties such as --c1: #E8743C; for your design system.
Useful when you need to build a brand palette from a hero image, create accessible color schemes for a marketing page, or sample real-world colors for a UI mockup.
FAQ
How many colors can I extract? ›
You can choose between 2 and 12 colors. Fewer colors gives a bolder, more abstract palette; more colors captures finer detail at the cost of simplicity.
Are the contrast grades accessibility-checked? ›
Each swatch is graded AA or AAA against white and black text based on WCAG contrast ratio thresholds (4.5:1 for normal text, 3:1 for large text). Use the grade as a guide for choosing readable text colors.
Can I use the extracted colors in my CSS? ›
Yes. The "Copy all as CSS" button exports every color as a CSS custom property (e.g. --c1: #hex;), ready to paste into :root or any selector.
Is the image uploaded to a server? ›
No. All processing happens locally in your browser using the Canvas API. The image never leaves your device.
What is the difference between Color Palette and Image Color Picker? ›
Color Palette extracts dominant colors from the entire image (median-cut quantization) — you get a small set of representative swatches sorted by frequency. The <a href="/image-color-picker">Image Color Picker</a> lets you click individual pixels with a magnified preview to get exact per-pixel color values. Use this tool when you want a summary of the main colors; use the Image Color Picker when you need a precise pixel match from a specific spot.
Can I generate a color scheme from a base color instead of extracting from an image? ›
Yes — the <a href="/color-harmony">Color Harmony</a> tool generates coordinated palettes (complementary, analogous, triadic, tetradic, split-complementary, monochromatic) from any base color you pick. Use it when you have a brand color and need a balanced set of accent colors; use this tool when you want the dominant color story from a specific image.