Color Brightness Calculator
Use our free Color brightness Calculator to learn and practice. Get step-by-step solutions with explanations and examples.
Reviewed for accuracy by Daniel Agrici, Founder & Lead Developer
Color Brightness Calculator
Calculator
Adjust values & calculateEnter your values below. Every result is computed in your browser โ no data is sent to any server.
Formula: BT.709: L = 0.2126R + 0.7152G + 0.0722B | HSP: P = sqrt(0.299R^2 + 0.587G^2 + 0.114B^2)
Worked example โ Brightness: 48.4% (Dark) - Use white text (#FFFFFF) for best readability
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 BT.709 brightness: (0.2126 x 59 + 0.7152 x 130 + 0.0722 x 246) = 12.54 + 93.0 + 17.76 = 123.3 Brightness %: 123.3/255 = 48.4% Since 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%) Dark green #008000: BT.709 = 0 + 91.2 + 0 = 91.2 (35.8%) Pure green relative luminance: 0.7152 Dark green relative luminance: 0.1544 Contrast 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.
What is the HSV color model and how does its Value component relate to brightness?
HSV (Hue, Saturation, Value) is a cylindrical color model where Value represents the maximum of the RGB channels, essentially measuring the intensity of the brightest color component. An HSV Value of 100 percent means at least one RGB channel is at maximum (255), regardless of the other channels. This means pure white (255,255,255), pure red (255,0,0), and pure yellow (255,255,0) all have the same HSV Value of 100 percent, even though they have vastly different perceived brightness. HSV Value is useful for color manipulation (darkening or lightening colors) but is a poor measure of perceptual brightness. The HSL Lightness component is slightly better, averaging the maximum and minimum channels, but still does not account for human color sensitivity differences.
How can I create accessible color palettes using brightness calculations?
Creating accessible color palettes requires systematic brightness analysis. Start by calculating the relative luminance of your palette colors using the W3C formula. For each color pair, compute the contrast ratio and verify it meets WCAG thresholds (4.5:1 for normal text, 3:1 for large text at Level AA). Use the brightness classification (dark versus light) to automatically select text colors (white text on dark backgrounds, black on light). When designing a color system, ensure that each shade step has sufficient contrast with adjacent steps and that the darkest and lightest shades span a wide enough luminance range. Tools like Color Brightness Calculator help visualize brightness variants and test color combinations before implementing them in design systems.
What is gamma correction and why does it affect brightness calculations?
Gamma correction is a non-linear encoding applied to image and video data to account for the non-linear response of display devices and human vision. In the sRGB color space (used by most displays and the web), pixel values are gamma-encoded with an approximate power of 1/2.2, meaning the display applies a 2.2 power curve to produce light output. This encoding efficiently allocates more digital levels to darker tones where human vision is more sensitive to differences. For accurate brightness calculations, the gamma must be reversed (linearization) before applying luminance weighting. Skipping linearization produces incorrect brightness values, particularly for mid-tone colors. The sRGB linearization formula uses a piecewise function: linear = value/12.92 for values below 0.03928, and ((value+0.055)/1.055)^2.4 for values above.
How do color brightness considerations differ between print and digital design?
In digital design, brightness is controlled by pixel values emitting light from screens, and calculations use the sRGB color space with gamma correction. In print design, brightness depends on ink coverage, paper whiteness, and ambient lighting conditions. Digital colors are additive (RGB), where maximum values produce white, while print colors are subtractive (CMYK), where maximum ink produces near-black. Paper brightness is measured in ISO brightness units, typically 80-100 for office paper. The same color can appear very different in print versus on screen due to gamut differences and illuminant variations. Print designers must account for dot gain (ink spread), which darkens printed colors compared to digital proofs. Brightness calculations for print accessibility should use measured color values under standard illumination (D50) rather than theoretical CMYK-to-RGB conversions.
References
Background & Theory
History
Reviewed for accuracy by Daniel Agrici, Founder & Lead Developer ยท Editorial policy
Related Calculators
๐จColor Converter
Convert between color formats
๐งฎColor Contrast Ratio Calculator
Calculate color contrast ratio with inputs, formulas, and instant results.
๐งฎColor Harmony Tool
Calculate color harmony tool with inputs, formulas, and instant results.
๐งฎColor Mixing Calculator
Calculate color mixing with inputs, formulas, and instant results.
๐งฎColor Space Converter
Calculate color space converter with inputs, formulas, and instant results.
๐งฎColor Temperature Calculator
Calculate color temperature with inputs, formulas, and instant results.
๐งฎComplementary Color Finder
Calculate complementary color finder with inputs, formulas, and instant results.
๐งฎLearning Curve Calculator
Calculate learning curve with inputs, formulas, and instant results.