相信您已经熟悉颜色的 RGB 和 HEX 表示，因为这是大多数文章/教程在编写 CSS 颜色时使用的，但这些并不是在 CSS 中编写颜色的最佳方法。HEX 和 RGB 很难理解，使颜色变浅/变深或将颜色从红色转换为橙色并不容易。这就是 HSL 的用武之地。HSL 是一种更容易阅读的格式，它使更改颜色的亮度或色调等操作变得简单。

什么是 HSL？

HSL 代表色相、饱和度和亮度。这类似于 RGB 如何通过将其红色、绿色和蓝色值组合在一起来表示颜色，但使用 HSL，这些值更直观。

色调

颜色的色调由围绕一个圆圈的度数表示。试想一个色轮，0 度代表红色，180 度代表青色，360 度代表同样的红色。

饱和

饱和度由 0 到 100 之间的百分比表示，并确定颜色的灰色程度。如果颜色是 100% 饱和度，则根本没有灰色，而饱和度为 0% 的颜色将是没有颜色的灰色阴影。

亮度

亮度也用百分比表示，并确定颜色的白色或黑色。如果颜色是 50% 的亮度，那么这意味着没有额外的白色或黑色添加到颜色中。随着百分比增加到 50% 以上，它会在颜色中添加更多的白色，直到在 100% 亮度下达到完全白色。随着百分比降低到 50% 以下，它会为颜色添加更多黑色，直到在 0% 亮度下达到完全黑色

如何使用 HSL？

现在我们了解了 HSL 是什么，我们可以谈谈如何使用它。它的工作原理与 RGB 一样，您可以在 CSS 中调用该hsl函数来定义 HSL 颜色。

.class {
  /* Pure red #FF0000 */
  background-color: hsl(0, 100%, 50%);
}

传递给 hsl 的第一个值是色调，它是 0 到 360 之间的度数，第二个值是饱和度，它是 0% 到 100% 之间的百分比值，最后传递的最终值是亮度，它是一个百分比值在 0% 和 100% 之间。您还可以使用hsla来表示部分透明的颜色。这个函数接受第四个参数，它是一个介于 0 和 1 之间的值，其中 1 是完全不透明的，而 0 是完全透明的。

为什么这很重要？

像这样写颜色可能看起来有点奇怪，因为你很可能习惯于 HEX 或 RGB，但是一旦你习惯了它，它会让写 CSS 变得更加愉快。以下是几个原因：

轻松更改亮度/饱和度

正如我在本文开头提到的，您经常需要在 CSS 中更改颜色的亮度或饱和度，以执行诸如为按钮引入悬停状态之类的操作。使用 HEX 可能会很痛苦，因为没有人知道暗 10% 的版本#FA652F是什么，但是暗 10% 的版本hsl(16, 95%, 58%)很容易计算。您只需将亮度值降低 10% 即可hsl(16, 95%, 48%)。

您甚至可以更进一步，使用calcCSS 中的自定义属性为您自动执行此操作。

.btn {
  --background-hue: 200;
  background-color: hsl(
    var(--background-hue),
    100%,
    calc(50% + var(--lightness-offset))
  );
}
.btn:hover {
  --lightness-offset: -10%;
}
.btn:focus {
  --lightness-offset: -20%;
}
.btn-danger {
  --background-hue: 0;
}

使用这少量代码，我们设置了一个基本的 btn 类，它总是使背景在悬停时变暗 10%，在焦点上变暗 20%。我们也这样做了，以便我们可以更改其他类型按钮的按钮色调，我们甚至不需要修改这些新按钮类型的悬停和焦点状态，因为它们都是使用自定义属性和calc.

轻松获取相关颜色

如果您熟悉任何颜色理论，那么您就会知道理解互补色、原色/次色、相似色等很重要。使用 RGB 或 HEX 很难找出这些不同类型的颜色，但使用 HSL 很容易找到诸如互补色之类的东西。这是因为互补色只是色轮另一侧的颜色，在 HSL 的情况下，这意味着它们的色调彼此相差 180 度。

