Når man graver dybt ned i farveteori, er der noget, der kaldes relativ farve luminans. For at sige det enkelt definerer en farves luminans, om dens lysstyrke. En luminans på 1 betyder, at farven er hvid. Tværtimod betyder en luminans score på 0, at farven er sort.
At kende en farves luminans kan være nyttigt, når man beskæftiger sig med dynamiske eller tilfældige farver for at give en nøjagtig baggrundsfarve, hvis farven er for lys eller for mørk. Som en tommelfingerregel kan du overveje, at en farve, hvis luminans er over 0,7, bliver svær at læse på en hvid baggrund.
Kode
/// 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); )Anvendelse
$color: #BADA55; $luminance: luminance($color); // 0.6123778773