Color Picker Tool
Extract precise color codes from any image with advanced sampling technology. Perfect for design inspiration, brand analysis, and accurate color selection from visual sources.
Drop your image here
or click to browse files
🌈 Browse More Tools
Complete Guide: Color Picker Tool
Everything you need to know about using this tool effectively
The Color Picker provides an interactive way to select colors and get their values in multiple formats. You use a visual picker to choose a hue, then adjust saturation and lightness. The tool displays the selected color in hex, RGB, HSL, and CMYK. Browser eyedropper support lets you pick colors from anywhere on screen. All processing happens in the browser.
This tool renders an HSL-based color picker with a hue strip and a saturation-lightness square. When you select a color, it converts the HSL values to hex, RGB, and CMYK. The EyeDropper API (where supported) lets you sample colors from any visible pixel on screen.
Finding a color from a screenshot
Use the eyedropper to sample a color from an image or webpage visible on screen.
Getting color values for CSS
Pick a color visually and copy the hex code for use in a stylesheet.
Matching a brand color
Pick a color close to a brand reference and fine-tune it with the sliders.
Building a color palette
Pick multiple colors and note their hex values for a palette.
Use the picker
Click on the hue strip and saturation-lightness square to select a color.
Or use the eyedropper
Click the eyedropper button to sample a color from your screen (supported browsers only).
View the values
The tool shows hex, RGB, HSL, and CMYK for the selected color.
Copy a value
Copy the format you need for your project.
The eyedropper lets you pick colors from any visible pixel, including images and web pages.
HSL is the most intuitive format for adjusting colors: change H for hue, S for saturation, L for lightness.
Use the color history to revisit recently picked colors.
CMYK values are approximate because the CMYK gamut differs from RGB.
What formats are shown?
Hex (#RRGGBB), RGB (0-255), HSL (0-360 hue, 0-100% saturation/lightness), and CMYK (0-100%).
Does the eyedropper work in all browsers?
The EyeDropper API is supported in Chrome, Edge, and other Chromium-based browsers. Firefox and Safari do not currently support it.
Is my data sent to a server?
No. All color picking and conversion happens in your browser. Nothing is transmitted.
Can I enter a hex code manually?
Yes. Type a hex code and the picker updates to show that color.
What is the color history?
The tool remembers your recently picked colors so you can revisit them without re-selecting.