这很重要，因为您可以使用这些知识在 CSS 中创建一个颜色主题，该主题使用数学来计算这些互补色，并允许您一次轻松地更改整个站点的颜色主题。下面是我建立的一个可以做到这一点的网站的例子。

轻松更改色调

最后，HSL 的最后一个重大胜利是它可以轻松更改颜色的色调。如果你想让你的红色更橙色一点，你可以通过让你的色调更大一点来做到这一点，因为橙色在色轮上的红色之后。这真的很有用，因为在设计和开发的早期阶段，像这样的小颜色变化非常普遍，并且能够轻松地制作它们可以节省大量时间。

结论

HSL 是一种在 CSS 中表示颜色的不同方式，它不仅更易于阅读，而且更易于在 CSS 中修改和使用。在我看来，它是 CSS 中最好的颜色格式。

文由公众号 “把科学带回家” 提供

给孩子最好的科学教育

本文转载自公众号“环球科学ScientificAmerican”（ID：huanqiukexue）

撰文 怡若乐

编辑 丁家琦

小学美术课告诉我们三原色是红黄蓝，初中物理课又告诉我们光的三原色是红绿蓝，为什么偏偏都是三种？这两套三原色为什么又不一样？它们之间有关系吗？今天我们就来解答一下这个问题。

光学三原色：色光加色混合法

颜料三原色：颜料减色混合法

我们看到的“颜色”，到底是什么？

颜色就是不同波长的可见光投射到我们的视网膜里，被视网膜感知后在大脑里产生不同的反应。为了区分不同的色光，视网膜背后的感光细胞肯定不能只有一种，不然我们看到的世界就只有一种深浅不同的颜色了，就像黑白照片一样。

实际上，我们人眼用于区分色光的细胞（即视锥细胞）有三种，每种只对特定波长范围的光敏感：

第一种对长波长可见光敏感，叫做L（long）视锥细胞；

第二种对中波长可见光敏感，叫做M（medium）视锥细胞；

第三种对短波长可见光敏感，叫做S（short）视锥细胞。

三种视锥细胞对光谱中不同波长光的响应见下图，几乎能覆盖可见光领域。

这样，眼睛在接收任一波长的可见光时，都能不同程度地激活一种到两种，甚至三种视锥细胞，它们产生的信号叠加起来，形成了我们感受到的颜色。

但这样一来，聪明的读者可能就注意到了一个问题：波长为580nm的黄光会同时激发代表绿色的M视锥细胞和代表红色的L视锥细胞，那它看起来和绿光与红光两种单色光的某种叠加有何区别呢？

答案是，没区别——在人眼看来。这就是为什么在人眼看来绿光+红光=黄光，蓝光+绿光=浅蓝光，三原色与色光叠加原理都是我们人眼的这三种视锥细胞带来的。

早在上世纪初，亥姆霍兹等人在还不知道视锥细胞存在的情况下就提出了视觉的三原色学说，设想在视网膜中存在着分别对红、绿、蓝的光线特别敏感的三种细胞或相应的三种感光色素，当光线作用于视网膜时，可以不同程度地刺激相应的细胞或感光色素，在中枢引起介于此二原色之间的色觉。

这种假说得到实验证实之后，反过来又被科学家用来开发电子显示屏——我们从电视、电脑、手机屏幕上看到的彩色图像，就是红绿蓝三原色色光经不同程度叠加产生的，所以一旦你凑近了仔细看彩色电子屏幕，就能看到红绿蓝颜色的颗粒（在老式的电视机上更容易看到，如果对着苹果的Retina屏找，你可能就要瞎了……）。

显示器采用色光加色混合法三原色：红绿蓝

那为什么颜料的三原色与光不同呢？

这是因为颜料的叠加原理与色光的叠加原理不同。

颜料之所以呈现出特定的颜色，不是因为它本身发出了该颜色的光，而是它吸收了其他色光，而颜料的叠加，也就是吸收的叠加。

举个栗子：黄色颜料反射了红光和绿光（红光与绿光的叠加在我们眼里就是黄光），而我们日常所用的蓝色颜料反射蓝光和绿光。把它们配在一起的时候，黄色颜料吸收了蓝色颜料所反射的蓝光，而蓝色颜料吸收了黄色颜料反射的红光，所以就只剩下了绿色光。一旦再叠加其他多种颜料，把所有的色光吸收殆尽，在我们眼前的就是一团漆黑了。

