背景知识:颜色模型
点开这篇文章的你,肯定是想要学习怎样控制颜色的——我们后面就会讲具体操作,但首先,我们需要对CSS如何标记颜色有一个基本的认识。CSS使用的是两种颜色模型:RGB和高速逻辑,我们先简单了解一下。
RGB
RGB就是“红色,绿色,蓝色”的简称。这个模型由三个数字组成,每个数字表示其所代表的颜色在最终生成的颜色中有多高的亮度。在CSS中,每个数值的范围都是0 - 255,三个数值间用逗号分隔,作为CSS RGB函数的参数,例如:RGB (50100 0)。
RGB是一种“增量”颜色系统。这意味着每个数字越高,最终生成的颜色就越亮。如果所有值都相等就生成灰度颜色,如果所有值都为零,结果为黑色,如果所有值都是255,则结果为白色。
此外你也可以使用十六进制表示法来标记RGB颜色,其中每种颜色的数值从10进制转换为16进制,例如,RGB(50100 0)用16进制就写成# 326400。
虽然我个人比较习惯使用RGB模型(特别是十六进制),但我也经常发现它不易阅读,也不容易操作。下面来看奥软模型。
一个人学习会有迷茫,动力不足。这里推荐一下我的前端学习交流群:731771211,里面都是学习前端的,如果你想制作酷炫的网页,想学习编程。自己整理了一份2019年最全面前端学习资料,从最基础的HTML + CSS + JS【炫酷特效,游戏,插件封装,设计模式】到移动端HTML5的项目实战的学习资料都有整理,送给每一位前端小伙伴,有想学习网前端的,或是转行,或是大学生,还有工作中想提升自己能力的,正在学习的小伙伴欢迎加入学习。
奥软
高速逻辑是“色调,饱和度,光线”的简称,高速逻辑也包含三个值。色调值对应于色轮上的点,由CSS角度值表示,最常用的是度数单位。
饱和度以百分比表示,是指颜色的强度。当饱和度为100%时颜色最深,饱和度越低,颜色越浅,直到灰度为0%。
亮度也以百分比表示,指的是颜色有多亮。“常规”的亮度是50%,无论色调和饱和度值如何,100%的亮度都是纯白色,0%的亮度就是纯黑色。
我觉得奥软模型更直观一些,颜色。之间的关系更加明显,控制颜色时只要简单地调整几个数字就可以了。
颜色模型之间的转换
RGB和高速逻辑颜色模型都将颜色分解为各种属性。要在不同模型之间进行转换,我们首先需要计算这些属性。
除了色调,上面提到的所有数值都可以表示为百分比。就连RGB值也是用字节表示的百分比。在下面提到的公式和函数中,这些百分比将由0到1之间的小数来表示。
这里提一下,我并不会深入探讨这些数学知识;相比之下,我将简要介绍一遍原始数学公式,然后将其转换为JavaScript格式。
从RGB模型中计算亮度
亮度是三个高速逻辑值中最容易计算的一个。其数学式如下,其中M是RGB值的最大值,M是最小值:
用JavaScript函数写成下面的形式:
<前> const rgbToLightness =(r, g, b)=祝辞,,,,,1/2 * (Math.max (r, g, b) +, Math.min (r, g, b)); 之前从RGB模型中计算饱和度
饱和度仅比亮度稍微复杂一些。如果亮度为0或1,则饱和度值为0;否则,它基于下面的数学公式计算得出,其中L表示亮度:
写成JavaScript:
<前> const rgbToSaturation =, (r, g, b),=祝辞,{ const 才能;L =, rgbToLightness (r, g, b); const 才能;max =, Math.max (r, g, b); const 才能;min =, Math.min (r, g, b); return 才能;(L ===, 0, | |, L ===, 1) ,,,? 0 ,,:,(max 安康;最小值)/(1,安康;Math.abs (2, *, L 作用;1)); }； 之前
