När man gräver djupt in i färgteori finns det något som kallas relativ färgluminans. För att uttrycka det enkelt, definierar en färgs luminans om dess ljusstyrka. En luminans på 1 betyder att färgen är vit. Tvärtom betyder en luminanspoäng 0 att färgen är svart.
Att känna till en färgs luminans kan vara användbart när man handlar om dynamiska eller slumpmässiga färger för att ge en exakt bakgrundsfärg om färgen är för ljus eller för mörk. Som en tumregel kan du överväga att en färg vars ljusstyrka är över 0,7 kommer att vara svår att läsa på en vit bakgrund.
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); )Användande
$color: #BADA55; $luminance: luminance($color); // 0.6123778773