Loading…
Pick colors from uploaded images. Use when sampling images; for conversion use color-converter, for palette use color-picker. Input: image ≤10MB. Returns HEX/RGB. 100% client-side, files never leave browser.
Color Eyedropper is loading — interactive editor will appear here. Use examples below to try instantly once loaded.
Press ? for keyboard shortcuts
A full-featured color picker that captures colors from on-screen with output in all major formats (HEX, RGB, RGBA, HSL, HSLA, HSV, CMYK). Includes a color harmony generator (complementary, analogous, triadic, tetradic, monochromatic), WCAG contrast checker, color blindness simulation (protanopia, deuteranopia, tritanopia, achromatopsia), gradient generator with multi-stop linear/radial gradients, and palette save/export as CSS code.
Color selection involves far more than picking a single color — designers need harmonious relationships, accessibility verification, visual impairment simulation, and gradient generation from one eyedropper starting point instead of juggling separate tools.
This tool is part of the DevStackIO platform — a collection of free online developer tools from DevStackIO. Browse more free developer resources on DevStackIO.
UI/UX designers building accessible color systems, frontend developers implementing design tokens, brand managers ensuring color consistency, and accessibility specialists evaluating color choices for visual impairments.
Click the eyedropper icon to activate — move cursor over the canvas or uploaded image to sample colors in real-time
Selected color appears in all six formats — click any format to copy it
Open 'Harmony' panel and choose scheme type — generated swatches appear with copy buttons
Use Color Blindness Simulator by selecting a type — main color and harmony are filtered accordingly
In Gradient Generator, add color stops, choose linear (angle) or radial (shape/position), copy generated CSS
Save colors/palettes with 'Save Palette', add a name, export all as CSS file
Pick: Blue (#007BFF) | Harmony: Complementary => Output: #007BFF + #FF7B00 + 3 analogous variations forming 5-color palettePick 1: #FF6B6B | Pick 2: #4ECDC4 | Gradient: Linear 45deg => 'background: linear-gradient(45deg, #FF6B6B, #4ECDC4);'Can I pick colors from outside the browser?
The eyedropper works within the tool's canvas. Screenshot and upload for external colors.
What color blindness types are simulated?
Protanopia, Deuteranopia, Tritanopia, and Achromatopsia using standard transformation matrices.
How do I export for a design system?
After saving, click 'Export CSS'. Each palette becomes CSS custom properties.
Can I generate gradients with more than 2 colors?
Yes, unlimited stops. Click 'Add Stop' to insert additional colors.
Authoritative specifications, standards, and in-depth reading for Color Eyedropper.
Tool is loading — interactive editor will appear here. Use examples below to try instantly once loaded.
Check foreground/background contrast against WCAG 2.2 AA/AAA with ratio and pass/fail. Use for accessibility audits; for format conversion use color-converter, for picking use color-picker. Input: two colors. Returns ratio + grade. 100% client-side.
Pick colors and copy HEX/RGB/HSL. Use for palette building; for image sampling use color-eyedropper. Input: color selection. Returns color codes. 100% client-side, files never leave browser.
Compress JPEG, PNG, and WebP images in your browser. Reduce file size without visible quality loss.
Resize images by width/height or percent. Use when dimensions must change; for smaller files use image-compressor. Input: image ≤10MB. Returns resized PNG/JPEG/WebP. 100% client-side, files never leave browser.
Generate favicons (16/32/180 PNG + ICO) from one image. Use for site icons; for compression use image-compressor. Input: image ≤10MB. Returns favicon set + HTML. 100% client-side, files never leave browser.
Minify SVG by stripping metadata and whitespace. Use for smaller vectors; for raster use image-compressor. Input: SVG ≤10MB. Returns optimized SVG. 100% client-side, files never leave browser.
Generate placeholder images by size and text. Use for mockups; for editing photos use image-resizer. Input: dimensions + options. Returns PNG download. 100% client-side, files never leave browser.
Convert SVG to CSS background data URI. Use for inline icons; for image files use image-to-base64. Input: SVG ≤10MB. Returns CSS url(). 100% client-side, files never leave browser.
#0070f3rgb(0, 112, 243)hsl(212, 100%, 48%)hsv(212, 100%, 95%)cmyk(100%, 54%, 0%, 5%)Color Harmonies
Shades & Tints
WCAG Contrast Checker
Color
Contrast with
Color Blindness Simulation
Gradient Generator
background: linear-gradient(135deg, #0070f3, #ff0000);