CSS 样式，如何计算临近颜色值？

在有些场景下，有可能需要阶梯状的颜色展示，通过背景色对数据分组。或者就是自动生成某个颜色的临近值。如果颜色是固定的，直接计算好固定就行，如果是动态或者用户设置的颜色值，就需要一定的算法来计算临近的颜色。

我在看 MDN 时，发现了 RGB 和 HSL，发现 HSL 的值通过修改色调（hue）、饱和度（saturation）和明度（lightness）可以让颜色更有规律的进行渐变。

参考地址：
https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Introduction_to_CSS/Values_and_units#RGB

HSL 简单介绍：

色调：颜色的底色调。这个值在0到360之间，表示色轮的角度。
饱和度：饱和度是多少？这需要一个从0-100%的值，其中0是没有颜色（它将显示为灰色），100%是全彩色饱和度。
明度：颜色有多亮或明亮？这需要一个从0-100%的值，其中0是无光（它会出现全黑的），100%是充满光的（它会出现全白）。

图片出处：https://en.wikipedia.org/wiki/File:HSL_color_solid_cylinder_saturation_gray.png

通过 HSL 的值的逐渐变化，可以得到非常相近的颜色。

既然通过 HSL 很容易计算，就搜搜如何在 RGB 和 HSL 之间进行转换。很容易就搜到了下面的网站：

http://www.easyrgb.com/en/math.php

这个网站提供了多种颜色类型间的转换算法，这个算法基本上可以直接拿来当 JS 代码用，内部有些细节需要特殊处理。

针对颜色计算做了一个简单的封装，并且写了一些简单的方法来进行测试，下面是完整的代码，保存到 html 文件直接在浏览器打开即可。

直接访问：https://abel533.github.io/color_rgb_hsl/

