Ko globoko kopljemo v barvno teorijo, obstaja nekaj, kar imenujemo relativna barvna svetilnost. Preprosto povedano, svetilnost barve določa, ali je njena svetlost. Svetilnost 1 pomeni, da je barva bela. Nasprotno pa ocena svetilnosti 0 pomeni, da je barva črna.
Poznavanje svetilnosti barve je lahko koristno pri obravnavanju dinamičnih ali naključnih barv, da zagotovimo natančno barvo ozadja, če je barva presvetla ali pretemna. Kot pravilo lahko štejete, da bo barvo, katere svetilnost je večja od 0,7, na belem ozadju težko brati.
Koda
/// 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); )Uporaba
$color: #BADA55; $luminance: luminance($color); // 0.6123778773