Color Brightness Calculator

Q: 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

Q: 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 o

Q: 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 bri

Q: 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

Q: What is the relationship between RGB values and perceived brightness?

The relationship between RGB pixel values and perceived brightness is non-linear due to gamma encoding in the sRGB color space. Standard displays apply a gamma curve (approximately power of 2.2) so that pixel value 128 does not produce half the physical light output of value 255, but rather about 21.8 percent. This gamma correction means that simple arithmetic on RGB values does not correspond to

Q: How do different brightness formulas compare in practice?

Different brightness formulas produce significantly different results for saturated colors. For pure red (255,0,0): BT.709 linear gives 54.2, HSP gives 139.4, relative luminance gives 0.2126, and HSL lightness gives 50. For pure green (0,255,0): BT.709 gives 182.4, HSP gives 195.4, relative luminance gives 0.7152, and HSL gives 50. Note that HSL lightness gives 50 for both pure red and green, fail

Use our free Color brightness Calculator to learn and practice. Get step-by-step solutions with explanations and examples.

Share this calculator

X Facebook LinkedIn

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.

What is the relationship between RGB values and perceived brightness?

The relationship between RGB pixel values and perceived brightness is non-linear due to gamma encoding in the sRGB color space. Standard displays apply a gamma curve (approximately power of 2.2) so that pixel value 128 does not produce half the physical light output of value 255, but rather about 21.8 percent. This gamma correction means that simple arithmetic on RGB values does not correspond to perceptual changes. To accurately calculate brightness, RGB values must first be linearized by reversing the gamma curve (converting sRGB to linear RGB), then weighted and summed. Furthermore, the eye's different sensitivity to red, green, and blue wavelengths means equal RGB values produce different perceived brightness: pure green (0,255,0) appears much brighter than pure blue (0,0,255) despite having the same peak RGB value.

How do different brightness formulas compare in practice?

Different brightness formulas produce significantly different results for saturated colors. For pure red (255,0,0): BT.709 linear gives 54.2, HSP gives 139.4, relative luminance gives 0.2126, and HSL lightness gives 50. For pure green (0,255,0): BT.709 gives 182.4, HSP gives 195.4, relative luminance gives 0.7152, and HSL gives 50. Note that HSL lightness gives 50 for both pure red and green, failing to capture their dramatic perceptual brightness difference. The HSP model and relative luminance both correctly show green as much brighter than red. For practical applications like choosing text color on backgrounds, the HSP model is often most reliable, while relative luminance is the standard for WCAG accessibility compliance.