那会不会有少数人有两种或者四种视锥细胞？其他动物呢？

大多数人类拥有三种视锥细胞，但并不是每个人都能感受到三原色下的世界，有些患者其中一种或两种视锥细胞会出现缺陷，这就会导致色觉缺陷，称为色盲。色盲（color blindness）最先由英国化学家约翰·道尔顿详细描述，因而也叫道尔顿症（daltonism）。

色盲主要分红绿色盲、蓝黄色盲和全色盲。红绿色盲是最常见的色盲，患者无法分辨红色和绿色（看起来接近灰色或就是灰色），蓝黄色盲则无法分辨蓝色和黄色，全色盲最为稀少，患者只能看到像黑白照片一样不同灰度的世界。

色盲眼中的世界是什么样？下面这张图可能会给我们一个直观的印象。

@Johannes Ahlmann/Wiki Commons

左上是正常色觉的人看到的的彩色风车，右上和右下是红绿色盲患者看到的景象（严格来说红色盲和绿色盲并不一样，但症状是类似的），左下是蓝黄色盲看到的景象。

可以看到，红绿色盲的眼里没有红色和绿色，他们看到的“红色”和“绿色”只是偏蓝或偏黄的灰色。

不过，“正常视力”与“色盲”之间并不存在一个一刀切的分界线，辨色能力是个连续谱。

很多色盲患者都不是缺失了一种或多种视锥细胞，而是两种视锥细胞的敏感范围过于接近，从而减小了对三种颜色辨别的范围。这种情况比三种单色色盲更常见，并且会使颜色视觉具有更多变化的结果。

此外，界定一个人是否色盲也应取决于他/她的环境和职业需求：视觉设计师和珠宝鉴定师需要对颜色有敏锐的鉴定能力，但对记者而言要求就没有那么高了。

那怎么知道你是不是色盲呢？最常见的测试方法莫过于石原氏色盲测验了。也许我们体检的时候都有测过这一项，医生给你拿出一张这样色彩斑斓的图片，色觉正常的人和色盲患者看到的图案会不同。如下图，色觉正常的人看到的数字是74，而色盲患者看到的就是21。

有超过三种颜色视觉是怎样的体验？

既然拥有三种视锥细胞的“正常人”能比色盲患者看到更多的颜色，那会不会存在拥有四种甚至以上色觉的人？澳大利亚艺术家孔切塔·安蒂科（Concetta Antico）就是这样一位“四色视者”。

@ConcettaAntico.com

经研究人员测定，她的第四种视锥细胞的敏感波段大约在红色与橙色之间，她看到的颜色据说能比普通人多百倍。她的艺术创作，正是为了将自己看到的斑斓的世界传达给我们普通的三色视者。

安蒂科笔下的树与（三色视觉者眼中）真实场景对比。

@Concetta Antico

那么其他动物呢？

对于大多数动物，丰富的色觉都非常有利于适应多变环境。现存的脊椎动物中，爬行动物、鸟类和真骨下纲的鱼类都具有四种视锥细胞，它们能看到波长更短的紫外线。

通过研究这些动物调控视蛋白合成的基因，我们得知这三群动物的共同祖先，也就是3.6亿年前的硬骨鱼类就具有了四色视觉。

这种金光菊能反射出紫外光，因此，鸟类能看到花心以外一个更大的黑色圆圈。图片由美国罗切斯特理工学院教授安德鲁·大卫德哈齐（Andrew Davidhazy）用检测紫外线的照相机拍摄。

@《环球科学》

也许用动物的眼光来看待这个世界，就可以理解它们行为的关键。一些动物可以看见更加五彩斑斓的世界，而另一些动物眼里的世界就相对平淡很多。

这些都是为了相互沟通，吸引异性和躲避捕食。研究那些我们所能看到的和看不到的颜色，不管对人类的自我认知和发展，还是对动物行为的了解以及规律的总结，都具有重要意义。

不过瘾，请戳

把科学带回家

ID：steamforkids

给孩子最好的科学教育

