调整颜色色泽

理解

颜色有很多特征，包括色泽（hue），saturation(饱和度)，lightness(亮度)。

CSS使用hs1()属性来设定这些特征。

Hue是人们普遍认为的‘color’。如果你的图片是从左边开始的红色，移到中间的绿色，最后是右边的蓝色。hue就是沿着这条线的颜色。在hsl()里，hue作为一个色轮概念代替了光谱，值是0到360。

Saturation是颜色的灰度。饱和的颜色没有灰度，最小饱和色几乎接近灰色。值是从0%到100%。

lightness是亮度，指的是颜色中黑与白。百分比从1%（黑色）到100%（白色），50%是正常色。

下面是应用举例。

Color      HSL

red        hsl(0,100%,50%)

yellow     hsl(60,100%,50%)

green      hsl(120,100%,50%)

cyan       hsl(180,100%,50%)

blue       hsl(240,100%,50%)

magenta    hsl(300,100%,50%)

练习

改变div里每个class(green,cyan,blue)的backgound-color使用hsl()。

这三个class不是满饱和度和自然亮色。

来源

Applied Visual Design: Adjust the Hue of a Color | Learn freeCodeCamp

CHANGELOG

2018-10-29 16:24:28