🎨 Color Picker — Eyedropper & Spectrum

Pick colors from images or explore the color spectrum. Copy HEX, RGB, HSL with auto-history.

Pick colors from uploaded images with a precision eyedropper or explore the interactive color spectrum to find the perfect shade. Every selection displays HEX, RGB, and HSL values ready for copying into CSS, design tools, or development projects. Your last 10 picked colors are automatically saved to your browser's local storage for quick reuse — no account or server upload needed.

HEX #2563eb

RGB rgb(37, 99, 235)

HSL hsl(221, 83%, 53%)

📁 Upload an image Click to browse or drag & drop (max 10MB, max 8192px)

Upload an image above, then click any pixel to pick its color.

R 37

G 99

B 235

📜 Color History

No colors picked yet. Pick a color to see it here.

⚙️ How It Works

Eyedropper: Upload an image (JPG, PNG, WEBP) and click any pixel to instantly get its color code.
Spectrum: Drag on the hue bar and saturation/lightness area to explore colors visually.
RGB Sliders: Fine-tune red, green, and blue values with precision sliders.
Copy & Reuse: Click 📋 next to any format — the code is ready for your CSS or design tool.
Auto-History: Your last 10 picked colors are saved locally. Click any swatch to restore.

📌 Embed This Tool

Add the Color Picker to your website for free. Just copy and paste the code below.

<!-- Color Picker — Embed by ToolStand -->
<div style="position:relative;width:100%;max-width:100%;overflow:hidden;">
  <iframe src="https://toolstand.io/tools/color-picker/embed.html" 
    width="100%" height="550" frameborder="0"
    style="border:1px solid #e2e8f0;border-radius:8px;background:#fff;"
    loading="lazy" 
    title="Color Picker | ToolStand"
    allow="clipboard-write"
    sandbox="allow-scripts allow-same-origin allow-popups allow-forms">
  </iframe>
</div>

📋 When to Use the Color Picker

The Color Picker is ideal when you need to extract exact colors from reference images, find the perfect shade for a design project, or explore color relationships for UI work. Use it remotely without desktop design software, when sharing screens in a meeting and need a quick color reference, or when you want to avoid uploading sensitive images to unknown servers. Every pixel stays on your device — no server upload, no account needed.

⚙️ How the Color Picker Works

The Color Picker uses the browser Canvas API to process images entirely on your device. For the eyedropper, your uploaded image is drawn to a hidden canvas — clicking a pixel reads its RGBA data using getImageData(). For the spectrum, the tool draws interactive hue gradients and saturation-lightness fields using canvas fills and gradients. All color conversions (RGB→HEX, RGB→HSL) run in JavaScript with no external dependencies. Image size is limited to 10MB and 8192×8192 pixels to prevent memory issues. Your color history is saved in localStorage and never leaves your browser.

How to Use the Color Picker

Choose the Eyedropper tab and upload an image, or switch to the Spectrum tab to explore colors visually.
Click any pixel on the image (Eyedropper) or drag on the hue bar and saturation area (Spectrum) to select a color.
Fine-tune with RGB sliders if needed, then click "Pick This Color" to save it.
Copy the HEX, RGB, or HSL value with one click. The color is automatically added to your history.
Click any swatch in the history panel to restore a previously picked color.

Frequently Asked Questions

What image formats does the eyedropper support?

The eyedropper supports all image formats your browser can render — JPG, PNG, WEBP, GIF, BMP, and SVG. For best results, use lossless formats like PNG or WEBP for accurate color sampling.

Is my uploaded image sent to any server?

No. The entire color picking process runs in your browser using the Canvas API. Your image is read via FileReader, drawn to a canvas, and analyzed with getImageData() — all locally. Nothing is uploaded to any server.

How is my color history stored?

Your last 10 picked colors are saved in your browser's localStorage (a local database that persists between sessions). The data never leaves your device and can be cleared at any time with the "Clear all" button.

What is the difference between HEX, RGB, and HSL?

HEX is a 6-character hexadecimal representation widely used in web development. RGB (Red, Green, Blue) defines colors by light intensity. HSL (Hue, Saturation, Lightness) describes colors by their position on the color wheel — more intuitive for designers to adjust tone, vividness, and brightness.

Can I pick colors from animated GIFs?

Yes, you can upload an animated GIF. The canvas will render the first frame, and you can pick colors from it. Note that only the currently displayed frame is sampled.