A color’s luminance affects readability, hierarchy, and accessibility. This tool computes relative luminance (e.g. per WCAG) for a given color and may show contrast against black/white, so you can judge if a color is light or dark enough for text.
Use it to quickly evaluate brightness and readability when choosing colors, or to build same-hue palettes with consistent luminance steps.
Enter HEX, RGB, or pick a color; the tool computes and displays relative luminance (often 0–1 or normalized 0–255) and a swatch.
Some tools show the color on white and black backgrounds and contrast against each, so you can judge readability as foreground or background.
If supported, generate a palette of luminance steps (e.g. 10%, 30%, 50%) for the same hue to keep UI hierarchy consistent.
No. Relative luminance is the WCAG-style value weighted by human perception of R/G/B; HSL L is linear mix of black/white. The numbers and perceived brightness don’t match 1:1.
On white background, text usually needs low luminance (e.g. <0.4); on black, high (e.g. >0.6). Use a contrast checker and WCAG ratio for exact requirements.
Depends on the tool; if OKLCH is supported, its L channel aligns better with perceived lightness and can be used together with this tool for luminance and contrast checks.