作为前端,你应该知道的颜色心算技巧

in javascript前端HTMLcss with 0 comment

作为前端,你应该知道的颜色心算技巧

在颜色赋值这块,我们前端工程师都是借助于拾色工具或者设计工具的一些拾色功能,然后将拾取的颜色值复制下来再粘贴到代码里面,那么,我们可不可不借助这些工具,直接在脑海里完成呢。答案是:

当然可以的!

首先我们来看下颜色的几种表示形式

RGB模式

RGB是基于色光混合的原理设计的,使用RGB三个分量来表示颜色,R(red)代表的是红色,G(green)代表的是绿色,B(blue)代表的是蓝色,它们的范围值都在[0, 255],当三色光的值都为255时,就显示白色,当三色光的值都为0时,就显示黑色

这里我们拿纯蓝色表示: rgb(0, 0, 255)

十六进制

十六进制模式就是将rgb里面的值用十六进制表示出来,如上面提到的蓝色rgb(0, 0, 255) ,如果用十六进制表示的话就是 0x0000ff

我们也可以用js来实现一个这样的功能

function convertHex(r, g, b) {
    return '0x' + (r.toString(16).length > 1 ? r.toString(16) : '0' + r.toString(16)) + (g.toString(16) .length > 1 ? g.toString(16) : '0' + g.toString(16)) + (b.toString(16).length > 1 ? b.toString(16) : '0' + b.toString(16))
}

convertHex(0, 0, 255) // 0x0000ff

RGBA模式

RGBA模式就是在RGB模式上多了一个A(alpha透明度)

HLS模式

HSL同样使用了3个分量来描述颜色,HSL色彩的表述方式是:H(hue)色相,S(saturation)饱和度,以及L(lightness)亮度。

H(hue)分量表示色相,这些颜色分布在一个平面的色相环上,取值范围是0°到360°的圆心角,每个角度可以代表一种颜色。色相值的意义在于,我们可以在不改变光感的情况下,通过旋转色相环来改变颜色。在实际应用中,我们需要记住色相环上的六大主色,用作基本参照:360°/0°红、60°黄、120°绿、180°青、240°蓝、300°洋红,它们在色相环上按照60°圆心角的间隔排列

hsl模型H

HSL的S(saturation)分量,指的是色彩的饱和度,它用0%至100%的值描述了相同色相、明度下色彩纯度的变化。数值越大,颜色中的灰色越少,颜色越鲜艳,呈现一种从理性(灰度)到感性(纯色)的变化,如下图:

hsl模型S

HSL的L(lightness)分量,指的是色彩的明度,作用是控制色彩的明暗变化。它同样使用了0%至100%的取值范围。数值越小,色彩越暗,越接近于黑色;数值越大,色彩越亮,越接近于白色。

hsl模型L

记住下面这几个值

360°/0°红、60°黄、120°绿、180°青、240°蓝、300°洋红

HSB模式

HSB色彩模式即色度、饱和度、亮度模式。它采用颜色的三属性来表色,即将颜色三属性进行量化,饱和度和亮度以百分比值(0%-100%)表示,色度以角度(0°-360°)表示 [1] 。 HSB色彩模式以人类对颜色的感觉为基础,描述了颜色的三种基本特性。

颜色模型

Responses