转载请联系 kids@huanqiukexue.com

长按二维码关注我们

参考链接：

en.wikipedia.org/wiki/Color

en.wikipedia.org/wiki/Cone_cell

en.wikipedia.org/wiki/Color_blindness

www.bbc.com/future/story/20140905-the-women-with-super-human-vision

www.bio1000.com/qw/tupian/417042.html

www.handprint.com/HP/WCL/color1.html#receptors

reamweaver的CSS面板分类

type(类型)

background(背景)

block(区块)

box(方框) 或盒子意思

border(边框)

list(列表)

positioning(定位)

extensions(扩展)

共八个部分

1. type(类型)

type面板主要是对文字的字体，大小，颜色，效果等基本样式进行设置。

注意：属性名带*号的是指样式效果不能在编辑文档时显示，要用浏览器打开才能看到效果。

(1)font-family：设置字体系列。什么叫字体系列呢?是指对文字设定几个字体，当遇到第一个字体不能显示的文字时会自动用系列中的第二个

字体或后面的字体显示。

注意:一般英文字体我们用"Verdana, Arial, Helvetica, sans-serif"这个系列比较好看。如果不用这些字体系列，你就需要自己编辑字体系列，

也可以直接手动在下拉框里写字体名，字体之间用逗号隔开。中文网页默认字体是宋体, 一般就空着不要选取任何字体。

默认值： not specified(取决于浏览器,系统默认的字体, 如: 微软雅黑)

注意：

1.如果有汉字, 那么我们要加引号

2.如果有多个英文字母组成的单词, 我们也要加引号; "microsoft yahei" 中间用空格隔开

3.font-family:"黑体","宋体","华文隶书"; 首先找黑体, 没有黑体找宋体...

为了避免在CSS中使用 font 或 font-family 设置中文字体时乱码, 可以使用 Unicode 编码来表示字体。

/* 示例:使用Unicode字体编码设置字体为"微软雅黑" */
font-family: "\5FAE\8F6F\96C5\9ED1";

(2)font-size：定义文字的大小。你可以通过选取数字和度量单位来选择具体的字体大小，或者你也可以选择一个相对的字体大小。

最好使用pixels作为单位，这样不会在浏览器中文本变形。一般字体用比较标准的12px或14px, 默认值为16px。

注意：CSS中长度的单位分绝对长度单位和相对长度单位:

绝对长度单位有：

pt：磅(point)

mm、cn、in、pc：(毫米、厘米、英寸、活字)根据显示的实际尺寸来确定长度。

此类单位不随显示器的分辨率改变而改变。

相对长度单位有：

px：(像素)根据显示器的分辨率来确定长度。

em：当前文本的尺寸。例如：{font-size:2em}是指文字大小为原来的2倍。

比如自身font-size: 30px; 那么此时1em=30px;

ex：当前字母"x"的高度，一般为字体尺寸的一半。

%：是以当前文本的百分比定义尺寸。例如：{ font-size:300%}是指文字大小为原来的3倍。

small、large：表示比当前小一个级别或大一个级别的尺寸。

默认值：medium(标准大小)

(3)font-style：定义字体样式为normal、italic、oblique。默认设置为normal。

注意： italic 斜体 oblique 歪斜体 italic和oblique实际效果是一样的。

默认值:normal

(4)line-height：设置文本所在行的行高。默认为normal。可以是行内元素、行内块元素, 通常与height设置的高度值相同, 可以做到垂直居中的作用。

你也可以自己键入一个精确的数值并选取一个计量单位。

比较直观的写法用百分比, 例如140%是指行高等于文字大小的1.4倍。

最常用的方法: line-height:1.5em; /*行间距,相对数值,1.5倍行距,*/ 可有效的避免文字发生重叠

默认值： normal

(5)text-decoration：在文本中添加underline(下划线)、overline(上划线)、line-through(中划线)、blink(闪烁效果)。

这些效果可以同时存在，将效果前的复选框选定即可。

注意：链接的默认设置是underline，我们可以通过选none去除下划线。blink(闪烁效果)只在mozilla浏览器里可以看到, IE、opera不支持

默认值： none

(6)font-weight：给字体指定粗体字的磅值。

