颜色的表示
使用十六进制编码获得指定颜色
计算机中，可以使用 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
如果每对起止渐变颜色值的颜色都是相同的，由于是在两个相同的颜色间过渡，那么中间的过渡色也为同色，接着就是同色的过渡色和下一个起止颜色，最终产生的效果就是条纹。
2024最新激活全家桶教程，稳定运行到2099年，请移步至置顶文章：https://sigusoft.com/99576.html
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。 文章由激活谷谷主-小谷整理,转载请注明出处：https://sigusoft.com/151088.html
