Color Picker

What this tool does

The Color Picker takes a single hex color and gives you back three CSS-ready strings — rgb(...), hsl(...), and an approximate oklch(...) — along with the individual numeric channels (R, G, B and H, S, L) so you can read the color from several angles at once. The conversion runs in your browser in plain JavaScript. Nothing about your color is sent anywhere, and once the page has loaded the tool keeps working with no network connection.

It is intentionally small. There are no swatch libraries, no palette generators, no contrast checks. If you need to mix two colors look at the Color Mixer; for WCAG contrast use the Contrast Checker. This one tool answers one question: I have a color — what does it look like in the other CSS formats?

Who actually needs it

The people who get the most out of it are front-end developers who are mid-CSS and need to flip a brand hex into hsl() so they can nudge the lightness, or pull the raw R/G/B integers into a rgba() with custom alpha. Designers handing colors off to engineers find it useful for the same reason. If you are exploring the new OKLCH color space and want a rough idea of where a hex lands, this gives you a starting point — with one important caveat covered further down.

How to use it

Click the color swatch labeled Hex Color. Your operating system's native color picker opens — the same dialog you see in any other app. Drag inside the color field, choose from a palette, or type a hex code inside the picker dialog. Confirm, and the results update on the page immediately. There is no Submit or Convert button.

Each output string has its own Copy button. Click it and the value goes to your clipboard via the browser's clipboard API. The raw numeric channels — Red, Green, Blue, Hue, Saturation, Lightness — are listed below the strings for reference.

The tool starts on #3b82f6, a blue that produces rgb(59, 130, 246) and hsl(217, 91%, 60%). That is a useful sanity check: if you load the page and see those values, everything is working.

How it works under the hood

Because the input always comes from a native color control, the value is guaranteed to be a valid 6-digit hex. The tool never has to parse free text, so there is no error state for "invalid hex."

RGB is straightforward. The hex is split into three two-character pairs and each is read as a base-16 integer. 3b becomes 59, 82 becomes 130, f6 becomes 246. Each channel runs from 0 to 255.

HSL uses the standard RGB-to-HSL conversion. The three channels are normalized to the 0–1 range. Lightness is the midpoint of the brightest and darkest channel: (max + min) / 2. Saturation is 0 for grays (when max equals min) and otherwise depends on whether lightness is above or below 0.5 — below, it is (max − min) / (max + min); above, it is (max − min) / (2 − max − min). Hue is computed from whichever channel is the max, scaled to a degree value between 0 and 360 and rounded to a whole number. Saturation and lightness are reported as percentages.

OKLCH is labeled "approx" on the page, and that label is doing real work. A standards-correct OKLCH conversion linearizes sRGB and runs it through the Oklab cone-response matrix. This tool uses fast shortcuts instead:

• Lightness comes from a gamma-2.2 weighted luminance: 0.2126·R^2.2 + 0.7152·G^2.2 + 0.0722·B^2.2 on the normalized channels. That value is fed into the CIE L* formula (116·∛Y − 16 for non-tiny inputs) and then scaled to the 0–1 range that OKLCH expects.
• Chroma is a rough channel-distance estimate: √((R−G)² + (G−B)²) · 0.4 on the normalized channels.
• Hue is simply borrowed from the HSL calculation. It is not computed in Oklab at all.

The borrowed hue is the part that matters most. HSL hue and Oklab hue do not agree — for most colors they can differ by tens of degrees. Treat the OKLCH output as a ballpark for getting a feel for the format, not as a precise value to paste into production CSS where exact color matters.

A worked example

Pick the default #3b82f6. The three pairs read as 59, 130, 246 — that is your RGB. Normalize to 0.231, 0.510, 0.965. The brightest channel is blue at 0.965, the darkest is red at 0.231, so lightness is (0.965 + 0.231) / 2 = 0.598, which rounds to 60%. Lightness is above 0.5 so saturation is (0.965 − 0.231) / (2 − 0.965 − 0.231) = 0.734 / 0.804 = 0.913, or 91%. Blue is the max, so hue uses the blue branch: ((0.231 − 0.510) / 0.734 + 4) · 60 ≈ 217°. That gives you hsl(217, 91%, 60%), which matches what you see on the page.

