Если углубиться в теорию цвета, есть нечто, называемое относительной яркостью цвета. Проще говоря, яркость цвета определяет, соответствует ли его яркость. Яркость 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