How to use the color picker
- Click the large swatch to open your OS color picker, or type a hex code directly.
- Read the color in all four formats (Hex, RGB, HSL, OKLCH). Click Copy on any row.
- Set a background color to check WCAG contrast. The ratio and AA/AAA pass/fail appear live.
- Click any swatch in the harmony palette to make it the new selection.
- Use the URL hash (auto-updated) to share the exact color with a teammate.
Hex, RGB, HSL, OKLCH — which to use in 2026
All four describe the same color, but each has a different super-power:
- Hex (
#10B981) — compact, universal, the default for CSS and design tools. - RGB (
rgb(16 185 129)) — easy to reason about channels and to animate individually. - HSL (
hsl(161 84% 39%)) — intuitive for manual tweaks: nudge hue, saturation, or lightness without breaking the other two. - OKLCH (
oklch(69.4% 0.147 162.5)) — perceptually uniform. Equal steps in L or C look like equal steps to the human eye. This is why modern design systems (Radix, Open Props, Tailwind 4) are migrating to OKLCH for palette generation.
Why OKLCH matters in 2026
Pick a pure yellow at HSL 60°, 100%, 50%. Now pick a pure blue at HSL 240°, 100%, 50%. Same lightness,
right? No. The yellow looks dramatically brighter than the blue, because HSL's "L" is the mathematical
mid-point of the RGB cube — not what your eye perceives as equally bright. OKLCH fixes this: its
lightness axis is tuned to human perception, so oklch(60% ...) is perceptually the same
lightness regardless of hue. Every browser released after late 2023 supports oklch() natively
in CSS.
WCAG contrast, in one paragraph
The Web Content Accessibility Guidelines define four thresholds based on the contrast ratio between foreground and background: AA Large (3:1) for 18pt+ or 14pt bold, AA Normal (4.5:1) for body text, AAA Large (4.5:1), and AAA Normal (7:1). Aim for AA Normal on every body-text pair, AAA when you can. This tool shows all four badges live so you can see exactly which thresholds pass.
The harmony palette
The five swatches under the color represent classic color-theory relationships, computed in HSL:
- Base — the color you picked.
- Complement — hue + 180°. Maximum hue contrast. Great for accent colors.
- Analogous ±30° — adjacent on the wheel. Good for soft, harmonious palettes.
- Triadic +120° — equidistant third. Strong but balanced.
Click any swatch to make it the active color. These are starting points — real palettes usually need manual tuning for lightness and saturation, which is where OKLCH shines.
Frequently asked questions
Does this color picker work offline?
Yes. Once the page has loaded, everything runs in your browser. Disconnect from the internet and the picker, format conversions, contrast checker, and palette all keep working. Bookmark the page or use "install as app" for a one-click desktop color picker.
How accurate is the OKLCH conversion?
The conversion uses Björn Ottosson's Oklab matrices from the CSS Color Module 4 specification —
the same math the browsers use when rendering oklch() CSS. Round-trip
(sRGB → OKLCH → sRGB) is lossless within rounding. You can verify by pasting the generated OKLCH
string into CSS and confirming the rendered color matches.
Why does my WCAG ratio look different from another tool's?
The ratio in Xerobit follows WCAG 2.1 §1.4.3 exactly: convert each color's sRGB channels to linear
sRGB via the standard gamma curve, then weight as Y = 0.2126R + 0.7152G + 0.0722B, and
compute (L1 + 0.05) / (L2 + 0.05). Some tools use WCAG 3's experimental APCA algorithm
which gives different numbers. APCA is not a WCAG requirement yet — for compliance work, use 2.1's
ratio (what this tool shows).
Can I share a color link?
Yes. The URL hash auto-updates as you pick (e.g., /tools/color-picker#10b981). Copy the
full URL and send it — opening the link restores that exact color.
Is alpha (transparency) supported?
Not in the current version. Every format shown is opaque. Alpha handling (RGBA, HSLA, OKLCH with
alpha) is on the roadmap. For now, append /0.5 to any OKLCH or RGB string or use
#RRGGBBAA 8-digit hex manually.
What's the difference between HSL and HSV?
HSL's third axis is lightness: 0% is black, 100% is white, 50% is the "pure" color. HSV's third axis is value: 0% is black, 100% is the pure color (never white). Designers usually prefer HSL for palette work; HSV is more common in graphics apps. If you need HSV, convert via the HSL output — or ask and I'll add HSV as a fifth format.
Related tools
- JSON Formatter — Format, validate, and beautify JSON online. 100% client-side — your data never leaves your browser.
- UUID Generator — Generate UUID v4 and v7 identifiers in bulk.
- Regex Tester — Test regular expressions with live match highlighting and explanation.
- HTTP Status Codes — Full HTTP status code reference with explanations and when to use each.
Further reading
Pillar
Part of Dev Productivity — regex, cron, timestamps, HTTP, color, word counter, aspect ratio, case.
Written and maintained by Mian Ali Khalid. Last updated 2026-04-25.