Color Picker & Converter

Color Picker & Converter

Pick visually or paste any value — HEX, RGB, HSL, OKLCH and OKLAB stay in sync. Includes a WCAG 2.2 contrast checker and OKLCH-based palette generator. Runs entirely in your browser.

Color Picker & Converter — TL;DR

Pick visually or paste any value — HEX, RGB, HSL, OKLCH and OKLAB stay in sync. Includes a WCAG 2.2 contrast checker and OKLCH-based palette generator. Runs entirely in your browser.

Paste your hex value (e.g. #ff5722) into the HEX field — the RGB row will update instantly. Likewise, paste rgb(255 87 34) into the RGB field and HEX, HSL, OKLCH and OKLAB will all sync. Conversion is bidirectional across every supported format.

OKLCH is a CSS Color Module Level 4 color space that uses perceptual lightness (L), chroma (C), and hue (h) — like HSL, but perceptually uniform. Two OKLCH colors with the same L value look equally bright, even at different hues. That makes design tokens, generated palettes, and accessible color ramps far more predictable than HSL. All evergreen browsers (Chrome 111+, Safari 15.4+, Firefox 113+) support it.

Color values never leave your device. Open DevTools → Network and you'll see zero outbound requests during conversion, picking, palette generation or contrast checking.

HEX
RGB
HSL
OKLCH
OKLAB
Named

Palette

WCAG 2.2 contrast

Text
Background
—
Preview
Large heading sample
Body text sample — the quick brown fox jumps over the lazy dog.

Designed for real workflows

From design systems to accessibility audits — every format and check you need, in one place.

Six color spaces

Round-trip between HEX (3 / 4 / 6 / 8 digit), RGB(A), HSL(A), OKLCH, OKLAB and CSS named colors. Output strings match CSS Color Module Level 4 syntax — paste them straight into your stylesheets.

WCAG 2.2 contrast checker

See the contrast ratio between any two colors with one-click pass/fail badges for AA (4.5 : 1) and AAA (7 : 1), at both normal and large text sizes. Calculation matches the W3C reference: sRGB linearization, relative luminance, then (L1+0.05)/(L2+0.05).

EyeDropper — sample any pixel

Click the eyedropper to sample any color on your screen — designs, screenshots, photos, even other browser tabs. Uses the native EyeDropper API on Chromium browsers.

OKLCH-based palette

Generate 9-step tints and shades plus complementary, triadic and analogous harmonies — derived in OKLCH so each step is perceptually evenly spaced (unlike HSL, where lightness varies wildly).

Privacy by design

Every conversion runs in JavaScript on your device. Nothing is uploaded, logged, or sent to any third party — open DevTools → Network if you want to verify it yourself.

Built for speed

Pure JavaScript, no framework runtime. Cold load is under 50 KB gzipped; conversions and palette generation finish in under one millisecond on a five-year-old laptop.

How to use the color picker

Four ways to start, every format in sync.

  1. 1

    Pick visually

    Drag inside the saturation/value square to choose the shade, slide the hue bar below to change the base color, and use the alpha slider for transparency. Every format on the right updates instantly.

  2. 2

    Paste any value

    Paste a HEX (#4f46e5), RGB (rgb(79 70 229)), HSL (hsl(244 76% 59%)), OKLCH (oklch(53% 0.22 277)) or even a CSS named color (tomato) into the matching input — the picker and other formats all sync.

  3. 3

    Sample with the eyedropper

    Click the eyedropper button to capture any pixel on your screen — another tab, a screenshot, a photo, an icon. Uses the native EyeDropper API on Chrome, Edge and Opera.

  4. 4

    Copy or check contrast

    Click the copy icon next to any format to put it on your clipboard. Or scroll to the WCAG 2.2 contrast section to check whether your foreground / background combination passes AA or AAA at normal and large text sizes.

Built for designers, developers and accessibility auditors

A color tool that fits four common workflows.

Design system token authoring

Convert brand HEX values into OKLCH so every shade in your token ramp has the same perceptual lightness step. Paste the OKLCH output directly into your CSS — no preprocessor needed.

WCAG accessibility audits

Drop in foreground / background pairs and read the contrast ratio plus AA / AAA badges. Catch failing combinations before they ship — meets the W3C-mandated 4.5 : 1 normal / 7 : 1 enhanced thresholds.

Front-end CSS conversion

Have a HEX from a designer mockup but need an HSL for a Tailwind config or an OKLCH for a modern stylesheet? Paste once, copy in any format. Output strings are valid CSS Color Module Level 4 syntax.

Palette exploration

Pick a base color and instantly see nine perceptually-spaced tints and shades plus complementary, triadic and analogous harmonies — generated in OKLCH so each step looks evenly bright.

100% private — runs in your browser

Color values never leave your device. Open DevTools → Network and you'll see zero outbound requests during conversion, picking, palette generation or contrast checking.

  • Every conversion (HEX ↔ RGB ↔ HSL ↔ OKLCH ↔ OKLAB) runs as JavaScript on your machine — the formulas are visible in the page source.
  • The EyeDropper API only returns colors you explicitly click; the browser handles permission and never lets the page see arbitrary pixels.
  • No login, no telemetry on color values, no third-party color API. The site is GDPR-compliant out of the box.

Related guides

Hand-picked tutorials for designers, developers and accessibility teams.

Frequently asked

How do I convert HEX to RGB?

Paste your hex value (e.g. #ff5722) into the HEX field — the RGB row will update instantly. Likewise, paste rgb(255 87 34) into the RGB field and HEX, HSL, OKLCH and OKLAB will all sync. Conversion is bidirectional across every supported format.

What is OKLCH and why should I use it?

OKLCH is a CSS Color Module Level 4 color space that uses perceptual lightness (L), chroma (C), and hue (h) — like HSL, but perceptually uniform. Two OKLCH colors with the same L value look equally bright, even at different hues. That makes design tokens, generated palettes, and accessible color ramps far more predictable than HSL. All evergreen browsers (Chrome 111+, Safari 15.4+, Firefox 113+) support it.

Is the WCAG contrast result reliable?

Yes. We use the algorithm from WCAG 2.2 §1.4.3: linearize each sRGB channel, compute relative luminance (0.2126·R + 0.7152·G + 0.0722·B), then (L_lighter + 0.05) / (L_darker + 0.05). AA passes at 4.5 : 1 for normal text and 3 : 1 for large text (18 pt+ or 14 pt+ bold). AAA passes at 7 : 1 and 4.5 : 1 respectively.

Can I sample colors from images or other apps?

Yes — click the Eyedropper button to launch the browser's built-in EyeDropper API. You can sample any pixel anywhere on screen: another browser tab, a Figma design, a video frame, even a screenshot. Currently supported on Chrome, Edge and Opera; Firefox and Safari fall back gracefully (the button is disabled).

Is anything sent to your server?

No. The picker, every conversion, the palette generator and the contrast checker all run in your browser. No color values, image samples, or text are ever transmitted. You can open DevTools → Network and verify there are zero outbound requests during use.