Když se ponoříme hluboko do teorie barev, existuje něco, co se nazývá relativní jas světla. Jednoduše řečeno, jas barvy určuje, zda je její jas. Svítivost 1 znamená, že barva je bílá. Naproti tomu skóre jasu 0 znamená, že barva je černá.
Znalost jasu barvy může být užitečná při práci s dynamickými nebo náhodnými barvami, aby byla zajištěna přesná barva pozadí, pokud je barva příliš jasná nebo příliš tmavá. Pravidlem je, že barva, jejíž jas je vyšší než 0,7, bude na bílém pozadí obtížně čitelná.
Kód
/// 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); )
Používání
$color: #BADA55; $luminance: luminance($color); // 0.6123778773