Saturation Luminance Converter
Use our free Saturation luminance Calculator to learn and practice. Get step-by-step solutions with explanations and examples.
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.
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.
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.