What is Coloropix?
Coloropix is a free tool that automatically extracts 5 to 10 representative colors from a photo or illustration and turns them into a color palette. Using k-means clustering, it analyzes the overall color distribution of your image and lets you copy each color as hex or rgb, or export the whole palette as CSS variables or a Tailwind config. It also shows the share of each color, so distinguishing your main color from accents is effortless.
How to use
- Select an image or drag and drop it in. Common formats such as JPEG, PNG, and WebP are supported.
- Use the slider to choose how many colors to extract, anywhere from 5 to 10. More colors capture midtones; fewer narrow things down to the dominant tones.
- Zoom up to 200% with the +/- buttons in the top right of the preview or your mouse wheel to inspect fine details.
- To sample only part of the image, drag on the preview to draw a rectangular selection.
- Each selection can be moved by dragging and resized via its handles; you can add multiple regions at once or remove one with the x button.
- Click any extracted color swatch to copy its hex or rgb value.
- Export the full palette as CSS variables or a Tailwind config and paste it straight into your code.
- Re-extract as needed, adjusting the color count and regions until the palette fits your design.
Great for
Designing a website color scheme
Pull the key colors from a logo or hero image and export them as CSS variables to give your whole site a consistent theme.
Defining colors in a Tailwind project
Generate a palette from a design mockup in Tailwind config format so it's instantly usable as utility classes.
Matching the tone of documents and slides
Pick chart and heading colors that fit a photo's mood, using the most dominant colors as your starting point.
Studying illustrations and designs
Analyze the color use of a piece you admire and quickly build a reference palette to apply to your own work.
Extracting brand colors from product photos
Box a specific region of an e-commerce product image to sample its color and align it with banner and copy accents.
Building a mood board
Pull palettes from several photos and assemble a color set that captures the feel of your project.
Privacy
Coloropix runs entirely in your browser. Loading the image, extracting colors, and exporting all happen on your own device, and neither your image nor the extracted results are ever sent to any external server. It also makes no external network requests such as downloading AI models, so your image never leaves your device over the network.
FAQ
- Q. What image formats are supported?
- A. Common formats your browser can display, such as JPEG, PNG, and WebP, are supported. The loaded image is analyzed directly in the browser.
- Q. Can I change the number of colors extracted?
- A. Yes. You can set it anywhere from 5 to 10 with the slider. More colors capture subtle midtones, while fewer narrow the result to the dominant tones.
- Q. Can I build a palette from just part of the image?
- A. Yes. Drag on the preview to draw a rectangular selection and colors will be sampled only from that area. You can define multiple regions at once.
- Q. Can I adjust the selections afterward?
- A. Yes. Each region can be moved by dragging and resized with its handles, and removed with the x button when no longer needed. Multiple regions can be edited individually.
- Q. How do I use the extracted colors in code?
- A. Each color can be copied as hex or rgb, and the whole palette can be exported as CSS variables or a Tailwind config. Paste the generated definitions straight into your code.
- Q. What does the share percentage represent?
- A. It's the proportion of the image (or selected region) that the color occupies. High-share colors indicate your main color, while low-share ones are good accent candidates.
- Q. Can I zoom in to check fine colors?
- A. Yes. Zoom up to 200% with the +/- buttons in the top right of the preview or your mouse wheel, so you can define regions while inspecting fine details.
- Q. Are the extracted colors saved or sent anywhere?
- A. No. Color extraction happens entirely in the browser, and neither your image nor the results are sent externally. No outbound communication takes place.