色彩亮度功能

当深入研究色彩理论时，有一种叫做相对色彩亮度的东西。 简单来说，颜色的亮度定义了它的亮度。 亮度为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

翻译自: https://css-tricks.com/snippets/sass/luminance-color-function/