The OKLCH approximation for the same color works out to roughly oklch(0.559 0.213 217). A full Oklab converter on the same hex lands closer to oklch(0.62 0.21 260). The chroma is in the same range, the lightness is in the same neighborhood, but the hue is 40 degrees off because it was lifted from HSL rather than recomputed.

Common pitfalls

"My saturation looks wrong for a pure color." A vivid pure red like #ff0000 reports 100% saturation but only 50% lightness. That surprises people who expect a maxed-out color to be "100% everything." It is correct HSL behavior — lightness is the midpoint of the brightest and darkest channel, and a pure red has channels 255, 0, 0, with a midpoint of 127.5 out of 255, which is 50%.

"Grays have a hue of 0." When all three channels are equal there is no color, so hue is mathematically undefined. The tool follows the standard convention and reports 0 for both hue and saturation. A gray with hue 0 is not red — it is just a gray.

"The OKLCH doesn't match my design tool." Almost certainly because of the approximation. Figma, recent versions of Chrome DevTools, and dedicated color-space converters use the full Oklab matrix. If you are setting brand colors in OKLCH for a real product, copy the value from one of those tools, not this one.

"Hue jumps oddly between similar colors." HSL hue is a circular value — 0 and 360 are the same red. Two visually similar colors that straddle that wrap point can show very different hue numbers. This is a property of HSL, not a bug.

When not to use it

If you need to convert an arbitrary rgb() or hsl() string you already have written down, this tool is not the right fit — it only accepts hex from the native color control. A dedicated color-format converter handles inputs in any direction.

If you are building a design system that uses OKLCH for perceptually even palettes, use a converter that does the real Oklab matrix conversion. The approximation here is good enough to play with, not good enough to ship.

If you are checking whether a color combination passes WCAG contrast requirements, the lightness number here is not a contrast ratio. Use the Contrast Checker, which computes the relative-luminance ratio against another color.

Sensible defaults to start with

If you are just exploring, the default #3b82f6 is a good baseline — it is a saturated mid-lightness blue (the Tailwind blue-500), so the HSL output shows a sensible hue, a high saturation, and a 60% lightness. From there, drag the saturation slider in the native picker toward gray and watch the saturation percent fall. Drag the brightness slider up and down and watch lightness move. That round trip — picker handle to numeric channel — is the fastest way to build intuition for what each HSL number actually controls.

Privacy and offline use

Every conversion runs locally in your browser. Your color choice never leaves your device, and the page works offline once it has loaded. The Copy buttons use the browser's own clipboard API, which is also local. There is no analytics call tied to the color value, no server round trip, no logging of what you picked.

Adjacent concepts worth knowing

sRGB vs. linear RGB. The R, G, B numbers you see are sRGB — gamma-encoded values tuned for displays. When you do math that should match how the eye sees brightness (luminance, contrast, perceptually even blends), you have to "linearize" them first by undoing the gamma. The OKLCH approximation here uses a fixed gamma of 2.2 as a shortcut; the sRGB standard actually defines a piecewise curve that is close to but not exactly 2.2.

HSL vs. HSV vs. OKLCH. HSL and HSV are both old, fast conversions that work directly on sRGB channels — they are convenient but not perceptually uniform, so two colors with the same lightness in HSL can look very different in brightness to the eye. OKLCH is built on the Oklab color space, which is designed so equal numeric steps look like equal visual steps. That is why design systems are moving toward it.

Hex is just RGB in shorthand. A hex code is nothing more than the three RGB integers written in base 16 and concatenated. There is no extra information in a hex value that is not in the matching rgb() string.