Color Picker — Extract Colors from Any Image

Upload an image → get dominant color palette in HEX, RGB or HSL → export to CSS or JSON

100% private — files never leave your device

Drop any photo, screenshot, logo or design asset below. The tool extracts up to 8 dominant colors using the Median Cut algorithm — the same technique used by design tools and OS color systems. Click directly on the image to pick any single pixel. Switch between HEX, RGB and HSL output with one click. Export the full palette as CSS custom properties or a JSON array for your project.

color_picker.sh
$extract --palette --input
🎨
Drop your image here or browse files
PNG, JPG, WebP, SVG — photos, logos, screenshots, UI designs
palette
Format:
$ export --format css-variables 

                

                  
                

              


              

                

                  $
                  export --format json
                

                

                

                  
                

              


            

          

        


        

          🔒
          100% Client-Side Processing — No Server Uploads. Images are read locally and processed entirely on an HTML5 Canvas in your browser. Pixel data never leaves your device. The EyeDropper API (where available) also operates entirely in the browser sandbox.
        

      


      
      

        
Your Files Never Leave Your Browser

        

          

            100% Client-Side Processing
            
Conversions run locally in your browser using the Canvas API, with Web Workers used when supported. Your image data stays on your device and is never uploaded to any server.

          

          

            No Account. No Tracking of File Contents.
            
We use Google Analytics and Google AdSense for aggregated traffic stats and contextual ads when consent allows it. Theme and language preferences stay in your browser. We never see, read, or store the images you convert.

          

          

            Open About Our Limits
            
Browser-based conversion has trade-offs: large files (>50 MB) may hit memory limits; animated GIF output flattens to a single frame; EXIF metadata is stripped; ICC color profiles may differ across browsers.

          

        

        

          Questions? 
          Contact us
           or read the full 
          privacy policy
          .
        

      


      

        
> how_to_extract_colors

        
    
          
  1. Upload your image
    Drag and drop any PNG, JPG, WebP or SVG into the tool. Photos, product images, brand screenshots, UI designs and logos all work well. The image is displayed in an interactive preview canvas — nothing is uploaded.
    2. 
          
  2. Extract the dominant palette
    Click "Extract Colors". The Median Cut algorithm analyzes the image pixel data (on a 150×150 downsample for speed) and returns up to 8 dominant colors sorted by frequency. Click any swatch to copy its value instantly. Use the format toggle to switch between HEX, RGB and HSL.
    3. 
          
  3. Pick pixels or export
    Click directly on the image preview to pick any exact pixel color — useful for brand color extraction or matching a specific shade. Export the full palette as CSS custom properties (ready to paste into :root) or as a JSON array for JavaScript use.
    4. 
        

      


      

      

        
> frequently_asked_questions

        

          
How does the dominant color extraction work?

          
The tool uses the Median Cut algorithm — a color quantization method that divides the color space into equal-frequency buckets. The image is first downsampled to 150×150px for performance, transparent pixels are filtered out, then the remaining pixels are iteratively split at the median of the widest color channel until the target number of color groups is reached. Each group's average color represents one swatch. Colors are sorted by frequency so the most prominent color appears first.

        

        

          
Can I pick a specific color from a photo?

          
Yes. After uploading an image, click directly on any part of the image preview to pick that exact pixel color. The picked color appears at the top of the palette with a "✦ Picked" label. In Chrome and Edge (version 95+), the "🔬 Pick from Screen" button lets you pick any color from anywhere on your screen using the native EyeDropper API — not just from the uploaded image.

        

        

          
What is the difference between HEX, RGB and HSL?

          
HEX (#rrggbb) is the standard format for CSS and HTML. RGB (red, green, blue) represents colors as three 0–255 values — used in CSS, Figma, Photoshop and most design tools. HSL (hue, saturation, lightness) is the most intuitive for humans: hue is the color angle (0–360°), saturation is vividness (0–100%), lightness is brightness (0–100%). All three describe the same colors — use whichever format your project requires.

        

        

          
How do I use the exported CSS variables?

          
Copy the CSS block and paste it into your stylesheet's :root selector. Variables are named --color-1 through --color-8. Use them anywhere with var(--color-1). Rename them to match your design system: for example, rename --color-1 to --primary, --color-2 to --secondary, --color-3 to --accent, etc. This is especially useful for quickly building a color scheme from a brand image or product photo.

        

        

          
Are my images uploaded to any server?

          
No. This tool reads your image locally and processes all pixel data entirely on an HTML5 Canvas inside your browser. Nothing is ever uploaded to any server. The EyeDropper API (where available) also operates fully in the browser sandbox — screen capture stays local. Individual color values are copied to your clipboard only — no network requests of any kind.