Color Brightness Calculator
Use our free Color brightness Calculator to learn and practice. Get step-by-step solutions with explanations and examples.
Reviewed by Daniel Agrici, Founder & Lead Developer
Formula
BT.709: L = 0.2126R + 0.7152G + 0.0722B | HSP: P = sqrt(0.299R^2 + 0.587G^2 + 0.114B^2)
BT.709 is the ITU standard for HDTV luminance weighting. HSP uses squared RGB values with NTSC weights for better perceptual accuracy. W3C relative luminance linearizes sRGB values before applying BT.709 weights, and is used for WCAG accessibility contrast calculations.
Worked Examples
Example 1: Web Design Text Color Selection
Problem:A website uses background color #3B82F6 (Tailwind blue-500). Should text be black or white?
Solution:RGB: R=59, G=130, B=246\nBT.709 brightness: (0.2126 x 59 + 0.7152 x 130 + 0.0722 x 246) = 12.54 + 93.0 + 17.76 = 123.3\nBrightness %: 123.3/255 = 48.4%\nSince brightness < 50%, the color is classified as dark
Result:Brightness: 48.4% (Dark) - Use white text (#FFFFFF) for best readability
Example 2: Comparing Green Shades for Accessibility
Problem:Compare brightness of #00FF00 (pure green) and #008000 (dark green) for background use.
Solution:Pure green #00FF00: BT.709 = 0 + 182.4 + 0 = 182.4 (71.5%)\nDark green #008000: BT.709 = 0 + 91.2 + 0 = 91.2 (35.8%)\nPure green relative luminance: 0.7152\nDark green relative luminance: 0.1544\nContrast with white: pure green = 1.37:1 (fails AA), dark green = 5.14:1 (passes AA)
Result:Pure green: 71.5% brightness (use dark text) | Dark green: 35.8% (use light text, passes WCAG AA)
Frequently Asked Questions
What is color brightness and how is it measured?
Color brightness is a perceptual attribute that describes how much light a color appears to emit or reflect. It is measured using mathematical models that account for the human visual system sensitivity to different wavelengths of light. The eye is most sensitive to green light, less to red, and least to blue. Several formulas exist: the ITU-R BT.709 standard uses weighted coefficients (R x 0.2126 + G x 0.7152 + B x 0.0722), the HSP model uses the square root of weighted squares for better perceptual accuracy, and the W3C relative luminance formula linearizes sRGB values before weighting. Each model serves different purposes from broadcast standards to web accessibility compliance.
What is the difference between luminance, lightness, and brightness?
Luminance is a physical measurement of light intensity per unit area, measured in candelas per square meter. It is objective and measurable with instruments. Lightness is a perceptual attribute that describes how light or dark a color appears relative to a similarly illuminated white surface, used in color models like CIELAB (L*) and HSL. Brightness (or value in HSV) is the subjective perception of how much light a color appears to emit. While luminance is linear, human perception of lightness follows a roughly cubic root relationship with physical luminance, which is why color science uses non-linear transformations. In practice, these terms are often used interchangeably but refer to distinct scientific concepts that produce different numerical values for the same color.
Why does the HSP brightness model use different weights than other formulas?
The HSP (Hue, Saturation, Perceived brightness) model was developed by Darel Rex Finley specifically to address the limitations of simpler brightness calculations. It uses weights of R: 0.299, G: 0.587, B: 0.114 (derived from the NTSC television standard) applied to the squares of RGB values, then takes the square root: sqrt(0.299*R^2 + 0.587*G^2 + 0.114*B^2). This approach better models human brightness perception because the relationship between pixel values and perceived brightness is non-linear. The squaring operation accounts for the gamma curve of display devices, making HSP more useful than simple linear weighting for applications like determining whether text should be black or white on a colored background.
How is color brightness used in web accessibility (WCAG)?
The Web Content Accessibility Guidelines (WCAG) use relative luminance to calculate contrast ratios between foreground and background colors. The relative luminance formula first linearizes sRGB values (reversing the gamma curve), then applies BT.709 weights. The contrast ratio is (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter color luminance. WCAG 2.1 requires a minimum contrast ratio of 4.5:1 for normal text (Level AA) and 7:1 for enhanced accessibility (Level AAA). Large text (18px bold or 24px regular) requires 3:1 for AA. Understanding brightness is essential for creating accessible designs because colors that appear visually distinct may have insufficient luminance contrast for users with low vision or color deficiencies.
References
Reviewed by Daniel Agrici, Founder & Lead Developer · Editorial policy