Extract Color Palette from Image
Extract dominant colors from any image for free, right in your browser.
.jpg, .png, .webp · up to 50 MB
Why use it
Design palettes extracted from real images
HEX, RGB and HSL
Get codes in all three widely used formats, ready to copy.
100% private
Analysis happens in your browser. Your image never leaves your device.
Precise algorithm
Color quantization with Median Cut for representative and balanced colors.
Instant
Palette generated in under 1 second. No queues, no signup, no limits.
How it works
Three steps, no hassle
Upload your image
Drag and drop or select a JPG, PNG, or WebP. Up to 50 MB. No signup.
Analyze the palette
The algorithm automatically extracts the most representative colors. Adjust the number of colors if needed.
Copy the color codes
Get HEX, RGB, and HSL values for each color. Ready to use in your design.
FAQ
Got questions?
Color quantization is the process of reducing the number of distinct colors in an image while keeping the visual appearance as faithful as possible. A photographic image can contain millions of unique colors; quantization groups them into a representative set (for example, 8 or 16 colors). The most classic algorithm is Median Cut, developed by Paul Heckbert in 1982: it divides the 3D color space (RGB) into boxes, and at each iteration splits the largest box along its longest axis, assigning each box the average color of the pixels it contains. The result is a palette that well represents dominant colors but may lose nuance in infrequent tones.
For brand identity and design systems, the standard recommendation is a palette of 5 to 8 colors: 1 primary color (the most representative and identifiable), 2-3 secondary colors (complementary to the primary), 1-2 accent colors (for calls to action, highlights), and 1-2 neutrals (white, black, gray for typography and backgrounds). Larger palettes (10+ colors) are hard to keep coherent. Very small palettes (2-3 colors) can feel monotonous. For extracting a palette from a photographic image for artistic or inspirational purposes, between 6 and 10 colors usually capture the visual essence well.
HEX is the hexadecimal representation of RGB: #FF5733 equals R=255, G=87, B=51. It is the most widely used format in CSS and web design for its compactness. RGB (Red, Green, Blue) is the additive light model: mixing the three channels at their maximum values produces white (255,255,255). It is intuitive for programmers working with color calculations. HSL (Hue, Saturation, Lightness) is the most intuitive for designers: H is the angle on the color wheel (0°=red, 120°=green, 240°=blue), S is saturation (0%=gray, 100%=pure color), L is lightness (0%=black, 50%=pure color, 100%=white). Modifying a color in HSL is more predictable: to make a color darker, simply reduce L without affecting the hue.
The 60-30-10 rule is the most widely used guide in interior and graphic design: 60% of the visual space uses the dominant color (usually a neutral or the main brand color), 30% uses the secondary color (creates contrast and depth), and 10% uses the accent color (calls to action, highlights). In web interface design, this proportion adapts to: background (60%, usually white or light gray), content and typography (30%, dark gray or black), interactive elements (10%, vibrant brand color). The rule guarantees visual coherence without monotony, because there is always enough tonal variety to create visual hierarchy.
Complementary colors are opposites on the color wheel (red/green, blue/orange, yellow/violet). They create maximum visual contrast and are used for elements that must stand out clearly against the background. In sports and energy brands, red over green and blue over orange are classic combinations. Analogous colors are adjacent on the color wheel (red, orange, yellow). They create harmony and a sense of unity. They are more pleasant and less visually aggressive. For long user interfaces (apps, websites), analogous schemes are more restful on the eye. The third category, triadic colors (three equidistant colors: red, yellow, blue), balances contrast with harmony.
Color theory: Pantone system, quantization, and accessible palettes
Color theory has roots in physics and visual perception. Isaac Newton demonstrated in 1666 that white light is the sum of all colors in the spectrum by passing sunlight through a prism. Johannes Itten, a professor at the Bauhaus in the 1920s, formalized the color wheel as a pedagogical tool and established the harmonic relationships that remain the foundation of modern color design. Josef Albers, also of the Bauhaus, went further: in his book 'Interaction of Color' (1963), he demonstrated that our perception of a color is not absolute but relative to its context, a phenomenon called simultaneous contrast. A gray on a black background appears lighter than the same gray on a white background, even though the gray value is identical.
The Pantone system, founded in 1963 by Lawrence Herbert in New Jersey, solved a fundamental problem in the printing industry: two printers in different cities could not reproduce the same 'red' without a common reference system. Pantone created a standardized swatch book (the Pantone Matching System, PMS) with unique numbers for each color and precise ink mixing formulas. Today the system includes more than 1,800 colors for printing on paper, textiles, and plastics. The Median Cut algorithm, the basis of digital color quantization, solves the inverse problem: given a set of millions of colors, find the N most representative ones. The algorithm was later optimized by Xiaolin Wu (1992) with his Octree quantization method, faster and with better quality for small palettes.
Accessible color palettes are a critical consideration in interface design. Color blindness affects 8% of men and 0.5% of women of European ancestry, with lower rates in other ethnicities. The most common form, red-green color blindness (deuteranopia and protanopia), makes red and green appear indistinguishable. Designing only with red and green to differentiate states (error/success, for example) excludes millions of users. The solution is not to avoid red and green, but to add additional differentiators (icons, text, shape) and use sufficiently distinct lightness variations. Tools like Coblis (Color Blindness Simulator) allow visualizing any image as it would be perceived by a person with different types of color blindness.