Camera, Mic & Media
Color Picker from Camera - Eyedropper via Webcam
Point your camera at any surface and click to pick the color. Get the HEX, RGB, and HSL values instantly. All processing is done locally in your browser.
How the color picker works
The live camera feed is continuously drawn onto an HTML5 canvas element. When you click, the
tool reads the pixel's RGBA values at that coordinate using getImageData
and converts them to HEX, RGB, and HSL color formats in JavaScript.
Tips for accurate color sampling
- Use neutral, even lighting to avoid color casts from light sources.
- Disable your camera's auto white-balance if possible for more consistent readings.
- Sample from a matte surface - glossy surfaces reflect the ambient light color instead.
Your camera feed never leaves your device
All color extraction is performed locally on the canvas. No images or pixel data are sent to any server.
Color output formats
- HEX: the standard format for CSS and web design. Use this in HTML/CSS stylesheets, Figma, Sketch, and most design tools.
- RGB: useful in CSS (
rgb()function), design tools, and programming contexts where you need integer channel values. - HSL: best for making color adjustments. Changing the L (lightness) value
creates tints and shades; changing S (saturation) creates muted or vivid variants. Native to
CSS as
hsl(). - HSV: the model used internally by most design software color pickers (Photoshop, Illustrator). Understanding it helps when navigating those tools.
White balance and color accuracy
Cameras are not colorimeters. The color reading you get depends heavily on the ambient light color temperature. Under warm incandescent lighting (2700 K), whites appear orange; under cool fluorescent light (4000 K), they appear greenish. Your camera's auto white-balance algorithm compensates partially, but can introduce inconsistencies. For the most accurate readings, use a neutral daylight source (5500–6500 K) or a color-calibrated light panel. For design matching tasks, physically comparing under the actual intended viewing light gives a more reliable result than any camera measurement.
Use cases
- Paint color matching: point your camera at a paint chip, fabric, or existing wall color to capture the approximate HEX value, then search for the closest match in paint brand databases.
- Botany and science: identify and record the precise color of plant leaves, flowers, or specimens for documentation or comparison.
- Interior design: match a fabric, tile, or furniture color to a digital design palette before committing to a purchase.