The Complete Guide to the Online Color Picker

A color picker is the simplest possible tool with a surprisingly wide audience: a UI designer needs the exact HEX of a button on a competitor's landing page; a CSS engineer needs to translate that HEX into the right rgba() value for a fade; a homeowner wants to match the green of a fabric swatch against a Pinterest mood-board screenshot. All three tasks come down to "pick a color, convert it, copy it" — and for years the answer was either install a desktop app (Sip, ColorSlurp, Adobe Color) or rely on the browser's developer tools. As of 2026 the answer is also a free in-browser tool that uses the standard EyeDropper API and runs in any modern Chromium-based browser. This guide explains how the online color picker works, what each of the four formats it returns is actually for, when to use it instead of a heavier tool, and what's happening mathematically when you type a HEX and watch the HSL update live.

What an online color picker does

The minimum definition: it accepts a color in any one of the four formats designers and developers use day-to-day — HEX, RGB, HSL, HSV — and shows you the equivalent in the other three formats simultaneously. A good one also lets you pick a color visually (either from a wheel/picker UI or directly from your screen), persists your recent picks across visits, and gives you a way to share an exact swatch with a teammate via a URL.

These five capabilities — convert, pick from UI, pick from screen, persist, share — are what every desktop color tool has shipped since the 1990s. The web version is interesting now because the EyeDropper browser API finally makes the "pick from screen" capability possible without installing anything. Before EyeDropper (which landed in Chrome 95 in October 2021), a web color picker could only sample colors that lived inside its own window — useless for the actual job, which is sampling colors from anywhere on your desktop.

Why four formats, not one

Every color you see on a screen is ultimately three numbers — how bright the red, green, and blue subpixels are. So technically you only need RGB. But the four formats stick around because each one is the natural way to think about a different question:

