Picking a color from a webpage sounds like a simple task. However, I found that many browser eyedropper extensions provide only a HEX value and stop there.
Designers and developers often need more information:
- RGB, HSL, HSB/HSV, and CMYK values
- A magnified view for accurate pixel selection
- Saved colors for building a palette
- Contrast information for accessibility
- A quick workflow that does not interrupt browsing
That led me to build Color Picker Eyedropper, a browser extension for selecting and evaluating colors directly from webpages.
The problem I wanted to solve
While working with websites and images, I frequently needed to identify a color and then open another tool to convert it or check its contrast.
The typical workflow looked like this:
- Capture or copy the color.
- Convert the HEX value into another format.
- Open a contrast checker.
- Test it against a background.
- Save the result somewhere else.
I wanted to combine these steps into one focused tool.
Selecting the correct pixel
Accuracy is one of the most important parts of a color picker. A single image can contain shadows, gradients, compression artifacts, and many nearly identical colors.
The extension includes an 11×11 pixel magnifier to make it easier to target the intended pixel. As the cursor moves, the selected color values update without requiring several separate actions.
This is particularly useful for:
- Small interface elements
- Text and icon colors
- Image details
- Gradients
- Video frames
- Borders and shadows
Supporting multiple color formats
HEX is convenient for CSS, but it is not the only useful color representation.
The extension provides:
- HEX for common web styling
- RGB for red, green, and blue channel values
- HSL for intuitive hue, saturation, and lightness adjustments
- HSB/HSV for workflows based on brightness or value
- CMYK for an approximate print-oriented representation
Providing these values together removes the need to open a separate converter.
Accessibility as part of the workflow
A color can look attractive and still be difficult to read. That is why I included contrast checking using both WCAG and APCA results.
Contrast information helps developers and designers evaluate combinations used for:
- Body text
- Buttons
- Navigation elements
- Form labels
- Icons
- Interface states
Automated contrast results are not a substitute for complete accessibility testing, but they provide useful feedback while choosing colors.
Privacy considerations
A color picker should not need to collect browsing information just to identify a pixel.
The extension is designed to perform its color-related work locally in the browser. Keeping the workflow focused also makes the tool faster and easier to understand.
Keyboard workflow
The extension supports a keyboard shortcut so users can activate color picking without repeatedly opening the browser toolbar.
Small workflow improvements matter when selecting many colors during a design or development session.
Try the extension
Color Picker Eyedropper is available for:
For extracting complete palettes from uploaded images, I also built Img Color Picker.
What I learned
Building a focused developer tool reinforced several lessons:
- A small tool can still solve a meaningful workflow problem.
- Accuracy and speed matter more than adding unnecessary features.
- Accessibility feedback is more useful when integrated early.
- Privacy should be considered during initial design, not added later.
- Supporting multiple output formats saves users repetitive work.
I would appreciate constructive feedback from designers, developers, and accessibility professionals. Which color formats or workflow features are most important to you?
