HTML颜色代码详解：名称、十六进制与RGB值对照

HTML中的颜色代码是网页开发中最基础也最常用的知识之一。无论是设置文字颜色、背景颜色、边框颜色，还是设计按钮、导航栏和卡片组件，都离不开颜色值。CSS通常支持颜色名称、十六进制颜色值、RGB值以及RGBA、HSL等多种表示方式。

对于前端开发者来说，掌握常见HTML颜色名称及其十六进制、RGB值之间的对应关系，可以更快速地完成网页样式设计，也方便在不同颜色表示方式之间进行转换。

一、HTML颜色代码有哪些表示方式

严格来说，现代HTML主要负责网页结构，而颜色通常通过CSS进行控制。不过在HTML元素中，可以通过CSS属性直接指定颜色，例如：

<p style="color: red">这是一段红色文字</p>

CSS支持多种颜色表示方法，最常见的包括以下几类：

• 颜色名称：例如 red、blue、green、white。
• 十六进制颜色值：例如 #FF0000、#0000FF。
• RGB颜色值：例如 rgb(255, 0, 0)。
• RGBA颜色值：在RGB基础上增加透明度。
• HSL颜色值：通过色相、饱和度和亮度描述颜色。

其中，颜色名称、十六进制和RGB是网页开发中非常常见的三种形式。

二、HTML常见颜色名称、十六进制与RGB对照表

下面整理了一组开发中经常使用的HTML/CSS颜色代码，方便查询和直接使用。

三、什么是十六进制颜色代码

十六进制颜色代码是网页设计中使用非常广泛的颜色表示方式，通常由一个井号 # 加上六位十六进制字符组成，例如：

#FF0000
#00FF00
#0000FF

六位字符实际上分别对应红色、绿色和蓝色三个通道，也就是RGB。

例如 #FF0000 可以拆分成：

• FF：红色通道，十进制为255。
• 00：绿色通道，十进制为0。
• 00：蓝色通道，十进制为0。

因此，#FF0000就是纯红色，对应RGB值 rgb(255, 0, 0)。

四、十六进制颜色值如何转换成RGB

十六进制转换RGB并不复杂。只需要将颜色代码拆分为三个部分，然后分别将十六进制转换成十进制即可。

例如颜色：

#3366CC

拆分后得到：

33 66 CC

分别转换：

• 33 → 十进制51
• 66 → 十进制102
• CC → 十进制204

所以最终结果为：

rgb(51, 102, 204)

在CSS中，两种写法实现的是相同颜色：

.box1 {
    color: #3366CC;
}

.box2 {
    color: rgb(51, 102, 204);
}

五、RGB颜色代码的工作原理

RGB分别代表Red、Green和Blue，即红、绿、蓝三个颜色通道。传统RGB表示中，每个通道的取值范围是0到255。

例如：

rgb(255, 0, 0)      /* 红色 */
rgb(0, 255, 0)      /* 绿色 */
rgb(0, 0, 255)      /* 蓝色 */
rgb(255, 255, 255)  /* 白色 */
rgb(0, 0, 0)        /* 黑色 */

三个通道的数值不同组合，可以形成大量颜色。例如：

rgb(255, 165, 0)

对应橙色，也就是十六进制颜色 #FFA500。

六、三位十六进制颜色代码

CSS还支持简写形式的三位十六进制颜色代码。例如：

#F00
#0F0
#00F
#FFF
#000

三位写法实际上会将每个字符重复一次。例如：

#F00 = #FF0000
#ABC = #AABBCC
#369 = #336699

这种写法能够减少代码长度，在简单的网页样式中比较常见。但如果需要精确表达颜色，通常使用六位十六进制形式更直观。

七、HTML中如何使用颜色代码

实际开发中，推荐使用CSS的 color、background-color 和 border-color 等属性控制颜色。

设置文字颜色：

<p style="color: #3366CC">蓝色文字</p>

设置背景颜色：

