Coloropix

What is Coloropix?

Coloropix pulls 5 to 10 representative colors from an image into a palette, with no external communication — everything runs in your browser. When you want to reproduce this color scheme from a photo or artwork, Coloropix uses a method called k-means clustering to group the image's pixels by color similarity and take each group's center color as a color that represents the image. Rather than just listing the most frequent colors, it groups similar ones and picks a representative, giving a practical palette close to the image's overall impression. Extracted colors can be copied as hex or rgb and exported as CSS variables or a Tailwind config, ready to drop into web design. It also shows each color's share (how much of the image's area it covers). Drag on the preview to box a region and build the palette from just that part (multiple regions, movable and resizable), and zoom in to pick up fine detail colors. It's made for building mood boards or choosing a color scheme to match a photo.

How to use

1. Select an image or drag and drop it in. Common formats such as JPEG, PNG, and WebP are supported.
2. 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.
3. Zoom up to 200% with the +/- buttons in the top right of the preview or your mouse wheel to inspect fine details.
4. To sample only part of the image, drag on the preview to draw a rectangular selection.
5. 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.
6. Click any extracted color swatch to copy its hex or rgb value.
7. Export the full palette as CSS variables or a Tailwind config and paste it straight into your code.
8. 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.