Color Palette Creator:
Extract Beautiful Colors From Any Image
Upload a photo and instantly pull the dominant colors from it. Copy HEX, RGB, and HSL codes, pick custom colors with the eyedropper, and export ready-to-use CSS variables - all in your browser.
Drag and Drop Your Image Here
Supports JPG, PNG, WEBP, GIF, and BMP. Your image never leaves your device.
Hover to preview a color. Click to add it to your palette.
Tip: Move your mouse slowly over the image to inspect exact pixel colors. Click anywhere to capture that color as a swatch.
Upload an image above to auto-extract colors.
CSS variables (also called custom properties) let you store your palette colors in one place and reuse them anywhere in a stylesheet - like named paint cans for your website.
Privacy First: This tool processes your images entirely within your local browser. Your photos are never uploaded, stored, or transmitted to any external servers.
The Ultimate Guide to Color Palettes and Image Extraction
Whether you are a web designer, illustrator, marketer, or hobbyist, understanding color theory and modern extraction techniques can transform your creative work. This guide explains the core concepts in plain language.
All three formats describe the same thing - a specific color - but they do so in very different ways. Think of them as three different languages for saying the same word.
HEX (Hexadecimal): This is the most common format on the web. A HEX code looks like #4F2E1D. The # sign is followed by six characters, where every two characters represent the intensity of Red, Green, and Blue in that order, written in base-16 (hexadecimal) math. So #FF0000 is pure red (Red=255, Green=0, Blue=0). Designers love HEX codes because they are compact and easy to copy-paste into any design tool.
RGB (Red, Green, Blue): This format is more readable. Instead of letters and numbers, it uses three plain numbers from 0 to 255 - one for Red, one for Green, one for Blue. For example, rgb(79, 46, 29) is a deep, warm brown. Every screen you have ever looked at produces color by mixing tiny red, green, and blue lights together, so RGB is how monitors actually think about color under the hood.
HSL (Hue, Saturation, Lightness): This format is the most human-friendly. Hue is a degree on the color wheel (0 is red, 120 is green, 240 is blue). Saturation is how vivid or washed-out the color is, from 0% (gray) to 100% (full color). Lightness goes from 0% (black) to 100% (white), with 50% being the pure hue. Designers often prefer HSL when they want to fine-tune a color because adjusting lightness or saturation is immediately intuitive - unlike trying to mentally balance three RGB numbers.
A typical photograph can contain millions of unique pixel colors. The challenge is to reduce that complexity into a small set of representative colors that capture the visual essence of the image. The technique that makes this possible is called Color Quantization.
The most popular algorithm for this is called Median Cut. Imagine sorting all the pixels in an image into a single, giant box of mixed paint dots. The algorithm finds whichever color dimension (Red, Green, or Blue) has the widest spread of values across all the dots in the box, and then splits the box in half at the median value along that dimension. This creates two boxes. The process repeats - each time splitting the box with the widest spread - until you have as many boxes as colors you want. The average color of all the pixels in each final box becomes one representative swatch in your palette.
Another common approach is k-means clustering, which places a set number of imaginary color "centers" in the color space and then iteratively moves each center toward the average color of all nearby pixels until the clusters stabilize. Both methods produce excellent results for design work. This tool uses a battle-tested library (Color Thief) that applies optimized quantization directly in your browser, with no server involved.
Beautiful palettes are rarely accidental. Classic color theory gives us several reliable frameworks for building harmonious sets of colors, all based on relationships on the color wheel.
Complementary Colors sit directly opposite each other on the color wheel - for example, blue and orange, or red and green. They create maximum contrast and visual energy. This is why sports teams so often pair blue and orange jerseys, or why fast food brands lean on red and yellow.
Analogous Palettes use colors that sit next to each other on the wheel, like blue, teal, and green. These palettes feel calm, cohesive, and easy on the eyes - they mimic the natural color gradations we see in sunsets or forests.
Triadic Palettes pick three colors equally spaced around the wheel (120 degrees apart). They are vibrant and balanced, offering variety without the jarring clash of pure complementary contrast. The key to a visually appealing palette is not just which hues you choose, but also how you balance their saturation and lightness. A common rule is the 60-30-10 principle: let one dominant color take 60% of the visual space, a secondary color 30%, and an accent color just 10%. This creates hierarchy and prevents visual chaos.
CSS Variables (formally called CSS Custom Properties) are one of the most powerful modern features of stylesheets. They let you define a color - or any value - once, give it a descriptive name, and then reference that name everywhere in your CSS. If you ever want to change the color, you only change it in one place, and the update cascades throughout your entire site automatically.
A CSS variable is declared with a double dash prefix, like this: --color-primary: #4F2E1D;. You define your variables inside a :root selector (which targets the top-level element of the page, making the variables available everywhere). To use a variable, you wrap it in var(): color: var(--color-primary);
Here is a practical example. After extracting a palette from your brand photography, you might write:
:root { --color-1: #3B1F14; --color-2: #D4874E; --color-3: #F2C97E; }
Now instead of hunting for hard-coded hex values scattered across thousands of lines of CSS, every developer on your team simply uses var(--color-1). Updating the brand color in the future takes a single edit. This is the practice that separates maintainable, professional codebases from messy ones. The CSS generator built into this tool outputs exactly this format, ready to paste into any project.
Not every photo makes an equally good source for a color palette. Landscape photography, product shots with controlled lighting, and editorial fashion images tend to yield the most useful and cohesive palettes because they have intentional, limited color stories.
Choose images with strong color contrast. A photo of a single red apple on a white tablecloth will give you a crisp, high-contrast palette. A photo of a crowd scene will give you a muddy average of hundreds of conflicting hues.
Use the eyedropper for nuance. The automatic extraction algorithm excels at finding the most dominant colors, but it may miss the beautiful muted sage-green in a shadowed corner or the precise warm ivory of a highlights zone. The interactive eyedropper in this tool lets you pinpoint those subtle tones and add them manually.
Edit your swatches before exporting. Treat the auto-extracted palette as a starting draft, not a final answer. Remove colors that are too similar to each other. Use the eyedropper to replace a near-black background swatch with the more interesting mid-tone that represents the image better. Great color work is always a mix of algorithmic intelligence and human editorial taste.