Saturation Luminance Converter
Use our free Saturation luminance Calculator to learn and practice. Get step-by-step solutions with explanations and examples.
Reviewed for accuracy by Daniel Agrici, Founder & Lead Developer
Saturation Luminance Converter
Calculator
Adjust values & calculateEnter your values below. Every result is computed in your browser โ no data is sent to any server.
Formula: Relative Luminance L = 0.2126R + 0.7152G + 0.0722B
Worked example โ Contrast ratio 4.43:1 โ Passes AA for large text (3:1) but fails for normal text (4.5:1 needed)
Formula
Relative Luminance L = 0.2126R + 0.7152G + 0.0722B
Where R, G, B are linearized sRGB values. Linearization converts gamma-corrected sRGB values by applying: if value <= 0.03928 then value/12.92, else ((value + 0.055)/1.055)^2.4. The contrast ratio is (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter luminance.
Worked Examples
Example 1: Checking Text Accessibility on a Blue Background
Problem:A designer wants to use HSL(210, 80%, 50%) as a button background. Will white text pass WCAG AA standards?
Solution:Convert HSL(210, 80%, 50%) to RGB: C = (1 - |2(0.5) - 1|) * 0.8 = 0.8 X = 0.8 * (1 - |(210/60) % 2 - 1|) = 0.8 * 0.5 = 0.4 RGB = (25, 118, 230) = #1976E6 Relative luminance: L = 0.2126(0.033) + 0.7152(0.173) + 0.0722(0.779) = 0.187 Contrast with white: (1.05) / (0.187 + 0.05) = 4.43:1
Result:Contrast ratio 4.43:1 โ Passes AA for large text (3:1) but fails for normal text (4.5:1 needed)
Example 2: Creating a Desaturated Version for Disabled State
Problem:A UI component uses HSL(150, 70%, 45%). Create a desaturated version for the disabled state that maintains the same lightness.
Solution:Original: HSL(150, 70%, 45%) = RGB(34, 195, 115) Desaturated: Reduce saturation to 15% while keeping H and L Disabled: HSL(150, 15%, 45%) = RGB(97, 132, 115) Luminance original: 0.353 Luminance disabled: 0.226 The desaturated version appears muted while maintaining the green identity.
Result:HSL(150, 15%, 45%) = #618473 โ Properly muted for disabled state
Frequently Asked Questions
What is the difference between saturation in HSL and HSV color models?
Saturation means different things in HSL and HSV even though both describe color purity. In HSL (Hue-Saturation-Lightness), saturation at 100% means the color is as vivid as possible at that lightness level. At 50% lightness and 100% saturation, you get the purest version of a hue. In HSV (Hue-Saturation-Value), saturation measures how much white is mixed into the color. At 100% value and 100% saturation, you get the purest color, while reducing saturation adds white, creating tints. The key difference is that HSL saturation is relative to the lightness level, while HSV saturation is relative to the brightness value. Designers often prefer HSL because it more intuitively separates the concepts of color purity and brightness.
How is relative luminance calculated and why does it matter?
Relative luminance measures the perceived brightness of a color according to human vision, using the formula L = 0.2126R + 0.7152G + 0.0722B (where RGB values are linearized from sRGB). The weights reflect how human eyes perceive different wavelengths: green appears brightest, red appears moderately bright, and blue appears darkest at equal physical intensity. This perceptual weighting is based on the spectral sensitivity of the three cone types in human eyes. Relative luminance is critical for accessibility because it determines contrast ratios under WCAG guidelines. A contrast ratio of at least 4.5:1 is required for normal text readability, calculated as (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter color.
What are WCAG contrast ratio requirements for web accessibility?
The Web Content Accessibility Guidelines define three levels of contrast compliance. Level AA for normal text requires a minimum contrast ratio of 4.5:1 between text and background colors. Level AA for large text (18pt or 14pt bold and above) requires 3:1 minimum contrast. Level AAA, the strictest standard, requires 7:1 for normal text and 4.5:1 for large text. These ratios ensure readability for users with low vision, color deficiencies, or those viewing screens in bright environments. Non-text elements like icons and form borders need at least 3:1 contrast against adjacent colors. Meeting WCAG AA is legally required in many jurisdictions under disability discrimination laws, making contrast checking essential for any public-facing website.
How do I create a color palette with proper saturation and luminance relationships?
Creating harmonious palettes requires understanding how saturation and luminance interact across color scales. Start with your primary brand color and generate lighter and darker variants by adjusting lightness while keeping hue constant. For each step lighter, slightly decrease saturation to prevent colors from appearing overly vivid at high lightness values. For darker variants, you may increase saturation slightly to maintain vibrancy. A well-designed color scale typically has 9-10 steps from near-white to near-black, with consistent perceptual lightness intervals. Use OKLCH or CIELAB color spaces for perceptually uniform steps rather than HSL, which can produce uneven-looking progressions. Always verify that adjacent steps in your palette meet minimum contrast ratios for text readability.
Why do colors with the same HSL saturation look differently vivid?
Colors with identical HSL saturation values can appear dramatically different in perceived vividness because human vision is not uniformly sensitive to all wavelengths. Yellow at 50% lightness and 100% saturation appears much brighter and more vivid than blue at the same settings because human eyes contain far more green-sensitive cones, and yellow stimulates both red and green cones strongly. This is why perceptually uniform color spaces like CIELAB, OKLCH, and OKLAB were developed. These spaces adjust for human visual perception, ensuring that equal numeric changes produce equal perceived changes. When designing with HSL, be aware that pure blue needs higher saturation to appear equally vivid as pure yellow, and always evaluate colors visually rather than relying solely on numeric values.
What is the difference between luminance, lightness, and brightness?
These three terms describe related but distinct concepts in color science. Luminance is a physical measurement of light intensity in candelas per square meter, or when normalized, the relative luminance used in contrast calculations. Lightness is a perceptual attribute that describes how light or dark a surface appears relative to a reference white, used in CIELAB (L*) and HSL (L). Brightness in HSV/HSB represents the maximum channel value, with 100% brightness meaning at least one RGB channel is at maximum (255). A color can have 100% brightness in HSV but still appear dark if it is deeply saturated blue. Lightness in HSL is more intuitive: 0% is always black, 100% is always white, and 50% gives the purest version of each hue. Understanding these distinctions is essential for accurate color manipulation.
How do I convert between HSL and HSV color models?
Converting between HSL and HSV requires intermediate calculations since they represent saturation and brightness differently. Both share the same Hue value, so only saturation and lightness/value need conversion. To convert HSL to HSV: first calculate the HSV Value as V = L + S * min(L, 1-L), then HSV Saturation as Sv = V > 0 ? 2(1 - L/V) : 0. To convert HSV to HSL: calculate HSL Lightness as L = V(1 - Sv/2), then HSL Saturation as Sl = (L > 0 and L < 1) ? (V - L) / min(L, 1-L) : 0. Most design software handles these conversions internally, but understanding the math helps when writing custom color manipulation code or building design systems that need to work across different color model representations.
What role does color temperature play in luminance perception?
Color temperature affects luminance perception because warm and cool colors interact differently with human visual processing. Warm colors (reds, oranges, yellows) tend to appear more prominent and closer to the viewer, while cool colors (blues, greens, purples) tend to recede visually. This is partly due to chromatic aberration in the human eye, which focuses different wavelengths at slightly different distances on the retina. Under warm lighting conditions (low color temperature around 2700K), cool blue colors appear darker and less saturated, while warm colors appear more vivid. Under cool daylight (5500K-6500K), the effect reverses. Designers must consider the intended viewing environment when selecting colors, as a palette designed under office fluorescent lighting may look entirely different under warm residential lighting.
How does color space affect saturation and luminance values?
Different color spaces represent saturation and luminance using fundamentally different mathematical models, producing different numeric values for the same visual color. sRGB is the standard web color space but is not perceptually uniform, meaning equal steps in RGB values do not produce equal perceived color changes. Adobe RGB has a wider gamut encompassing more saturated greens and cyans. Display P3, used by Apple devices, covers about 25% more colors than sRGB. ProPhoto RGB is even wider, used in professional photography workflows. When converting between spaces, colors outside the target gamut must be clipped or compressed, potentially changing saturation and luminance relationships. Always specify your working color space and ensure consistency throughout the design and production pipeline.
References
Background & Theory
History
Reviewed for accuracy by Daniel Agrici, Founder & Lead Developer ยท Editorial policy
Related Calculators
๐งฎArchitectural Scale Converter
Calculate architectural scale converter with inputs, formulas, and instant results.
๐งฎCmyk to Pantone Converter
Calculate cmyk to pantone converter with inputs, formulas, and instant results.
๐งฎColor Space Converter
Calculate color space converter with inputs, formulas, and instant results.
๐งฎHue to Rgb Converter
Calculate hue to rgb converter with inputs, formulas, and instant results.
๐งฎPantone to RGB Converter (with Hex Code)
Calculate pantone to rgb converter with inputs, formulas, and instant results.
๐งฎGrading Scale Converter
Calculate grading scale converter with inputs, formulas, and instant results.
๐งฎLetter Grade to Percentage Converter (AโF Scale)
Calculate letter grade to percentage converter with inputs, formulas, and instant results.
๐งฎAudio Sample Rate Converter
Calculate audio sample rate converter with inputs, formulas, and instant results.