What's the difference between brightness, luma, and luminance?

Brightness is the W3C ITU-R BT.601 perceived value (good for quick sorting). Relative luminance is the WCAG formula used for contrast ratios. CIE L* is perceptual lightness in OKLAB space. They give different numbers — pick the one that matches your use case.

Which contrast standard does it use?

WCAG 2.1 (relative luminance) for AA/AAA pass-fail. APCA (the modern alternative) is shown alongside for reference.

Why does the 'closest Tailwind' differ from 'closest named CSS'?

Tailwind matches against the full 22×11 palette. Named CSS uses the ~140 SVG color keywords. Same input, different palettes — both rounded to the nearest by OKLCH distance.

hex · luma · contrast · oklch · live · local

Full color info at a glance

Q: Is anything sent to a server?

No — all computation is local.

One HEX in → every format, plus brightness, luma, lightness and contrast against white and black. Runs entirely in your browser.

Color Info

HEX

#3B82F6

input

Tone

Dark

luma 0.48

vs white

3.7:1

contrast

vs black

5.7:1

contrast

input · color

HEX value

Live preview

Dark

output · preview

HEX

#3b82f6

RGB

rgb(59, 130, 246)

HSL

hsl(217.2, 91.2%, 59.8%)

HSV

hsv(217.2, 76%, 96.5%)

HWB

hwb(217.2 23.1% 3.5%)

CMYK

cmyk(76%, 47.2%, 0%, 3.5%)

OKLCH

oklch(62.31% 0.188 259.8)

Luminance

0.2355

Luma

0.4835

vs white

3.68:1

vs black

5.71:1

Quick Start

How to inspect a color

Paste a HEX and get every notation plus brightness diagnostics in one panel.

01
Pick a color
Native swatch or HEX paste.
Colors round-trip through a normalised OKLCH representation, so manipulations (lighten, mix, contrast) preserve perceptual uniformity per CSS Color 4.
inputOKLCHCSS Color 4perceptuallive
in · colorhex · sRGB
```
#3b82f6
```
loaded · normalisedOKLCH · ready
02
Read formats
HEX, RGB, HSL, HSV, HWB, CMYK, OKLCH — all updated live.
Format conversion handles hex, rgb(), hsl(), oklch(), color(display-p3 …) with proper gamut mapping when crossing colour spaces.
formatshex · rgb · hslP3gamut-mappedlive
out · options7 formats · live
```
hsl(217 91% 60%)
```
options applied · livelive
03
Check brightness
Luma and luminance tell you whether the color is light or dark.
Contrast and accessibility checks evaluate against WCAG 2.2 AA (4.5:1) and AAA (7:1) thresholds; APCA is offered when contrast is the goal.
lumenWCAG 2.2APCAAA · AAAcontrast
luma · converted.42 · ready
```
Dark
```
converted · liveWCAG-aware
04
Contrast vs B/W
Quick sanity-check ratios against pure white and black.
Copy formats any swatch in the chosen syntax (#aabbcc, rgb(170 187 204), etc.); downloads emit CSS variable blocks or palette JSON.
a11yclipboardCSS varspalette JSONblob
ok · copiedready · done
```
4.49:1 / 4.69:1
```
shipped · ready to shipsuccess

Pro tips

Colour work that survives accessibility audits

Use OKLCH for manipulation

OKLCH is perceptually uniform — lightness changes look uniform. hsl() isn’t, and produces muddy mid-tones.

Test against WCAG 2.2

4.5:1 for normal text (AA), 7:1 for AAA. Use Contrast Checker before shipping.

Mind gamut clipping

P3 colours that exceed sRGB get clipped on standard displays. Choose relative colorimetric in CSS Color 4.

Colour blindness affects 8%

Use the Color Blindness simulator to check critical UI before launch.

Don’t hardcode hex

Use CSS variables. Light/dark themes become trivial when colours are tokenised.

Dark mode isn’t inverted

Don’t simply invert lightness — desaturate slightly and re-pick accents. Pure-inverted UIs look harsh.

Use Cases

When you need full color info

Designing, debugging, accessibility, documentation.

Design audits

Spot check brand colors in every notation at once. Conversions go through OKLCH so perceptual lightness stays uniform across hues — a 50% L blue looks as bright as a 50% L yellow. HSL fakes this and produces muddy mid-tones, OKLCH solves it per CSS Color 4.

WCAG 2.2 AA

Accessibility

Quick contrast peek against white and black backgrounds. WCAG 2.2 contrast is sampled live for AA (4.5:1) and AAA (7:1) — flip foreground/background to test both directions. APCA is offered when contrast itself is the goal (e.g., dataviz).

a11y

Documentation

Copy a single line listing every format for your spec. Output covers hex, rgb(), hsl(), oklch(), and color(display-p3 …) for CSS Color 4. Drop straight into Tailwind config, CSS custom properties, or Figma without re-typing values.

perceptually-uniform

Bug triage

Identify whether a UI color matches the design token. Pair with the Contrast Checker before shipping any new theme. Catches accessibility regressions before they become bugs filed against you by users with low vision.

gamut-safe

Quick math

Pull luminance for retina-sensitive UI decisions. Tokens drop straight into Figma variables, Tailwind config, or CSS custom properties. Theme switching becomes a single variable swap rather than a search-replace across stylesheets.

a11y-ready

Cross-tool

Bridge Figma values into CSS in seconds. Gamut-aware: tools warn before you ship a P3 colour that clips on sRGB displays. Choose the appropriate fallback strategy (relative colorimetric vs perceptual) per CSS Color 4 spec.

design-token

FAQ

Frequently asked questions

What is luma vs luminance?

Luma is a fast weighted sum of R/G/B. Luminance is gamma-corrected (used by WCAG).

Which format is best for CSS?

Modern: OKLCH for perceptual scales. Legacy: HEX or RGB are most compatible.

How do I read contrast?

Higher is better. WCAG AA needs 4.5:1 for normal text, 3:1 for large text.

Is HSV the same as HSB?

Yes — Photoshop calls it HSB, the rest of the web calls it HSV.

Is anything sent to a server?

No — everything runs entirely in your browser.

Suggest a tool

Something missing?

Tell us what you need. We ship the top requests every two weeks.

47 in queue·8 shipped this month

Request queued. Thanks!