Palette de Couleurs depuis Image — Outil en ligne gratuit

Color Palette from Image -- Extract Dominant Colors Instantly

The Outilolis Color Palette from Image tool extracts 8 dominant colors from any image using a canvas-based median-cut algorithm. Upload a photo, design mockup, or screenshot and get a complete color palette with hex, RGB, and HSL values. Export as CSS variables, JSON, Tailwind config, or a downloadable swatch image. Everything runs in your browser -- your images are never uploaded to any server.

How the color extraction algorithm works

The tool uses a median-cut color quantization algorithm, a technique originally developed for reducing the number of colors in an image while preserving visual quality. Here is how it works step by step:

• Pixel sampling -- the image is drawn onto a canvas and every pixel's RGB values are read via getImageData(). For performance, large images are downscaled to 200px width first.
• Initial bucket -- all pixels start in a single color "bucket" spanning the full RGB range.
• Median cut -- the bucket with the largest color range is split along its widest axis (R, G, or B) at the median value, creating two new buckets.
• Repeat -- the splitting continues until the desired number of buckets (8) is reached.
• Averaging -- each bucket's pixels are averaged to produce a single representative color.
• Sorting -- colors are sorted by frequency (number of pixels in each bucket) so the most dominant color appears first.

Use cases for image color extraction

• Design systems -- derive a color palette from brand photography for consistent theming
• Web design -- extract colors from hero images to create matching backgrounds, borders, and text colors
• Data visualization -- generate color scales based on source imagery
• Art and illustration -- analyze color composition in paintings, photography, or film stills
• Branding -- create mood boards by extracting palettes from inspiration images
• Accessibility -- identify dominant background/foreground colors to check contrast ratios

Understanding color formats

Each extracted color is displayed in three formats:

• Hex -- #FF5733 -- the most common format for CSS and web design. 6 hexadecimal digits representing Red, Green, Blue channels (00-FF each).
• RGB -- rgb(255, 87, 51) -- decimal representation of the same Red, Green, Blue channels (0-255 each). Used in CSS and most programming languages.
• HSL -- hsl(11, 100%, 60%) -- Hue (0-360 degrees), Saturation (0-100%), Lightness (0-100%). More intuitive for humans -- easy to create lighter/darker variants by adjusting L.

Export format details

The tool supports four export formats to integrate the palette into your workflow:

• CSS Variables -- ready to paste into your stylesheet: :root { --palette-1: #FF5733; ... }
• JSON -- array of hex strings for programmatic use: ["#FF5733", "#DAF7A6", ...]
• Tailwind Config -- extend your tailwind.config.js colors object with the extracted palette
• Image Swatch -- generates a downloadable PNG image showing all palette colors with hex labels, perfect for sharing or including in design documents

Tips for better color extraction

• High-quality images -- JPEG compression artifacts can introduce noise colors. Use PNG or high-quality JPG for cleaner results.
• Crop first -- if you want colors from a specific area, crop the image before uploading to exclude irrelevant regions.
• Consider background -- a large white or black background will dominate the palette. Crop or mask it out for better results.
• Multiple images -- extract palettes from several related images and look for common colors to build a cohesive theme.

Median-cut vs. K-means for color quantization

Two popular algorithms for color extraction are median-cut and K-means clustering. Median-cut is deterministic (same input always produces the same output), fast, and splits colors evenly. K-means can produce slightly more perceptually accurate results but is iterative, slower, and non-deterministic. This tool uses median-cut for its speed and reliability in a browser environment.