The instant HSL color picker.
Sample any pixel on your screen and read hue, saturation and lightness immediately — with HEX, RGB and OKLCH alongside.
TL;DR
Screen Color Picker is a free color picker that runs entirely in your browser. Click once and sample any pixel on your screen, even outside the browser, then copy it as HEX, RGB, HSL or OKLCH. Picked colors never leave your device. Key limit: live picking needs desktop Chrome, Edge, Brave or Opera; other browsers use screenshot mode.
Last updated
Pick a color — instant, picks from anywhere on screen (even outside the browser).
Screenshot — when you need to pick from another tab without losing focus.
#171717 rgb(23, 23, 23) hsl(0, 0%, 9%) oklch(22.04% 0.0000 0.0) Recent palette (0)
Click Choose what to capture below. Your browser will show its picker for screens, windows, or tabs.
One quick heads-up
How screen capture works
After you click Continue, your browser will switch focus to the window you're sharing. Press Alt + Tab to come back here — your captured frame will be waiting.
The format
Hue, saturation, lightness.
HSL describes a colour with three human-facing numbers. hsl(210 100% 62%) means hue 210° around the colour wheel, 100% saturation, 62% lightness.
Hue (0–360°) is position on the wheel: 0° red, 60° yellow, 120° green, 180° cyan, 240° blue, 300° magenta, back to red at 360°. Saturation (0–100%) is how far from grey — 0% is always grey regardless of hue, 100% is fully vivid. Lightness (0–100%) runs black at 0%, the pure hue at 50%, white at 100%.
The appeal is obvious the moment you use it. "Same colour, less saturated" is a one-number edit. "Rotate the hue 30 degrees" is a one-number edit. Neither is expressible in hex or RGB without conversion. For twenty years this made HSL the default way to generate shades in CSS, and it's why virtually every pre-2023 design system was built on it.
Modern syntax drops the commas and puts alpha behind a slash: hsl(210 100% 62% / 50%). The old hsla(210, 100%, 62%, 0.5) form still works everywhere.
The catch
HSL lightness lies about brightness.
Here is the problem that eventually bites everyone who builds a design system in HSL. Compare these two:
hsl(60 100% 50%) — yellow, blindingly bright.
hsl(240 100% 50%) — blue, nearly navy.
Both claim 50% lightness. Side by side, one almost glows and the other is dark. The yellow has roughly six times the actual measured luminance of the blue at the identical number.
The cause is that HSL "lightness" is a geometric construction — the midpoint of the RGB cube along a particular axis — not a perceptual measurement. It never accounted for the fact that human eyes weight green far more heavily than blue.
The consequences are concrete and familiar. Build a 50→900 ramp by stepping lightness and your yellow ramp washes out at the top while your blue still reads solid. Generate hover states with L + 10% and the change is dramatic on blue, invisible on yellow. Compare lightness values to estimate contrast and you'll ship inaccessible text. Every designer who has stared at a mathematically-correct palette muttering "why does this shade look wrong" has hit exactly this.
In practice
Where HSL still earns its place.
None of that makes HSL useless — it makes it a quick-edit format rather than a system format.
It's excellent for one-off adjustments in devtools, for prototypes, for "give me a muted version of this", and for reasoning about relationships between colours you already have. Complementary colours are 180° apart; triads are 120°. That arithmetic is genuinely useful and genuinely intuitive.
Where you should stop using it is anything systematic: generating shade ramps, deriving interactive states, checking contrast, or inverting a theme for dark mode. Those all depend on lightness meaning something consistent, and in HSL it doesn't.
The replacement is OKLCH, which has the same three-axis structure — lightness, chroma, hue — but built on a perceptually uniform space. Equal numeric changes produce equal perceived changes across every hue. It shipped in all major browsers in 2023 and Tailwind v4 made it the native colour space. If you like how HSL thinks, you'll find OKLCH familiar and correct.
Questions
HSL colour picker FAQ
How do I get the HSL value of a colour on my screen?
Click Pick a color and then click any pixel — inside or outside the browser, in a PDF, a design tool, a native app, or a paused video. The hsl() value appears instantly alongside HEX, RGB and OKLCH, each one click to copy.
What do the three HSL numbers mean?
Hue is the angle on the colour wheel from 0 to 360 degrees — 0 is red, 120 green, 240 blue. Saturation from 0% to 100% is how far the colour is from grey. Lightness from 0% to 100% runs from black through the pure hue at 50% to white at 100%.
Why do two colours with the same HSL lightness look so different in brightness?
Because HSL lightness is a geometric construction rather than a perceptual measurement. hsl(60 100% 50%) yellow has about six times the measured luminance of hsl(240 100% 50%) blue despite the identical 50% figure. Human vision weights green far more heavily than blue, and HSL never accounted for that. Use OKLCH if you need lightness numbers you can trust.
What's the difference between HSL and HSV or HSB?
They share the hue and saturation axes but differ on the third. HSL's lightness puts the pure hue at 50% with white at 100%. HSV/HSB's value or brightness puts the pure hue at 100% and there is no path to white without also reducing saturation. HSL is what CSS uses; HSV is common in design applications like Photoshop.
Should I use HSL or OKLCH for my design system?
OKLCH, without much hesitation. It has the same intuitive three-axis structure but its lightness is perceptually uniform, so shade ramps, hover states and theme inversion all behave predictably. It has full support in Chrome, Safari, Firefox and Edge since 2023, and Tailwind v4 uses it natively. Keep HSL for quick manual tweaks.
Does this work in Firefox or on my phone?
No. It depends on the native EyeDropper API, which is Chromium desktop only — Chrome, Edge, Brave, Arc, Opera and Vivaldi. Firefox and Safari have not implemented it, and no mobile browser has, because there is no cursor to hover over an arbitrary pixel on a touchscreen.
Also see: OKLCH picker · RGB picker · format comparison