Perceptual Lightness Calculator
Formats
You Might Also Need
The perceptual lightness calculator reports how light a color actually looks — its OKLCH lightness — the appearance-based figure that WCAG luminance only approximates.
What is Perceptual Lightness Calculator?
Two colors with identical WCAG luminance can look unmistakably different in brightness — the legacy formula's known blind spot, because it weights channels for physical measurement rather than appearance. The perceptual lightness calculator answers the question the eye is actually asking: how light does this color look? Its answer is the OKLCH lightness component — set a color, read its perceived lightness on the 0-to-1 scale, calibrated so that equal steps look like equal steps.
- The difference between the two lightness figures is not academic.
- Yellow and blue at the same WCAG luminance do not look equally light — yellow looks far brighter — and the OKLCH figure reflects that while luminance does not.
- That is why perceptual lightness is the right quantity for most design judgments: ordering a palette from light to dark, choosing which of two accents reads as the highlight, building monochromatic ramps where steps should look even, and judging whether text will feel bold or delicate on a surface.
- The luminance calculator remains the correct tool for the legal contrast numbers; this tool is the correct one for the visual questions.
- The full conversion panel situates the reading: the same color's hex, RGB, HSL and LAB values alongside, so the lightness figure can be compared against the color's other coordinates — and the monochromatic finder puts the axis to work, building ramps that step evenly in exactly this lightness.
- The relativity caveat is worth keeping in mind: perceived lightness shifts with surrounding colors — a mid-grey looks darker on white than on black — so the figure is the color's own lightness, not its appearance in a specific layout.
Perceived lightness is the most negotiable term in colour work, which is why a single number for it is such a relief. Two colours can share a luminance value and look entirely different in weight, because saturation, surrounding contrast and the adaptation state of the eye all pull on the impression. The OKLCH lightness coordinate is designed to track that impression rather than the physics, so a value of sixty reads as roughly the same lightness whatever the hue — which is precisely what most design decisions need. The uses are unglamorous and constant: building a ramp whose steps look evenly spaced, deciding whether two brand colours are truly a pair or one clearly dominant, and checking that a hover state is a visible step away from its resting state rather than a nudge. Reading it beside the luminance value is the quickest way to see where perception and physics part company, and that divergence is the whole reason the newer colour spaces exist.
As an oklch lightness of a color instrument, it is one field and one number — the perceived lightness tool answer to how light does a color look, in the space designed to make that question well-posed.
Quoting it in a hand-off is often clearer than describing a swatch in words, because a single number says where a value sits on the ladder without anyone needing to see both swatches side by side. Where a design needs even steps, this is the coordinate to plan them in rather than the one the picker happens to show.
How to use Perceptual Lightness Calculator
- Set the color whose perceived lightness you want.
- Read the OKLCH lightness value on the 0-to-1 scale.
- Use it for ordering, ramp-building and appearance judgments — and luminance for legal contrast.
When to use Perceptual Lightness Calculator vs related tools
Use this for how light a color looks — palette ordering, ramps, highlight choices. Use the luminance calculator for WCAG figures, the contrast checkers for accessibility verdicts, and the monochromatic finder to build ramps in this same metric. The luminance calculator supplies the WCAG figure for accessibility work, the contrast checker applies the thresholds, and the monochromatic finder builds ramps that step evenly in this same lightness axis.
Privacy & Security
This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.