Color Eyedropper

An eyedropper answers one of the most common questions in design and front-end work: what color is that, exactly? This tool answers it two ways. The screen eyedropper — powered by the browser’s native EyeDropper API in Chrome, Edge, and Opera — lets you click a magnifier on any pixel anywhere on your display, not just inside this page: a color in another app, a photo, a video frame, a desktop icon. The image picker works everywhere: drop in a screenshot, logo, or photo, and click any point to read that pixel’s color. Between the two, you can grab a precise color from essentially anything, in any modern browser. Each pick is reported as HEX, RGB, and HSL at once, and click any value to copy it.

The same color can be written several ways, and which one you want depends on the job. HEX — like #3b82f6 — is the shorthand you paste into CSS, design software, and most config fields; it is compact and unambiguous. RGB spells out the red, green, and blue channels from 0 to 255, mirroring how a screen physically mixes light, and it is the form you need when adding an alpha channel for transparency. HSL describes the color as a hue angle on the color wheel plus saturation and lightness percentages, which is far more intuitive when you want to adjust a color — make it lighter, more muted, or shift it toward a neighbour — rather than just record it. Seeing all three at once means you never have to stop and convert; copy whichever the task in front of you expects.

Pick from the screen or from an image, copy any of the three formats, and collect your picks in the session history strip. Everything happens on your device — images are read locally and never uploaded. For choosing colors from a wheel and building palettes, see the Color Picker; to check whether two colors meet accessibility contrast, use the Contrast Checker.