Saturation Luminance Converter
Use our free Saturation luminance Calculator to learn and practice. Get step-by-step solutions with explanations and examples.
Reviewed by Daniel Agrici, Founder & Lead Developer
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:\nC = (1 - |2(0.5) - 1|) * 0.8 = 0.8\nX = 0.8 * (1 - |(210/60) % 2 - 1|) = 0.8 * 0.5 = 0.4\nRGB = (25, 118, 230) = #1976E6\nRelative luminance: L = 0.2126(0.033) + 0.7152(0.173) + 0.0722(0.779) = 0.187\nContrast 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)\nDesaturated: Reduce saturation to 15% while keeping H and L\nDisabled: HSL(150, 15%, 45%) = RGB(97, 132, 115)\nLuminance original: 0.353\nLuminance disabled: 0.226\nThe 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.
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.
References
Reviewed by Daniel Agrici, Founder & Lead Developer · Editorial policy