html颜色代码对照表大全：HTML颜色代码对照表大全，从RGB到十六进制的配色指南

来源：网络作者：日期：2025-10-25 15:59:27

在前端开发和网页设计中，颜色是传递信息、创造视觉体验的重要元素，HTML颜色代码是网页设计的基础，掌握这些代码能帮助开发者快速实现设计意图，本文将全面解析HTML颜色代码的多种表示方式，并提供实用的对照表,助您轻松驾驭网页配色。

HTML颜色代码基础

HTML支持多种颜色表示方式,主要包括：

十六进制代码：最常用的格式，以#RRGGBB开头，其中RR、GG、BB分别表示红色、绿色、蓝色分量的十六进制值（00-FF）。
RGB格式：使用rgb(r, g, b)或rgba(r, g, b, a)表示，其中r、g、b为0-255的整数，a为可选的透明度值（0-1）。
预定义颜色名：如red、blue、green等,适用于简单配色场景。

HTML颜色代码对照表

以下是常用颜色的HTML颜色代码对照表，包含RGB、十六进制和颜色名称三栏对照：

颜色名称	RGB值	十六进制代码
红色	rgb(255, 0, 0)	#FF0000
绿色	rgb(0, 255, 0)	#00FF00
蓝色	rgb(0, 0, 255)	#0000FF
黄色	rgb(255, 255, 0)	#FFFF00
青色	rgb(0, 255, 255)	#00FFFF
品红	rgb(255, 0, 128)	#FF0080
棕色	rgb(165, 42, 42)	#A52A2A
紫色	rgb(128, 0, 128)	#800080
黑色	rgb(0, 0, 0)	#000000
白色	rgb(255, 255, 255)	#FFFFFF
橙色	rgb(255, 165, 0)	#FFA500
灰色	rgb(128, 128, 128)	#808080
淡灰色	rgb(211, 211, 211)	#DADADA
深蓝色	rgb(0, 0, 139)	#00008B
淡蓝色	rgb(173, 216, 230)	#ADD8E6

进阶用法与技巧

透明度处理：使用rgba()格式可以为颜色添加透明度，例如rgba(255, 0, 0, 0.5)表示半透明的红色。
HSL颜色模式：HTML5支持HSL（色相、饱和度、亮度）格式，如hsl(120, 100%, 50%)表示绿色。
CSS渐变：利用颜色代码可以创建CSS渐变效果，如linear-gradient(to right, #ff0000, #0000ff)。
颜色工具：推荐使用在线颜色工具（如Coolors、Adobe Color）辅助选择和转换颜色代码。

实用示例

<!-- 使用十六进制代码 -->
<div style="background-color:#FF0000; width:100px; height:100px;"></div>
<!-- 使用RGB格式 -->
<div style="background-color:rgb(0,255,0); width:100px; height:100px;"></div>
<!-- 使用预定义颜色名 -->
<div style="background-color:blue; width:100px; height:100px;"></div>

掌握HTML颜色代码对照表是前端开发的基础技能，通过本文提供的对照表和示例，您可以快速应用各种颜色方案，随着实践的深入，您将能够更灵活地运用颜色代码，创造出色的设计效果，建议将常用颜色代码整理成备忘录,以便日常开发中随时查阅。

无论是初学者还是资深开发者,这份HTML颜色代码对照表大全都将成为您网页设计的得力助手。

html颜色代码对照表大全：HTML颜色代码对照表大全，从RGB到十六进制的配色指南