Compute perceived color brightness

Estimate how light or dark a color appears under a selected formula.

freeworks offlinenothing uploaded
ToolColor Brightness
Input
Output
—
Put this on your own site

The frame below runs the same code as this page, in the reader's own browser. Nothing is sent to us, and nothing is sent to you.

Pick a dark background and the text and panels follow it, so the frame stays readable on a dark page.

Preview

How it works

Brightness is estimated from the selected RGB or HSL representation using its channel values and a chosen perceptual or simple-lightness formula. The result is a descriptive scalar, not the WCAG contrast ratio.

  • HSL lightness and weighted RGB answer different brightness questions.

Worked example

Dark Color
Check brightness of a dark navy color
Input
											#1A1A2E
Output
												Color: #1A1A2E
Brightness: 28.3 / 255
Category: Dark

When to use this

Theme design, palette sorting, and text/background previews estimate brightness.

Edge cases

  • HSL lightness and WCAG relative luminance are not interchangeable.
  • Gamma-encoded sRGB channels need linearization for physical calculations.
  • Equal brightness values can still have very different hue and contrast.

References