normal 默认值。定义标准的字符。

bold 定义粗体字符。

bolder 定义更粗的字符。

lighter 定义更细的字符。

100

200

300

400

500

600

700

800

900

inherit 规定应该从父元素继承字体的粗细。

定义由粗到细的字符。400 等同于 normal, 而 700 等同于 bold。

默认值: normal

(7)font-variant：允许你选取字体的变种, 选small-caps(小型大写字母)时, 此样式区域内所有字母大写。

normal表示正常的字体, 为默认值；

默认值: normal

(8)text-transform：将选区中每个单词的第一个字母转为大写, 或者令单词全部大写或全部小写。

参数：capitalize(单词首字母大写)、uppercase(转换成大写)、lowercase(转换成小写)、none(不转换)。

默认值：none

(9)color：定义文字颜色。包括对表单输入的文字颜色。

CSS中颜色的值有三种表示方法：

#RRGGBB格式，是由红绿蓝三种颜色的值组合，每种颜色的值为"00 – FF"的两位十六进制正整数。

例如：#FF0000表示红色，#FFFF00表示黄色。

rgb(R,G,B)格式, RGB为三色的值, 取0~255, 例如：rgb(255,0,0)表示红色, rgb(255,255,0)表示黄色。

用颜色名称。CSS可以使用已经定义好的颜色名称。例如：red表示红色, yellow表示黄色。

颜色值的缩写:

p{color:#000000} 可以缩写为：p{color:#000}

p{color:#336699} 可以缩写为：p{color:#369}

默认值： not specified

color: transparent; 透明色

rgba() 解释: rgba(红0-255, 绿0-255, 蓝0-255, 透明度0-1)

注意: 如果文字的颜色通过单独的类选择去设置没有改变颜色, 则应该通过组合选择器(.header .top .topR .blue)去设置, 改变它的优先级。

2. background(背景)

background面板主要是对元素的背景进行设置，包括背景颜色、背景图象、背景图象的控制。

一般是对body(页面)、table(表格)、div(区域)的设置。

(1)background-color：设置元素的背景色。包括对input表单输入框的背景颜色;

默认值: transparent(背景颜色为透明)

rgba() 解释: rgba(红0-255, 绿0-255, 蓝0-255, 透明度0-1) 一般用于背景色

(2)background-image：设置元素的背景图像。

默认值:none

CSS3支持多重背景图,只要加上一个url指定图片路径,并用逗号(,)将两组url分隔就可以了

background-image:url(a.jpg),url(b.jpg);

base64使用

background-image: url("data:image/png;base64,iVBORw0KGgo=...");

(3)background-repeat：确定背景图像是否以及如何重复。

repeat 默认值。背景图像将在垂直方向和水平方向重复。

repeat-x 背景图像将在水平方向重复。

repeat-y 背景图像将在垂直方向重复。

no-repeat 背景图像将仅显示一次。

inherit 规定应该从父元素继承background-repeat属性的设置。

注意：如果定义的元素的body，可以控制页面背景是否重复。

默认值: repeat

(4)background-attachment：固定背景图像或者跟随内容滚动。

参数fixed表示固定背景(不随屏幕滚动而滚动，决定背景图像是否要固定在原来的位置), scroll表示跟随内容滚动的背景。

注意：如果定义的元素的body, 可以使页面背景固定。

默认值: scroll

(5)background-position(X)：指定背景图像的水平位置。

可以指定为left(左边), center(居中)，right(右边)；

也可以指定数值，如20px是指背景距离左边20象素。

background-position(Y)：指定背景图像的垂直位置。

可以指定为top(顶部), center(居中), bottom(底部)；也可以指定数值。

background-position属性值:

left top

center top

right top

left center

center center

right center

left bottom

center bottom

right bottom

如果您仅规定了一个关键词，那么第二个值将是"center"。

注意:采用英文单词的水平位置和垂直位置的属性值可以调换

x% y% 第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您仅规定了一个值，另一个值将是 50%。

xpos ypos 第一个值是水平位置，第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。

如果您仅规定了一个值，另一个值将是50%。

您可以混合使用 % 和 position 值。

默认值：0% 0%