How to use the image color extractor
- Drop an image on the dashed box, choose a file with the file button, or paste a copied image with Ctrl+V. On a phone, pick a photo with the file button.
- Choose between 3 and 8 under "Number of colors" and the main colors appear as a bar and cards in order of how much they are used. The width in the bar is the share of that color in the photo.
- Click the HEX, RGB or HSL value on a card to copy it. Under each card you see the contrast ratio of white text and black text on that color, so you know at once which text color reads better.
- If you want the exact color of one spot, click the photo. A circle marks the spot and that color appears as a separate card.
- Use "Copy HEX list" and "Copy CSS variables" to paste straight into a design or code, and "Save palette image" to save a PNG card with the photo thumbnail and color bars.
How the main colors are chosen
Calculating a large photo as it is would be slow, so the image is shrunk to at most 220 pixels and the colors of non-transparent pixels are collected. Similar colors are grouped into small cells of color space, the search starts from the most common color, and colors far from those already chosen are added one by one until the starting points reach the number you want.
Then a method called k-means assigns every color to the nearest main color and moves each main color to the average of its group, repeated 12 times. There is no randomness, so the same image always gives the same result, and the share each main color takes in the photo is calculated as well. All calculation happens inside your browser.
Understanding color codes and text contrast
HEX writes the red, green and blue values as two hex digits each, like #RRGGBB, and is the most common form in web design. RGB writes the same values as decimal numbers from 0 to 255, and HSL writes hue (0 to 360 degrees), saturation (%) and lightness (%), which is handy when you want to make the same color lighter or duller. This tool shows all three and lets you copy any of them.
Contrast between text and background is calculated from the relative luminance of the two colors and ranges from 1:1 (the same color) to 21:1 (white and black). The Web Content Accessibility Guidelines (WCAG) recommend at least 4.5:1 for normal text (AA), at least 3:1 for large text, and the stricter AAA level asks for 7:1 for normal text. It helps you check that text stays readable when a color from a photo is used as a button or heading background.
When building a palette from a photo, it feels natural to use the widest color as the background, mid-share colors as supporting colors and the eye-catching low-share color as the accent. If the colors come out too similar, try more colors; if there are too many, try fewer.
Typical uses include matching a presentation or blog cover image to the colors of a photo, sorting out color combinations from interior or outfit photos, recording the color mood of a painting or landscape, and choosing button and heading colors for a website from a single photo. You can paste the extracted HEX list into a design tool or copy it as CSS variables for code, so one photo is enough to start a color scheme quickly.
Tips for good results
- A photo with a plain background is mostly background color. If you need the subject's color, increase the number of colors or click the photo to pick it directly.
- Heavily compressed or dark photos can give dull colors. Use a bright, sharp original when you can.
- Colors from a logo or brand image may be subject to that brand's guidelines, so check before using them commercially.
- After choosing colors, double-check text and background pairs in the Color Contrast Checker to be safe.
- This tool never sends your image to a server, but be careful when sharing your screen if the image shows faces or personal information.
FAQ
How are the main colors chosen?
The image is shrunk to at most 220 pixels, the colors of non-transparent pixels are collected and grouped by similarity, and the most common color and colors far from each other are used as starting points that k-means refines in 12 rounds. There is no randomness, so the same image always gives the same result.
What does "AA pass" mean?
The Web Content Accessibility Guidelines (WCAG) treat a contrast ratio of at least 4.5:1 between text and background as passing level AA for normal-size text. For each color as a background, this tool calculates the ratio for white text and for black text and shows which is easier to read. Large text (18pt or larger, or bold 14pt or larger) needs only 3:1.
The extracted color looks slightly different from the photo.
A main color is an average of similar colors, so it may not exactly match a single point in the photo. If you need the exact color of one spot, click the photo to pick it. Image compression, lighting and shadows also affect colors.
Is my image uploaded to a server?
No. The image is read and calculated only inside this browser and is never sent to a server or stored. JPG, PNG, WebP, GIF, SVG and similar images up to 25 MB are supported.
Can I get print colors (CMYK)?
This tool shows only on-screen sRGB values (HEX, RGB, HSL). Print colors depend on paper, ink and printer, so check your printer's color guide or the color conversion in your design software.
Notes & limitations
This tool shows on-screen sRGB values for reference, and real colors may look different depending on photo compression, lighting and monitor settings. Print colors are not supported. Your image is never sent to a server or stored. BTSPACE WAGLE is an unofficial information site.