Поглиблюючи теорію кольорів, існує щось, що називається відносною яскравістю кольору. Простіше кажучи, яскравість кольору визначає, чи буде його яскравість. Яскравість 1 означає, що колір білий. Навпаки, оцінка яскравості 0 означає, що колір чорний.
Знання яскравості кольору може бути корисним при роботі з динамічними або випадковими кольорами, щоб забезпечити точний колір фону, якщо колір занадто яскравий або занадто темний. Як правило, ви можете вважати, що колір, яскравість якого перевищує 0,7, буде важко прочитати на білому тлі.
Код
/// 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); )Використання
$color: #BADA55; $luminance: luminance($color); // 0.6123778773