Related Tools
How to Use
- 1Upload or drag and drop an image into the drop zone.
- 2Hover over the image to see a magnified preview with the color under your cursor.
- 3Click anywhere to add the color to your picked palette (up to 20 colors).
- 4Use the format toggle to switch between HEX, RGB, and HSL display.
- 5Click 'Export CSS' to copy all picked colors as CSS custom properties.
About Color Picker from Image
The Color Picker from Image lets you sample any pixel in a photo and instantly get its HEX, RGB, and HSL color codes. A built-in magnifier shows a zoomed-in view around your cursor for precise picking, even in detailed images.
The tool automatically extracts dominant colors using k-means clustering — perfect for creating color schemes from photography, branding assets, or design inspiration. Filter out near-white colors for cleaner palette results.
Build a custom palette by clicking colors on the image, then export all picked colors as CSS custom properties in one click. All processing runs locally in your browser — your images never leave your device.
Frequently Asked Questions
What color formats are supported?
HEX (e.g., #3A7BD5), RGB (e.g., rgb(58, 123, 213)), and HSL (e.g., hsl(216, 62%, 53%)). Toggle between formats for both display and copying.
How are dominant colors extracted?
Using k-means clustering on the image's pixel data. The algorithm groups similar colors and returns the center of each cluster, ranked by coverage area.
How many colors can I pick?
Up to 20 colors in your palette. Duplicates are filtered automatically. Remove individual colors or clear the entire palette.
Is my image uploaded anywhere?
No. All processing runs locally in your browser using the Canvas API. Your image never leaves your device.
Can I export colors for CSS?
Yes. Click 'Export CSS' to copy all picked colors as CSS custom properties (e.g., --color-1: #3A7BD5;) ready to paste into your stylesheet.