完整代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script>var ColorUtil = (function () {function rgb2hsl({ R, G, B }) {var H, S, L;var var_R = (R / 255);var var_G = (G / 255);var var_B = (B / 255);var var_Min = Math.min(var_R, var_G, var_B)    //Min. value of RGBvar var_Max = Math.max(var_R, var_G, var_B)    //Max. value of RGBvar del_Max = var_Max - var_Min             //Delta RGB valuevar L = (var_Max + var_Min) / 2if (del_Max == 0)                     //This is a gray, no chroma...{H = 0S = 0}else                                    //Chromatic data...{if (L < 0.5) S = del_Max / (var_Max + var_Min)else S = del_Max / (2 - var_Max - var_Min)var del_R = (((var_Max - var_R) / 6) + (del_Max / 2)) / del_Maxvar del_G = (((var_Max - var_G) / 6) + (del_Max / 2)) / del_Maxvar del_B = (((var_Max - var_B) / 6) + (del_Max / 2)) / del_Maxif (var_R == var_Max) H = del_B - del_Gelse if (var_G == var_Max) H = (1 / 3) + del_R - del_Belse if (var_B == var_Max) H = (2 / 3) + del_G - del_Rif (H < 0) H += 1if (H > 1) H -= 1}return { H, S, L };}function Hue_2_RGB(v1, v2, vH) {if (vH < 0) vH += 1;if (vH > 1) vH -= 1;if ((6 * vH) < 1) return (v1 + (v2 - v1) * 6 * vH);if ((2 * vH) < 1) return (v2);if ((3 * vH) < 2) return (v1 + (v2 - v1) * ((2 / 3) - vH) * 6);return v1;}function hsl2rgb({ H, S, L }) {var R, G, B;if (S == 0) {R = L * 255;G = L * 255;B = L * 255;}else {var var_2, var_1;if (L < 0.5) var_2 = L * (1 + S);else var_2 = (L + S) - (S * L);var_1 = 2 * L - var_2;R = Math.round(255 * Hue_2_RGB(var_1, var_2, H + (1 / 3)));G = Math.round(255 * Hue_2_RGB(var_1, var_2, H));B = Math.round(255 * Hue_2_RGB(var_1, var_2, H - (1 / 3)));}return { R, G, B };}function hex2rgb(hex) {if (hex.indexOf('#') != -1) {hex = hex.substr(1, 6);}var R = parseInt(hex.substr(0, 2), 16);var G = parseInt(hex.substr(2, 2), 16);var B = parseInt(hex.substr(4, 2), 16);return { R, G, B };}function rgb2hex({ R, G, B }) {return '#' + dec2hex(R) + dec2hex(G) + dec2hex(B);}function dec2hex(dec) {return (dec + 0x100).toString(16).substr(1, 2).toUpperCase();}return {rgb2hsl,hsl2rgb,hex2rgb,rgb2hex}})();</script>
</head><body><div class="main"><div class="form"><label for="hex">请输入 Hex 值: </label><input type="text" id="hex"><button onclick="genColor()">生成</button></div><div class="title">改变色调H</div><div class="container H"></div><div class="title">改变饱和度S</div><div class="container S"></div><div class="title">改变明度L</div><div class="container L"></div></div><script>function genColor(){document.querySelector('.H').innerHTML = genColorHtml('H', 0, 360);document.querySelector('.S').innerHTML = genColorHtml('S', 0, 100);document.querySelector('.L').innerHTML= genColorHtml('L', 0, 100);}function genColorHtml(type, min, max){var hex = document.getElementById('hex').value;var hsl = ColorUtil.rgb2hsl(ColorUtil.hex2rgb(hex));var hexArray = [];for (let i = min; i < max; i++) {hsl[type] = i/max;hexArray.push(ColorUtil.rgb2hex(ColorUtil.hsl2rgb(hsl)));}if (hex[0] != '#') {hex = '#' + hex;}hex = hex.toUpperCase();var html = '';for (let i = 0; i < hexArray.length; i++) {html += '<div class="item ' + (hexArray[i] == hex ? 'current' : '') + '" style="background-color:' + hexArray[i] + '"></div>';}return html;}</script><style>.main {display: flex;flex-flow: column wrap;justify-content: space-between;}.container {display: flex;}.item {height: 50px;width: 50px;}.current {margin: 0 1px;}</style>
</body></html>

在该页面可以输入不同的颜色预览效果，并且展示了分别修改 H,S,L 三种值的不同效果，例如输入 ff00ff，结果如下：

上面的所有变化值都是1，所以颜色特别的接近，在实际使用中，为了更好的区分，可以增加变化值，例如 5 时的效果：

上述图片中，有白色边框的颜色是输入的 hex 值对应的颜色。

通过上面的算法根据自己的实际情况进行修改，就可以得到符合要求的临近色了。

CSS 样式，如何计算临近颜色值？相关推荐

jQuery获取CSS样式中的颜色值的问题，不同浏览器格式不同怎么办
使用jQuery获取样式中的background-color的值时发现在获取到的颜色值在IE10以下版本中是以HEX格式显示[#ffff00],而IE10,.Chrome.Firefox中则是以GRB ...
css样式继承规则详解
css样式继承规则详解一.总结一句话总结:继承而发生样式冲突时,最近祖先获胜(最近原则). 1.继承中哪些样式不会被继承? 多数边框类属性,比如象Padding(补白),Margin(边界),背景 ...
html 网页主题设置吗,如何使用css样式对html页面进行背景设置呢？
摘要: 下文讲述css样式对html页面的背景色.背景图片进行相关设置的方法分享,如下所示: 在html中,定义元素的背景信息,可以采用以下css属性,如下所示: css属性功能 background ...
FLEX里的CSS样式设置教材
FLEX3中应用 CSS完全详解手册! 编辑完这个FLEX下的CSS说明后,我基本已经兵临崩溃边缘了.在些天在AIRIA下了不少好东西,今天终于有空,也发一个比较不错的东西给大家,相信都比较需要这个 ...
CSS样式引入方式和部分CSS样式的设置
一.三种引入方式以及其应用场景 1.行间样式,当样式非常少.在一组选择器内需要优先样式,缺点是不是人看的代码样式,影响布局结构的视觉效果 a.写在起始标签的style属性里,各样式之间用": ...
CSS样式（一）- 基本语法
css样式 - 基本语法 css样式语法 - 基本语法格式 css又叫层叠样式表 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明选择器: 通常是您需要改变样式的HTML元素例如: ...
web前端（HTML的CSS样式和JavaScript）
HTML的CSS样式和JavaScript CSS CSS介绍概念和作用示例代码 CSS的规则和3种位置 CSS规则 CSS的位置行内样式内部样式外部样式三种样式的代码 CSS基本选择器( ...
前端基础 CSS 第十一章使用CSS样式表 ----暑假学习第七、八天
第十一章使用CSS样式表通过CSS样式定义,可以将网页制作得更加绚丽多彩.采用CSS技术,可以有效地对页面的布局.字体.颜色.背景和其他效果实现更加精确地控制.用CSS不仅可以做出令浏览者赏心悦目 ...
前端基础 CSS 第十一章使用CSS样式表特效属性部分 ----暑假学习第九天
第十一章使用CSS样式表 11.8 定位属性使用定位属性可以控制元素的位置,包括相对定位和绝对定位两种方式.相对定位指允许元素在相对于文档布局的原始位置上进行偏移,而绝对定位是指允许元素与原始文档 ...

CSS 样式，如何计算临近颜色值？

CSS 样式，如何计算临近颜色值？相关推荐

最新文章

热门文章