Color Picker Pro

One color, six ways to write it

A color on screen is ultimately three numbers — how much red, green, and blue light to emit, each from 0 to 255. Every color format you have ever seen is just a different notation for those same three values (plus, sometimes, transparency). This picker takes whatever color you choose and instantly expresses it in six formats so you can paste the right one into whatever you are building. Everything runs in your browser; your colors and history never leave your device.

Why HSL and OKLCH exist when HEX already works

HEX and RGB tell a screen what to do but say nothing a human can reason about — you cannot look at #3b82f6 and know it is a medium blue. HSL rearranges the same color into hue (the angle on the color wheel, 0–360°), saturation (how vivid), and lightness (how bright). That makes it trivial to create a darker shade: keep the hue and saturation, lower the lightness. OKLCH goes further. It is built on the Oklab color space, which is designed so that equal numeric steps look like equal visual steps to the human eye — something HSL fails at, where a yellow at 50% lightness looks far brighter than a blue at 50% lightness. The tool computes OKLCH by linearizing your sRGB values and running them through Björn Ottosson's Oklab transform, the same conversion modern browsers use natively.

A worked example

Pick the default #3b82f6. The tool reads its channels as R=59, G=130, B=246. Converting to HSL gives roughly hsl(217, 91%, 60%): a hue of 217° (squarely in blue), very high saturation, and 60% lightness. To build a hover state, take that HSL and drop lightness to about 50% for a slightly deeper blue; to build a disabled state, drop saturation toward 30% for a muted gray-blue. Because all six formats describe the same color, you can prototype in whichever notation is easiest to reason about, then copy the HEX for production.

The eyedropper: grab any color on your screen

The Pick from Screen button uses the browser's native EyeDropper API. Click it and your cursor becomes a magnifier you can hover anywhere — a photo, another website, a video frame — to sample the exact pixel color under it. This is genuinely powerful for matching a brand color you can see but don't have the code for. The catch: the EyeDropper API is only available in Chromium-based browsers (Chrome and Edge). In Firefox or Safari the button is disabled, and the tool tells you so rather than failing silently.

Named colors and persistent history

The search box matches against all 148 CSS named colors. Type tomato, rebeccapurple, or even a fragment like sea to surface seagreen, lightseagreen, and the rest, then click a swatch to load it. Every color you pick is saved to your browser's local storage and shown in the history strip, up to 30 recent colors, so it survives a page reload. That history lives only on your machine — clearing it removes it permanently, and it is never uploaded.

Practical tips and common mistakes

• Type a full 6-digit HEX. The HEX input only accepts the #rrggbb form. Shorthand like #f00 won't register — write #ff0000.
• Use OKLCH for accessible palettes. Because its lightness is perceptual, picking colors at the same OKLCH lightness gives you a set that feels evenly balanced — far better than eyeballing HSL.
• Don't confuse HWB percentages. In hwb(h w% b%), the numbers are whiteness and blackness added to the pure hue, not saturation and lightness. More whiteness tints toward pastel; more blackness shades toward dark.
• Sampling a JPEG samples its compression. When you eyedrop a photo, you get the exact pixel — which may be slightly off from the intended color because of JPEG artifacts. Sample a few nearby pixels and average if precision matters.
• HEX is case-insensitive but normalized. The tool lowercases your input, so #3B82F6 and #3b82f6 are stored identically and won't create duplicate history entries.