Screen Color Picker
CSS Color Level 4 · Tailwind v4

The free OKLCH color picker.

Sample any pixel on your screen → get instant OKLCH output with HEX, RGB, and HSL alongside. Built for the way design systems work in 2026.

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.

Why it matters

OKLCH fixes what HSL got wrong.

For 20 years, designers used HSL to lighten and darken colors because it was "more intuitive than RGB". But HSL has a fundamental flaw: equal numeric changes don't look equal. Lighten a yellow by 10% — barely visible. Lighten a blue by 10% — huge change. That's why every Bootstrap, Material, and pre-2023 design system shipped colors that felt "off" at certain lightness levels.

OKLCH solves this with a perceptually uniform color space. The same 10% change in L (lightness) looks like the same 10% change across red, green, blue, yellow — anywhere on the wheel. The same chroma value means "this saturated" anywhere on the wheel.

The result: when you build a 50/100/200/.../900 color scale in OKLCH, every shade has uniform perceived spacing. Hover and focus states feel consistent across themes. Color palettes generated from one base color are visually balanced without manual tweaking. That's why Tailwind v4 switched to OKLCH as its native color space.

Format

Reading an OKLCH value. 

oklch(58.51% 0.1817 280.3)
       ^^^^^^  ^^^^^^  ^^^^^
        L       C       H

L (Lightness): 0%–100% — perceived brightness. 0% is pure black, 100% is pure white. Halfway (50%) is a midtone that looks like a midtone across all hues.

C (Chroma): 0–~0.4 — color intensity. 0 is pure gray. 0.37 is the maximum for sRGB (anything higher is out of gamut). Roughly: 0.05 is muted, 0.15 is vivid, 0.25+ is electric.

H (Hue): 0°–360° — color wheel position. 0°/360° is red, 90° is yellow-green, 180° is cyan, 270° is blue-violet. Same numbering as HSL; different perceptual spacing.

Tailwind v4

Drop into your Tailwind config.

Tailwind v4's @theme directive uses native CSS color functions. Pick a brand color with Screen Color Picker, copy the OKLCH output, paste: 

/* global.css */
@import "tailwindcss";

@theme {
  --color-brand-50:  oklch(97% 0.012 280);
  --color-brand-100: oklch(94% 0.025 280);
  --color-brand-500: oklch(58.51% 0.1817 280.3);  /* ← picked w/ Screen Color Picker */
  --color-brand-900: oklch(28% 0.135 280);
}

Now use bg-brand-500, text-brand-900, etc. anywhere. Want a 600 shade between 500 and 900? Interpolate L from 58.51% → 28% — perceptually accurate, no manual tweaking.

Questions

OKLCH FAQ

What is OKLCH and why is it better than HEX or HSL?

OKLCH is a perceptually uniform color space introduced by Björn Ottosson in 2020 and standardized in CSS Color Level 4 (2023+). 'Perceptually uniform' means equal changes in L, C, or H values look like equal changes to the human eye — something HEX, RGB, and HSL all fail at. When you lighten a color in HSL by 10%, the visual change is wildly inconsistent across hues. In OKLCH, +10% lightness always looks the same. That's why Tailwind v4, Radix Colors, OpenProps, and most modern design systems are switching to OKLCH.

How do I convert HEX to OKLCH with Screen Color Picker?

Pick any color from your screen — or click a swatch in your palette history. Screen Color Picker instantly shows the OKLCH value alongside HEX, RGB, and HSL with one-click copy. The conversion uses the canonical Björn Ottosson sRGB → OKLab → OKLCH pipeline; no rounding errors versus what Tailwind v4 or oklch.com produces.

Does Screen Color Picker support OKLab too, or just OKLCH?

Screen Color Picker outputs OKLCH (the polar form: Lightness, Chroma, Hue) because that's what CSS Color Level 4 standardized and what design systems use. OKLab is the rectangular underlying form (L, a, b) — OKLCH is computed from it. If you need raw OKLab values, the L from OKLCH is identical; chroma and hue convert trivially with sqrt(a²+b²) and atan2(b,a).

Why don't other online color pickers show OKLCH?

Most online color pickers haven't updated to CSS Color Level 4 yet — they were built before OKLCH was standardized. The conversion math is also non-trivial (sRGB → linear → LMS → cube root → OKLab → polar). We do the math, so you don't have to install a converter package.

Can I use OKLCH directly in my CSS today?

Yes, in every modern browser. CSS Color Level 4 OKLCH support shipped in Chrome 111+, Safari 15.4+, Firefox 113+, Edge 111+ (as of 2023). Tailwind v4 uses OKLCH as its native color space. You can also use the @supports (color: oklch(0 0 0)) feature query as a fallback gate for older browsers.

Start picking colors →

Also see: screen color picker · why we ship OKLCH · full FAQ