Image Color Picker

100% Local Browser Processing — No Server Uploads

Extract HEX, RGB, HSL, and more from any image. Explore color harmonies, generate palettes, and save your favorite colors.

Ready to upload — Interactive calibration artwork loaded. Upload, drop, paste (Ctrl/⌘+V), or load an image URL.
Local Canvas Engine

1. Import Image Source

Upload from device, drag & drop, paste from clipboard (Ctrl+V / ⌘+V), or load a direct CORS-enabled image URL.

Test Canvases:

Drop image here, click to browse, or press Ctrl+V / ⌘+V

Supports PNG, JPEG, WebP, GIF, BMP, SVG, AVIF (up to 35 MB / 50 MP)

Source: Built-in Spectrum Calibration Canvas 800 × 480 px (5:3)

2. Interactive Pixel Sampler

Click any pixel to lock its color. Focus the canvas and use Arrow keys (1px) or Ctrl/Alt+Arrows (10px) for exact navigation.

100%
Cursor: X: 400, Y: 240 Selected: X: 400, Y: 240
800 × 480 px Arrows: 1px | Ctrl+Arrows: 10px | Drag in Pan Mode
Recent Samples:

3. Prominent Image Palette

Extracted directly from the active image using quantized k-means++ clustering (3–24 colors).

8

4. Color Harmonies

Geometric hue relationships calculated from the active color

5. Color Variations & Shades

Tints, shades, tones, saturation steps & perceptual OKLCH scale

sRGB Gamut Clamped

6. WCAG 2.1 Color Contrast Checker

Compare relative luminance between the active color and any foreground/background target.

vs
Relative Luminance Ratio
5.42 : 1

Live Typography & UI Component Preview

Normal body text requires at least 4.5:1 for WCAG AA and 7.0:1 for WCAG AAA. Large headings (18pt+ or 14pt+ bold) require 3.0:1 for AA.

Interactive UI Control (≥ 3.0:1 AA)

7. Saved Swatches

Persisted locally in your browser. Click a name to rename.

8. Favorite Palettes

Save, rename, reload, or export complete color collections.

9. Export Colors & Palettes

Generate production-ready code or download palette files directly from your browser.

Export Format: 

        

      

    


    
    

      

        

          
About This Image Color Picker

        

        

          Use the TextTool.in Image Color Picker to sample colors directly from an image and inspect their HEX, HEX8, RGB, RGBA, HSL, HSLA, HSV/HSB, CMYK, CIELAB (D65), and OKLCH representations. Generate a palette of 3 to 24 prominent colors, explore related shades and geometric harmonies, check WCAG 2.1 contrast ratios, save favorite swatches, and export color values for your design or frontend workflow.
        

        

          Privacy & Local Processing: All image decoding, pixel coordinate mapping, and k-means++ palette clustering happen 100% locally inside your web browser using the HTML5 Canvas API. Your images are never uploaded to any external server.
        

        

          Technical Notes: Displayed CMYK values are device-independent mathematical approximations derived from sRGB; commercial print workflows require ICC profile characterization. Remote image URLs require the hosting server to send permissive CORS headers (Access-Control-Allow-Origin) for browser security to permit canvas pixel readback; if a remote host blocks cross-origin canvas access, download the image and upload or paste it locally.
        

      


      

        

          
How to Use the Image Color Picker

        

        
    
          
  1. Import an image: Upload a local image file, drag and drop it onto the dropzone, paste directly from your clipboard (Ctrl+V or ⌘+V), or load a CORS-enabled image URL.
    2. 
          
  2. Sample exact pixels: Click anywhere on the image canvas to lock a pixel, or focus the canvas and press Arrow keys (1px step) or Ctrl/Alt + Arrow (10px step) with the live magnified preview.
    3. 
          
  3. Inspect & copy formats: View and one-click copy HEX, HEX8, RGB, HSL, HSV, CMYK, CIELAB (D65), OKLCH, and CSS Color 4 formats.
    4. 
          
  4. Extract prominent palettes: Adjust the palette count from 3 to 24 colors and click any extracted swatch to inspect it.
    5. 
          
  5. Explore harmonies & variations: Inspect complementary, analogous, triadic, split-complementary, tetradic, monochromatic, and tint/shade steps.
    6. 
          
  6. Save & export: Save favorite swatches or named palettes to browser storage, and export as HEX, CSS, SCSS, JSON, Tailwind, SVG, or GIMP palette files.
    7.