Color Picker with OKLCH values

What does the colour picker do?

The picker shows one colour in five models simultaneously — HEX, RGB, HSL, HSB and OKLCH — and renders six one-click code snippets for CSS, Tailwind v4, SwiftUI, Flutter and Figma. The OKLCH sliders are the centrepiece: lightness, chroma and hue are independent axes because OKLCH is perceptually uniform. That makes it a better fit for design-system work than a classic HSL slider.

Pure client. Every value stays in your browser. No server, no tracking, no cookie wall. Recent colours live in the current session only — on reload the strip is empty.

Why OKLCH first?

In HSL a bright yellow-green looks lighter than a dark purple even though both have the same L value. That is because HSL derives lightness linearly from RGB rather than from how the human eye actually perceives light. OKLCH fixes this by operating in the perceptual Oklab space: equal L means equal perceived brightness, regardless of whether the colour is green, blue or red.

For design systems that means a palette with constant lightness and varying hue actually feels constant. In HSL you have to nudge lightness per hue to keep the accents at the same visual weight.

P3 / Rec2020 gamut warning

OKLCH can describe colours that the sRGB gamut cannot render. On a modern P3 display — every Apple device since 2015, many Android phones, modern designer monitors — those colours are visible. On a standard sRGB monitor they get clipped to the gamut boundary. The picker detects this and shows a small “Outside sRGB” badge whenever the chosen OKLCH combination leaves the sRGB triangle. That lets you know your audience will see the colour differently depending on their hardware.

How do the EyeDropper and pixel-pick work?

The EyeDropper button opens the browser’s built-in screen pipette: one click anywhere on the screen returns that pixel’s colour. Available in Chrome 95+ and Edge 95+. Firefox and Safari haven’t shipped the API yet, so the tool grays out the button and shows a short notice instead of throwing an error.

For a cross-browser fallback there is the image picker: drag and drop an image into the dropzone or open the file picker, then click any single pixel inside the image. The pipette reads the RGB values via a <canvas> element entirely in the browser — nothing is uploaded. Works with any format the browser decodes: JPG, PNG, WebP, GIF, SVG, AVIF.

Why dual contrast with WCAG 2.2 and APCA?

A colour is never legible in isolation — it always sits on a background. The picker therefore scores contrast against both a light and a dark reference background at the same time. You see in one glance whether the colour works for a light-mode UI, a dark-mode UI or both.

WCAG 2.2

The Web Content Accessibility Guidelines ratio is the legally binding reference under WCAG, ADA, Section 508 and the European Accessibility Act. Thresholds:

• 3.0 — Large text (≥18 pt or ≥14 pt bold)
• 4.5 — Body text (AA)
• 7.0 — Body text (AAA, highest tier)

WCAG measures contrast as the ratio of relative luminances and is order-invariant — the value is symmetric between foreground and background.

APCA Lc

The Accessible Perceptual Contrast Algorithm by Andrew Somers was proposed for WCAG 3 because it models contrast more perceptually. APCA values are signed: positive means dark text on light background, negative means light text on dark background. Rough rules from the APCA-W3 draft:

• Lc 75+ — small body text (around 14 pt)
• Lc 60+ — larger body text
• Lc 45+ — headings and icons
• Lc 15+ — UI components and dividers

Values below 15 are essentially unreadable. The scale runs symmetrically from about −108 (white on black) to +108 (black on white).

Seeing WCAG and APCA in parallel helps you handle edge cases — some colours barely pass WCAG but fail APCA and vice versa. A light-mode brand colour that lands on the WCAG-AA edge is worth a second look against APCA.

What does the colour-blindness preview show?

Roughly 8 % of men and 0.4 % of women in Western Europe have some form of colour-vision deficiency. The most common is deuteranopia (green-weakness), followed by protanopia (red-weakness). Tritanopia (blue-weakness) is rare. The picker simulates all three using the Machado, Oliveira and Fernandes (2009) physiological cone-response model — the modern successor to the Brettel-Viénot-Mollon (1997) approach.

If two UI colours look identical in the simulation, they are indistinguishable for that deficiency. Traffic-light red and green both look olive-yellow under deuteranopia — which is exactly why good status cards always carry an icon or label as well as colour.

Which code snippets does the picker generate?

One click delivers the chosen colour in the format your next step expects:

• CSS variable — --brand: #1A8FE6; for a stylesheet or tokens.css.
• Tailwind v4 arbitrary — bg-[oklch(60%_0.18_240)] for one-off use in markup.
• Tailwind v4 @theme — A @theme { --color-brand: ...; } block for a design token.
• SwiftUI — Color(red:, green:, blue:) with 0..1 floats for iOS / macOS apps.
• Flutter — Color.fromRGBO(26, 143, 230, 1.0) for Dart code.
• Figma HEX — 1A8FE6 without the leading #, the way Figma’s colour input expects it.

Where do recent colours live?

Up to eight recently picked colours sit in a small strip for the lifetime of the browser tab — no localStorage, no cookies, no server. On reload the strip is empty. That is a deliberate choice: no browser storage means no GDPR overhead, no cookie wall, no privacy-policy edge cases. To save a palette, copy the code snippets into a note or stylesheet. To share one colour, use the share link that carries an OKLCH triplet in the URL hash — #oklch=62.80_0.258_29.23 rebuilds the colour on the receiving side.

How are keyboard, touch and input tolerance handled?

Each slider accepts arrow keys for one-percent or one-degree increments — good for fine adjustments. Tab walks the natural order OKLCH → HEX input → EyeDropper → image → snippets → contrast → preview, so the tool stays usable without a mouse. Touch targets are at least 44 × 44 pixels throughout to meet WCAG 2.5.5.

The HEX input accepts values with or without the leading #, in upper or lower case, in 3-, 4-, 6- or 8-digit form — the parser expands #FA0 to #FFAA00 automatically. As soon as the input is parseable the OKLCH sliders snap to the matching value and the recent strip records the colour.

Which Tools Are Related?

More tools from the kittokit set that fit the same problem space:

• HEX to RGB Converter — Convert one colour between HEX, RGB, HSL and OKLCH without the picker surface.
• Contrast Checker — Check two specific colours against WCAG thresholds with a side-by-side preview.
• CSS Gradient Generator — Build gradients with OKLCH stops in the perceptually uniform interpolation space.
• Box-Shadow Generator — Multi-layer shadows with OKLCH colour input and Material elevation presets.