Color Picker
One colour, four formats, always in sync — pick it, type it, or lift it off the screen.
RGB
HSL
OKLCH
Everything here runs on your device. Nothing you enter is uploaded or stored.
Pick a colour with the swatch, the eyedropper, or by typing a value directly, and see it instantly in HEX, RGB, HSL and OKLCH — all four kept in sync no matter which one you edit.
How to use it
- Click the swatch to open your browser’s native colour picker, or type a HEX value directly.
- If your browser supports it, press the eyedropper icon to lift a colour from anywhere on your screen — another app, an image, a design file.
- Read off RGB, HSL or OKLCH values in their own fields, all updated live.
- Edit any field directly and the other three recalculate immediately — there is no “primary” format here, all four are equally editable.
- Use the copy button next to any format to grab exactly the syntax you need.
Why one canonical value drives everything
A colour picker that lets you edit HEX, RGB, HSL and OKLCH independently has a real design trap: if editing RGB updates HSL, and editing HSL updates OKLCH, and editing OKLCH updates HEX, small rounding differences compound with every edit and the fields slowly drift out of agreement with each other.
This tool avoids that by keeping one canonical RGB value as the source of truth. Every field parses its own input back into that canonical RGB, then recomputes all four display formats fresh from it. No field ever chains off another field’s previous output — so editing back and forth between formats never introduces drift, and the four values you see are always a consistent description of one exact colour.
Why OKLCH is worth learning
Most people know HSL: hue, saturation, lightness. It is intuitive, but it has a real flaw — a hue’s perceived brightness varies enormously at the same lightness value. Pure yellow at HSL lightness 50% looks much brighter than pure blue at the same lightness, because HSL’s lightness axis is not perceptually uniform.
OKLCH fixes this. It is built on the Oklab colour space, designed specifically so that equal numeric changes in lightness correspond to equal perceived changes in lightness, regardless of hue. That is why it has become the tool of choice for building a colour scale (five shades of a brand colour that actually look evenly spaced) rather than HSL’s older, uneven approach. Modern CSS supports oklch() directly, so the value shown here is usable as-is.
What it does not do
It has no palette generator or harmony rules — this tool is about one colour at a time, precisely. It does not support alpha/transparency editing; every value shown is fully opaque. The eyedropper depends on browser support that is currently Chromium-only, and there is no polyfill for it — a canvas-based screen capture would need explicit user permission and is a materially different feature.
The four formats at a glance
| Format | Example | Best for |
|---|---|---|
| HEX | #7c5cff | CSS, design tools, quick reference |
| RGB | rgb(124, 92, 255) | CSS, canvas/JS colour math |
| HSL | hsl(255, 100%, 68%) | Adjusting lightness or saturation by eye |
| OKLCH | oklch(68.4% 0.202 293.1) | Building perceptually even colour scales |
Common conversions
| HEX | RGB | HSL |
|---|---|---|
| #000000 | 0, 0, 0 | 0°, 0%, 0% |
| #ffffff | 255, 255, 255 | 0°, 0%, 100% |
| #ff0000 | 255, 0, 0 | 0°, 100%, 50% |
| #00ff00 | 0, 255, 0 | 120°, 100%, 50% |
| #0000ff | 0, 0, 255 | 240°, 100%, 50% |
Questions
What is OKLCH and why does it matter?
OKLCH is a newer colour space designed so that equal numeric steps look like equal visual steps — unlike HSL, where a lightness change can look very different depending on the hue. It is gaining CSS support (`oklch()` is valid in modern browsers) because it makes generating consistent colour scales far easier than HSL does.
Why does the eyedropper button not work?
The EyeDropper API is currently supported in Chromium-based browsers (Chrome, Edge) but not in Firefox or Safari as of this writing. When unsupported, the button is disabled and the tool says so rather than failing silently.
Which format should I use in CSS?
HEX and RGB are universally supported and familiar. HSL is easier to reason about for lightening or darkening a colour by eye. OKLCH is the most perceptually accurate for building a colour scale, and works in all current major browsers as of 2024.
Does picking a colour here send it anywhere?
No. All colour math runs locally in your browser. The eyedropper, where supported, is a browser-native feature that never transmits the picked colour anywhere except back into this page.
Last updated