Relative Luminous Color Wheel

ver. 2.12.13

Layout Preview

Preferences

Theme

Include # in hex

Colors in share link

Theme in share link

Underlay

Vision

Target Relative Luminance

Opacity

Hue

Saturation

Hex

#808080

Luminance

0.2158

HSL

0°0%50%

RGBA

128128128100%

vs White & Black

TEXT

Large text

Normal text

The quick brown fox jumps over the lazy dog.

UI · Icons

TEXT

Large text

Normal text

The quick brown fox jumps over the lazy dog.

UI · Icons

vs Custom

TEXT

Large text

Normal text

The quick brown fox jumps over the lazy dog.

UI · Icons

TEXT

Large text

Normal text

The quick brown fox jumps over the lazy dog.

UI · Icons

RGB

HSL

What is this? — an accessible color picker & WCAG 2.2 / APCA contrast checker

Relative Luminous Color Picker is a free, private accessible color picker and WCAG 2.2 / APCA contrast checker built on a luminance-locked color wheel. Every color on the wheel shares one relative luminance, so once you lock a contrast target the pair can't fall below it — accessible color by construction, not by trial and error.

Lock a WCAG 2.2 ratio (3:1 / 4.5:1 / 7:1) or an experimental APCA Lc target; the untouched side re-pins itself as you explore hue and saturation.
Check any pair against white, black, or a custom color — AA/AAA badges plus APCA Lc and font-size verdicts. Opacity-aware: contrast is measured on the composited (alpha-blended) result.
Build an accessible palette, then generate an OKLCH tonal scale (50–950) and ready-made light & dark themes with Material-3-style semantic roles (surfaces, accent, status colors).
Preview a theme on a realistic page mock and component gallery, and simulate protanopia / deuteranopia / tritanopia (color blindness) across the whole UI.
Export CSS variables, a Tailwind v4 theme, a shadcn/ui theme, or W3C design tokens (DTCG JSON) — OKLCH or hex, with alpha; share your exact state via a URL.

Common questions

How do I check color contrast for WCAG 2.2 AA and AAA?
Pick two colors and read the live ratio with AA/AAA badges — 4.5:1 for normal text, 3:1 for large text and UI components, 7:1 for AAA — against white, black, or a custom color. Set a target and the contrast lock holds it while you explore.

What is APCA, and how does it differ from WCAG 2.2 contrast?
APCA (the WCAG 3 working-draft method) scores perceptual lightness contrast (Lc) and factors in font size and weight. This tool shows APCA Lc beside every WCAG 2.2 ratio, with the official usage levels and minimum font sizes. WCAG 2.2 stays the normative standard.

Which contrast ratio do I need?
WCAG 2.2 AA requires 4.5:1 for normal text and 3:1 for large text and UI components; AAA requires 7:1. Lock any of these and the wheel keeps every reachable hue at or above it.

Can I check contrast for semi-transparent (opacity) colors?
Yes. Set opacity on any color and contrast is measured on the composited (alpha-blended) result — over its background or a configurable page underlay — so the ratio and APCA Lc reflect what is actually visible.

Can I simulate color blindness?
Yes — protanopia, deuteranopia and tritanopia are simulated across the entire interface, including the wheel, palette, generated themes and previews.

How do I export my palette or theme to CSS, Tailwind, shadcn or design tokens?
Generate a tonal scale (50–950) plus light and dark themes, then export CSS custom properties, a Tailwind v4 theme, a ready-to-paste shadcn/ui theme, or W3C design tokens (DTCG JSON) — in OKLCH or hex, with alpha.

Keyboard shortcuts: press ? at any time to open the full list.

WCAG 2.1/2.2 AA is the level referenced by the ADA and the European Accessibility Act; APCA is an experimental, forward-looking option. Runs entirely in your browser — no account, no upload. Provided “as is”, without warranty; verify independently — not a substitute for professional accessibility auditing.