• HEX (#3b82f6) is the most compact form and the canonical way to write a color in CSS, design files, brand guidelines, and almost every file format. You memorize HEX the way you memorize a phone number — six digits, easy to copy-paste.
• RGB (rgb(59, 130, 246)) gives you the same information as a hex but as three decimal numbers. The decimal form is useful when you want to programmatically nudge one channel (e.g. "make it 10% less red") and easier for non-designers to reason about.
• HSL (hsl(217, 91%, 60%)) reorganizes the same color around Hue, Saturation, and Lightness. This is the form to use when you want to keep the color but change just its mood — make it darker (lower L), more pastel (lower S), or shift it 30° around the color wheel (change H by 30). HSL is also the form most natural for generating accessible color systems.
• HSV (hsv(217, 76%, 96%)) is similar to HSL but uses Value instead of Lightness. Value tracks "brightness of the brightest channel" rather than "midpoint between brightest and darkest." Photo and image editing apps prefer HSV because it matches how a hardware color picker (with H wheel + S/V square) usually works.

Most modern workflows mix all four — a brand guide gives you a HEX, you load it in HSL to nudge for an accent variant, you copy out the RGB for a SwiftUI animation, and you check HSV when comparing against a reference photo. A picker that always shows all four lets you skip the constant mental conversion.

How to use it (60 seconds)

1. Pick or paste a color. Click the EyeDropper button (if you're in Chrome, Edge, or Opera on desktop) and your cursor turns into a sampler — click any pixel on your screen, even outside the browser, and that color loads into the picker. If you don't have EyeDropper, click the preview swatch to open the native color wheel, or just paste a HEX into the HEX input.
2. Edit in any format. Type a new HEX, or nudge the R / G / B channels, or shift the H slider in HSL — all four format displays update live. Editing in one doesn't lock the others; they're all views on the same underlying color.
3. Save and share. Click "Save to palette" to add the current swatch to your saved colors (persists in your browser across visits — up to 30 swatches). Click "Copy share link" to put the current URL on your clipboard; whoever opens that link sees the exact same color, no description required.

That's the whole workflow. The EyeDropper integration is the headline feature, but the unsung win is the URL: it turns "this exact gray-blue, no, slightly more blue, no, that's too saturated" into a 35-character link.

Who actually uses this

Designers sample brand colors from any live web page — competitor landing pages, screenshot of a design system, a screencap from a video — straight into Figma or Sketch. The EyeDropper makes this 5 seconds; without it, you had to take a screenshot, open Photoshop, color-sample with the developer-tools eyedropper, copy back. Five seconds versus two minutes.

Front-end engineers use it to translate mockups into CSS. A designer hands you a PNG mock-up of a hover state; you sample the hover color from the PNG and paste the HEX into your CSS variable. The four-format display means you can grab rgba(59, 130, 246, 0.8) directly for a fade without having to do mental math.

Photographers and color graders use it to build palettes from reference shots, check the white-balance of a known neutral against a reference card, or annotate edits in a review document with precise color values.

Students and teachers use it for color theory homework — pick a color from a reference image, find its complement on the color wheel, document the analogous and triadic colors for an assignment. Free, no install, runs on the Chromebook in the school lab.

DIY and crafts — match a fabric swatch or paint chip against a Pinterest reference before ordering. The URL share is the killer feature here: snap the swatch, sample the color, send the link to your spouse for a sanity check.

What's actually happening (the math)

All four format conversions are pure math — no lookup tables, no perceptual models, no color profiles. Given any single format you can reconstruct all the others using the formulas in the W3C CSS Color Module Level 4 and the long-standing Wikipedia article on HSL and HSV.

HEX ↔ RGB is trivial: every two hex digits is one channel, base-16. #3b82f6 → R = 0x3b = 59, G = 0x82 = 130, B = 0xf6 = 246. Going back: each channel converted to two hex digits with zero-padding for single digits.

RGB → HSL is more interesting. First normalize each channel to 0–1 by dividing by 255. Find the max and min of the three normalized values; the difference between them is the chroma. Lightness is simply (max + min) / 2. Saturation is the chroma divided by 1 minus the absolute distance of lightness from 0.5 (this makes saturation "0" for pure white and black, which are technically achromatic). Hue is computed from which channel is the maximum and the relative positions of the other two — the math is a piecewise function that picks the right 60-degree wedge of the color wheel.

RGB → HSV uses the same max/min idea but defines Value as just the max channel (the "brightest" channel) and Saturation as the chroma divided by Value. This makes HSV easier to picture as a cylinder: H rotates around it, S is distance from the central axis, V is height.

Going back (HSL → RGB or HSV → RGB) inverts these formulas. The picker uses IEEE-754 double precision throughout, so a round-trip HEX → HSL → HEX returns the original HEX value (within at most ± 1 in each channel from integer rounding — every popular color library has the same tolerance).

How it compares to desktop tools

The desktop staples — Sip ($10, Mac), ColorSlurp (free + Pro $9.99/year, Mac), Adobe Color (free, browser + desktop) — all do roughly the same job, with different bells and whistles.

The advantage of a desktop app is that it lives in your menu bar and is always one click away. Sip's pixel zoom is unmatched for sampling tiny single pixels. ColorSlurp adds accessibility checks and contrast-ratio computation. Adobe Color's killer feature is generating harmonies (complementary / analogous / triadic / tetradic) automatically from any seed color.

The advantage of the online picker is that it runs anywhere, requires no install, costs nothing, and produces sharable URLs. For "pick this color, get the HEX, paste it in CSS" — the 80% use case — the online version is faster than launching a desktop app. For high-volume professional color work, build a brand-color system, or photograph review, the desktop tools earn their licence cost.

A reasonable rule of thumb: if you spend more than 30 minutes a week working with colors, install Sip or ColorSlurp. If color work is occasional, the online picker is enough — and the EyeDropper API means it now has the one feature that used to make a desktop tool mandatory.

Frequently asked questions

Which browsers support the EyeDropper button? Chromium-based: Chrome (95+), Edge (95+), Opera (81+) all support it on desktop. Safari and Firefox have not implemented it as of 2026-06. On unsupported browsers the EyeDropper button is hidden automatically; the rest of the picker works normally with the four-format inputs and the native color wheel that the preview swatch opens.

How accurate is the color conversion? The math uses IEEE-754 double-precision floating point throughout — the same accuracy a desktop tool gets. Round-trip HEX → HSL → HEX returns the original value within ± 1 in each channel from integer rounding (the standard tolerance every color library shares). For HSL → HSV → HSL the round-trip is also exact for any color where the L/V values can be cleanly represented.

Where is my saved palette stored? Locally in your browser's localStorage. It is never sent to a server, never synced to the cloud, never shared with us. Clearing browser data, using a private window, or switching browsers will reset the palette. If you need cross-device sync, a paid desktop tool with cloud sync is the right answer.

Can I share a specific color with someone? Yes — every color you pick is reflected in the URL as ?c=<hex> (e.g. ?c=ff0000 for pure red). The "Copy share link" button puts the current URL on your clipboard. Whoever opens the link sees exactly the color you sent.

Does it work on mobile? The four-format input works on every modern mobile browser. The EyeDropper button does not — the underlying API isn't shipped on mobile Chrome or Safari. For mobile sampling you'd need a screenshot + the picker tool of your choice (most operating systems include one in the screenshot editor).

Is there a desktop app version? No — this is a deliberately web-only tool. If you need a menu-bar resident with global hotkeys, install Sip or ColorSlurp. The online picker stays free, always works, and is one URL away.