颜色的基础知识_色彩入门

颜色的表示

使用十六进制编码获得指定颜色

计算机中，可以使用 6位十六进制数来代表颜色，每两位数字控制一种基色，分别是红（R）、绿（G）、蓝（B）。

橘色是纯红色混合一些绿色而成，其中没有蓝色。在十六进制编码里面，它可以写成#FFA500。

例如，#000000 代表黑色，同时也是最小的值。
0 是十六进制里面最小的数字，表示没有颜色。F 是十六进制里面最大的数字，有最高的亮度。

body { 
    color: #000000; }

颜色	十六进制编码
黑色	000000
红色	FF0000
绿色	00FF00
蓝色	0000FF
道奇蓝	1E90FF
橙色	FFA500

通过三原色（红、绿、蓝），我们可以创建 1600 万种不同颜色。

使用缩写的十六进制编码。

#AABBCC可以简写为#ABC，红色的 #FF0000 十六进制编码可以缩写成 #F00。在这种缩写形式里，三个数字分别代表着红（R）、绿（G）、蓝（B）三原色。这样，颜色的数量减少到了大约 4000 种。

颜色	十六进制编码缩写形式
红色	F00
绿色	0F0
蓝色	00F
紫红色	F0F

使用RGB值

RGB 值用 3个十进制数（数值范围从 0 到 255） 来描述一种颜色。

body { 
    background-color: rgb(0, 0, 0); }

颜色	RGB值
黑色	(0, 0, 0)
白色	(255, 255, 255)
蓝色	(0, 0, 255)
红色	(255, 0, 0)

使用RGBA值

RGBA值即在RGB值的基础上再加一维：透明度（Alpha），取值为0~1。其中 0 代表完全透明，1 代表完全不透明。

例如：

h4 { 
    text-align: center; background-color: rgba(45, 45, 45, 0.1); }/*表示背景是黑灰色，因为设置了透明度为 0.1，所以几乎是透明的。*/

网页标签的颜色可以通过浏览器开发者工具来进行查看。

色彩设计

在网站设计里，颜色能让内容更醒目，能调动情绪，从而创造舒适的视觉体验。不同的颜色组合对网站的视觉效果影响很大，精妙的设计都需要适宜的颜色来美化页面内容。

补色搭配

色环是我们认识颜色关系的好工具。它是一个近色相邻、异色相离的圆环。当两个颜色恰好在色环的两端时，这两个颜色就互为补色。两个互为补色的颜色会在混合后变成灰色。然而，补色搭配能形成强烈的视觉对比效果。

下面是一些以 hex 形式表示的补色例子：
红色（#FF0000）和蓝绿色 (#00FFFF)
绿色（#00FF00）和品红色（#FF00FF）
蓝色（#0000FF）和黄色（#FFFF00）

这与我们许多人在学校学的过时的 RYB 色彩模式不同，RYB 有不同的原色和补色。现代色彩理论使用 RGB 模型（如在计算机屏幕上）和CMY（K）模型（如在印刷中）。

电脑显示器和各类屏幕都是基于颜色叠加的模型：将红（R）、绿（G）、蓝（B）三原色的色光以不同的比例相加，就可以产生各种色彩光。这在现代色彩理论中叫作三原色光模式（RGB Color Model）。红色（R）、绿色（G）和蓝色（B）叫作三原色。

如果把两种原色相加，就可以产生二次色：蓝绿（G+B）、品红（R+B）和黄色（R+G）。这些二次色恰好是在合成它们时未使用的原色的补色，即在色环中位于两端。例如，品红色是红色和蓝色相加产生，它是绿色的补色。
三次色是由原色和二次色相加产生的颜色，例如，在 RGB 颜色模型中，红色（原色）和黄色（二次色）相加产生橙色（三次色）。将这六种颜色中相邻的颜色相加，便产生了十二色色环。

设计里面有很多种颜色搭配方法。涉及到三次色的一种配色方法是分裂补色搭配法。 选定主色之后，在色环上选择与它的补色相邻的两种颜色与之搭配。此种搭配既有对比，又不失和谐。

下面是使用分裂补色搭配法创建的三个颜色：

颜色	HEX颜色码
橙色	#FF7F00
蓝绿色	#00FFFF
树莓红	#FF007F

补色搭配能形成强列的对比效果，让内容更富生机。但是如果使用不当效果会适得其反：比如将文字背景色和文字颜色设置为互补色，这样文字会很难看清。
通常的做法是，一种颜色做为主要颜色，然后使用其补色用来装点那些需要用户特别注意的部分。

注意颜色特性

颜色具有多种特性，包括色相、饱和度和亮度。 CSS3 引入了 hsl() 做为颜色的描述方式。（其中‘h’代表色相‘，s’ 代表饱和度，‘l’代表亮度）。

色相

色相是色彩的基本属性，就是平常所说的颜色名称，如红色、黄色等。以颜色光谱为例，光谱左边从红色开始，移动到中间的绿色，一直到右边的蓝色，色相值就是沿着这条线的取值。在 hsl() 里面，色相用色环来代替光谱，色相值就是色环里面的颜色对应的从 0 到 360 度的角度值。

饱和度

饱和度是指色彩的纯度，也就是颜色里灰色的占比。饱和度越高则灰色占比越少，色彩也就越纯；反之则完全是灰色。饱和度的取值范围是表示灰色所占百分比的 0 至 100。

亮度

亮度决定颜色的明暗程度，也就是颜色里白色或者黑色的占比。其中，100% 的亮度表示纯白色， 0% 的亮度则表示纯黑色；而 50% 的亮度就表示在色相中选取的颜色。

下面是一些使用 hsl() 描述颜色的例子，颜色都为满饱和度，中等亮度:

颜色	HSL
红	hsl(0, 100%, 50%)
黄	hsl(60, 100%, 50%)
绿	hsl(120, 100%, 50%)
蓝绿	hsl(180, 100%, 50%)
蓝	hsl(240, 100%, 50%)
品红	hsl(300, 100%, 50%)

.green { 
    background-color: hsl(120, 100%, 50%); }

hsl() 使 CSS 更改颜色色调更加方便。比如，给一个纯色添加白色可以调出更浅的色调；添加黑色可以创造更深的色调。另外，还可以通过给纯色添加灰色来同时改变颜色的深浅和明暗。这在你想获取一个基准色的变种的情景下会十分有用。

所有素的默认 background-color 都是 transparent。

颜色渐变

HTML 素的背景色并不局限于单色。 CSS 还为我们提供了颜色渐变。可通过 background 里的 linear-gradient() 实现线性渐变，以下是它的语法：
background: linear-gradient(gradient_direction, color 1, color 2, color 3, ...);
第一个参数指定了颜色过渡的方向——它的值是角度，90deg 表示垂直渐变（从左到右），45deg 表示沿对角线渐变（从左下方到右上方）。其他参数指定了渐变颜色的顺序：

background: linear-gradient(35deg, #CCFFFF, #FFCCCC, rgb(204, 204, 255));

repeating-linear-gradient() 函数和 linear-gradient() 很像，主要区别是repeating-linear-gradient()会重复指定的渐变。
repeating-linear-gradient() 有很多参数，例如角度值和色标等。角度就是渐变的方向。色标代表渐变颜色及发生渐变的位置，由百分比或者像素值表示。例如：

<style> div{ 
    border-radius: 20px; width: 70%; height: 400px; margin: 50 auto; background: repeating-linear-gradient( 90deg, yellow 0px, blue 40px, green 40px, red 80px ); } </style>

渐变开始于 0 像素位置的 yellow，然后过渡到距离开始位置 40 像素的 blue。由于下一个渐变颜色的起始位置也是 40 像素，所以颜色直接渐变成第三个颜色值 green，然后过渡到距离开始位置 80 像素的 red。
即：0px [yellow -- blend -- blue] 40px [green -- blend -- red] 80px
如果每对起止渐变颜色值的颜色都是相同的，由于是在两个相同的颜色间过渡，那么中间的过渡色也为同色，接着就是同色的过渡色和下一个起止颜色，最终产生的效果就是条纹。