Функция цветовой яркости онлайн урок.


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