<div style="background-color: #F5F5F5">
    页面内容
</div>

设置边框颜色：

.card {
    border: 1px solid #DDDDDD;
}

如果项目中包含大量页面样式，更推荐使用独立CSS文件或CSS类，而不是在HTML标签中大量使用内联样式。

八、RGBA颜色与透明度

RGB主要用于描述颜色本身，如果还需要控制透明度，可以使用RGBA。

rgba(255, 0, 0, 0.5)

其中前三个参数分别表示红、绿、蓝，最后一个参数表示透明度，取值通常为0到1：

• 0：完全透明。
• 0.5：半透明。
• 1：完全不透明。

例如制作半透明黑色遮罩，可以写成：

.overlay {
    background-color: rgba(0, 0, 0, 0.5);
}

这种方式非常适合弹窗、图片遮罩、悬浮层等场景。

九、常见颜色代码应该如何选择

网页配色并不是颜色越多越好。实际项目中，通常需要建立统一的颜色体系。

主色：用于品牌标识、主要按钮、链接等核心元素。例如蓝色、绿色或紫色。

辅助色：用于次级按钮、提示信息、标签和装饰元素。

背景色：通常采用白色、浅灰色等低饱和度颜色，避免影响正文阅读。

文字色：正文不建议直接使用纯黑色，可以根据设计选择深灰色，从而降低视觉刺激。

状态色：成功、警告、错误等状态应尽量保持统一。例如绿色表示成功，橙色或黄色表示警告，红色表示错误。

十、颜色代码使用中的常见问题

1. #FFFFFF和white有什么区别

#FFFFFF和white都表示白色。颜色名称更加直观，而十六进制颜色值可以表达更加精确和丰富的颜色，因此实际项目中十六进制使用更加普遍。

2. #008000和#00FF00都是绿色吗

两者并不相同。#008000是CSS颜色名称 green 对应的绿色，而#00FF00是纯绿色，也就是RGB三个通道中的绿色达到255。

这也是查询颜色代码时比较容易产生误解的地方，不能简单地认为颜色名称对应的英文单词就是最亮或最纯的该颜色。

3. 为什么RGB范围是0到255

传统数字RGB通常使用8位表示每个颜色通道。8位二进制可以表示256种状态，即0到255，因此三个通道分别具有256个可能值。

4. 颜色代码大小写是否重要

十六进制颜色代码中的字母通常不区分大小写。例如：

#FF6600
#ff6600
#Ff6600

这些写法表示相同颜色。为了保持代码风格统一，项目中一般统一使用大写或小写即可。

十一、网页开发中的颜色代码使用建议

如果只是快速编写简单HTML页面，直接使用颜色名称最方便；如果需要精确控制颜色，十六进制是非常常见的选择；当涉及透明度时，可以使用RGBA；如果需要按照色相、饱和度和亮度调整颜色，则可以考虑HSL。

对于团队项目，还可以通过CSS变量统一管理颜色，例如：

:root {
    --primary-color: #3366CC;
    --text-color: #333333;
    --border-color: #DDDDDD;
    --background-color: #F5F5F5;
}

button {
    background-color: var(--primary-color);
    color: #FFFFFF;
}

.card {
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
}

这种方式能够避免同一种颜色在不同页面中出现多个近似值，也便于后期进行主题切换和整体配色调整。

十二、总结

HTML颜色代码主要服务于网页的视觉表现，实际开发中通常通过CSS指定颜色。颜色名称适合快速使用，十六进制代码适合精确表示颜色，RGB能够直观体现红、绿、蓝三个通道的数值，而RGBA则进一步增加了透明度控制。

掌握颜色名称、十六进制和RGB值之间的对应关系后，可以更加灵活地处理网页文字、背景、边框、按钮以及各种UI组件的颜色。对于日常前端开发而言，建议重点掌握常用颜色代码，同时理解十六进制与RGB之间的转换规则，这比单纯记忆大量颜色名称更加实用。