Wanneer je diep in de kleurentheorie graaft, is er iets dat relatieve kleurluminantie wordt genoemd. Simpel gezegd, de luminantie van een kleur bepaalt of zijn helderheid. Een luminantie van 1 betekent dat de kleur wit is. Aan de andere kant betekent een luminantiescore van 0 dat de kleur zwart is.
Het kennen van de luminantie van een kleur kan handig zijn bij dynamische of willekeurige kleuren, om een nauwkeurige achtergrondkleur te verkrijgen als de kleur te helder of te donker is. Als vuistregel kun je aannemen dat een kleur met een luminantie van meer dan 0,7 moeilijk leesbaar zal zijn op een witte achtergrond.
Code
/// Returns the luminance of `$color` as a float (between 0 and 1) /// 1 is pure white, 0 is pure black /// @param (Color) $color - Color /// @return (Number) /// @link http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef Reference @function luminance($color) ( $colors: ( 'red': red($color), 'green': green($color), 'blue': blue($color) ); @each $name, $value in $colors ( $adjusted: 0; $value: $value / 255; @if $value < 0.03928 ( $value: $value / 12.92; ) @else ( $value: ($value + .055) / 1.055; $value: pow($value, 2.4); ) $colors: map-merge($colors, ($name: $value)); ) @return (map-get($colors, 'red') * .2126) + (map-get($colors, 'green') * .7152) + (map-get($colors, 'blue') * .0722); )Gebruik
$color: #BADA55; $luminance: luminance($color); // 0.6123778773