Kun kaivetaan syvälle väriteoriaan, on jotain, jota kutsutaan suhteelliseksi väriluminanssiksi. Yksinkertaisesti sanottuna värin kirkkaus määrittää, onko sen kirkkaus. Luminanssi 1 tarkoittaa, että väri on valkoinen. Päinvastoin, kirkkausaste 0 tarkoittaa, että väri on musta.
Värin kirkkauden tuntemisesta voi olla hyötyä käsiteltäessä dynaamisia tai satunnaisia värejä, jotta saadaan tarkka taustaväri, jos väri on liian kirkas tai liian tumma. Nyrkkisääntönä voit ajatella, että väriä, jonka kirkkaus on yli 0,7, on vaikea lukea valkoisella taustalla.
Koodi
/// 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); )Käyttö
$color: #BADA55; $luminance: luminance($color); // 0.6123778773