色彩玄学
作为一个前端开发者,对美还是得有些了解,先不说各种设计风格,色彩搭配之类还是稍微知道点,这样自己做出来的网站也不至于太丑。
颜色一般有三种表现方式:十六位进制六位编码(#abcdef), rgb色值(rgb(255, 0, 0)), 以及hsl色标(hsl(120, 100%, 50%))。
rgb
先说最简单的,rgb即是色光的三原色(red,green,blue),由0到255这256个数值表示强弱,0代表最小,255代表最大,所以0,0,0表示黑色。
ps: 色彩的三原色是red,yellow,blue,色光的三原色叠加可以得到白色,而色彩三原色得到黑色
十六位进制六位编码
这个起始就是上面rgb的变种,为啥用255代表颜色最大值呢?因为16进制两位数表示的最大值就是255(16×16-1),所以
# (R)00 (G)00 (B)00
因此,知道rgb值,可以通过toString(16)来转换为16进制的值如:
const rgb = [255,127,1];
const hex = 'ff7f01';
//转换rgb到hex
function rgbToHex (rgb) {
let col = '';
//应当验证输入的合法性。
rgb.forEach((e)=>{
col += e.toString(16).padStart(2,'0')
})
return col;
}
//转换hex到rgb
function hexToRgb (hex) {
const arr = [];
//应当验证输入的合法性
const l = [...hex];
for(let i = 0; i < 3; i ++){
arr.push(l[2*i]+l[2*i+1])
}
return arr.map((e) => parseInt(e,16))
}
hsl
说实在的,rgb方式不是很直观,可能许多人不知道红色和绿色叠加使黄色,因此出现了hsl色标。
h(色相)
色相的0度为R(红)色,120度为G(绿)色,240度为B(蓝)色
s (饱和度)
饱和度越高越鲜艳,越低就越偏向灰色,正常值是100% 。
l (亮度)
亮度越高越偏向白色,越低越偏向黑色,正常值是50% 。
这个从某种意义上来说是更加符合人的直观感受的,也是可以使用在网页中的。