Color Picker

What is a color picker and how does it work?

A color picker is a tool that lets you capture the exact value of a color and read it back in a code you can reuse. Instead of squinting at a screen and guessing whether a button is "navy" or "royal blue," you sample the precise pixel and get an unambiguous answer like #0D6EFD. This tool offers two ways to sample: a screen eyedropper that reads any pixel on your display, and an image picker that lets you click anywhere on an uploaded picture. Both run entirely in your browser, so there is nothing to install and nothing to upload.

The screen eyedropper uses the browser's native EyeDropper API. When you click Pick Color from Screen, the browser hands control to a system-level picker; the moment you click a pixel, its color is returned to the tool and converted into every common format. The image picker draws your file onto an HTML5 canvas, reads the red, green, and blue values of the pixel under your cursor, and shows a magnified zoom preview so you can land on the right spot down to a single pixel.

Understanding HEX, RGB, and HSL color formats

The same color can be written in several notations, and different tools expect different ones. HEX is the compact six-character code you see most often in CSS and design software. RGB expresses the color as three channels — red, green, and blue — each ranging from 0 to 255, which maps directly to how screens emit light. HSL describes the color as hue, saturation, and lightness, which is far more intuitive when you want to create a lighter tint or a darker shade of the same hue. This picker shows all three at once, so you never have to convert by hand.

Picking colors from your screen vs. from an image

The two modes solve slightly different problems. Screen picking is ideal when the color is already visible somewhere — a live website, a video frame, another application, or a design open in another window. Because the EyeDropper API is still rolling out, screen picking works in Chromium-based browsers like Chrome and Edge but may be unavailable in some versions of Firefox and Safari; when that happens, the button is disabled and the tool tells you so.

Image picking works everywhere, in every modern browser, because it relies only on the canvas. Upload a screenshot, a photo, or an exported graphic, hover to position the zoom preview, and click to read the pixel. This is the most reliable option on mobile and the best choice when you need single-pixel precision on a detailed image. If you frequently work with image files, you may also find our QR Code Generator handy for turning a color-matched link into a scannable code.

Checking color contrast for accessibility

Color is not just decorative — it determines whether people can actually read your content. The Web Content Accessibility Guidelines (WCAG) define a contrast ratio between text and its background, ranging from 1:1 (identical, invisible) to 21:1 (pure black on pure white). The built-in checker calculates this ratio from the relative luminance of both colors and rates the pairing automatically:

• AAA — a ratio of 7:1 or higher, the enhanced standard for body text.
• AA — a ratio of 4.5:1 or higher, the minimum recommended for normal text.
• Fail — anything below 4.5:1, which many readers will struggle with.

Large text (roughly 18pt or 14pt bold and up) only needs 3:1 to pass AA, so headings have a little more freedom than paragraphs. Use the live preview box to see your exact text-on-background combination before you commit it to a design.

Tips for working with color codes

• Standardize on one format per project. Mixing HEX and HSL across a codebase makes future tweaks harder; pick one and convert with this tool as needed.
• Use HSL for variations. To make a hover state, keep the hue and saturation and just lower the lightness a few percent.
• Save as you go. The recent-colors strip keeps your last twelve picks so you can compare candidates side by side.
• Check contrast early. It is far cheaper to adjust a palette at the design stage than to retrofit accessibility later.
• Zoom before you click on images. Anti-aliased edges blend colors, so the magnifier helps you avoid sampling a halfway shade.

Need to work with documents or links alongside your colors? Browse our PDF to Word Converter or the full Utilities collection for more free, browser-based tools.