颜色的基础知识

大家好，欢迎来到IT知识分享网。

颜色的表示

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

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

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

body { 
    color: #000000; } 

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

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

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

使用RGB值

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

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

使用RGBA值

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

例如：

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

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

色彩设计

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

补色搭配

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

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

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

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

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

注意颜色特性

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

• 色相

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

• 饱和度

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

• 亮度

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

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

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

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

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

颜色渐变

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

<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>