在网页设计中，颜色是最直接的视觉元素之一，它不仅能为用户带来审美上的满足，也能传达出信息和情感。HTML提供了一系列的颜色代码，让我们可以轻松地在网页上添加各种颜色，从而丰富页面的表现力。
HTML 颜色代码，教你如何让网页更生动
什么是HTML颜色代码？
首先，我们需要了解什么是HTML中的颜色代码。在HTML中，通过<font>标签或<span>标签，并结合使用color属性，可以设置文本的颜色。但随着技术的发展，现在推荐使用CSS来控制样式，而不是通过HTML。因此，我们将主要讨论的是CSS中的颜色代码。
CSS 中的基本概念
在CSS中，你可以用十六进制表示法、RGB值或者HSL值来定义一个颜色的效果。下面分别解释这三种方式：
十六进制表示法：以#开头，每个数字代表红(R)、绿(G)、蓝(B)三个通道对应分量（每个分量占两个字符）。例如：#FF0000 表示全红（255度）；#00FFFF 表示全绿（255度）。
.color {
color: #FF0000;
}
RGB 值：由三个数值组成，每个数值代表红、绿、蓝通道对应分量的亮度百分比，这些百分比被乘以255后得到实际像素上的取值范围从0到255。例如：rgb(255, 0, 0) 相当于 #FF0000。
.color {
color: rgb(255, 0, 0);
}
HSL 值：一种基于光谱色的描述方法，由三个数值组成，其中 Hue 是彩色的位置（角度），Saturation 是饱和度，Lightness 是亮度。这种方式更易于理解人类对于不同光谱之间关系的心理感觉。不过，在编码时要注意转换为RGB，因为浏览器通常会将HSL转换回RGB进行显示。
.color {
color: hsl(360deg, 100%, 50%);
}
应用实例
使用十六进制表示法设置文本背景：
<style>
.red-background {
background-color: #F2C464;
}
</style>
<div class="red-background">
这里是一个有特定背景色的区域。
</div>
使用RGB设置边框：
<style>
.blue-border {
border-color: rgb(20, 150, 200);
border-width: thin;
padding-left:5px; /* 增加内边距 */
}
p.blue-border {
margin-top:-10px; /* 上外边距调整，使得两段文字看起来紧密相邻 */
text-align:right; /* 右对齐 */
}
</style>
<p class="blue-border">这是一个有蓝边框和右对齐文本的一个段落。</p>
<p>这是另一个段落。</p>
使用HSL创建渐变效果：
<!-- 创建渐变效果 -->
body{
background-image:
linear-gradient(to right bottom,
hsl(160deg ,100%,50%),
hsl(30deg ,90%,70%));
background-size : cover;
}
<!-- 添加透明遮罩层 -->
body::after{
content:"";
position:absolute;
left:-500%;
top:-500%;
width : calc(-100% + inherit);
height : calc(-100% + inherit);
transform-origin:center center ;
transform-style:preserve-3d;
transition-duration:.7s ;/* 效果过渡时间 */
box-shadow:
rgba(black,.6)
-300px -300px,
rgba(black,.4)
-400px -400px,
rgba(black,.2)
-500px -500px,
rgba(black,.8)
+150%
+150%
;
opacity:.8 ;/* 透明程度 */
z-index:-1;/* 层级放置 */
display:block;/* 显示块级元素 */
backdrop-filter:brightness(.9);/* 浮层滤镜调整亮度 */
}