Loading...
Loading...
We use cookies to enhance your experience, analyze site usage, and serve personalized content. By clicking "Accept All," you consent to our use of cookies. See our Cookie Policy and Privacy Policy for details.
Pick and extract colors from anywhere on your screen for designers
#6366f1rgb(99, 102, 241)hsl(239, 84%, 67%)hsv(239, 59%, 95%)cmyk(59%, 58%, 0%, 5%)Color Harmonies
Shades & Tints
WCAG Contrast Checker
Color
Contrast with
Color Blindness Simulation
Gradient Generator
background: linear-gradient(135deg, #6366f1, #ff0000);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.
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);'The eyedropper works within the tool's canvas. Screenshot and upload for external colors.
Protanopia, Deuteranopia, Tritanopia, and Achromatopsia using standard transformation matrices.
After saving, click 'Export CSS'. Each palette becomes CSS custom properties.
Yes, unlimited stops. Click 'Add Stop' to insert additional colors.
Compress images with quality control for JPEG, PNG, and WebP formats
Resize, compress and convert images with batch processing support
Extract and view EXIF metadata from images
Create favicons from images or text for all platforms and devices
Dive deeper with our comprehensive guides and tutorials.