1. 首页
  2. css

CSS颜色亮度函数

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

CSS颜色亮度函数 为WP2原创文章,链接:https://www.wp2.cn/css/css%e9%a2%9c%e8%89%b2%e4%ba%ae%e5%ba%a6%e5%87%bd%e6%95%b0/

发表评论

您的电子邮箱地址不会被公开。