← 返回博客

什么是 HEX 颜色代码

2026-04-01 · 5 分钟阅读

HEX 颜色代码简介

HEX 颜色代码是一种用十六进制数字表示颜色的标准方式，广泛用于网页设计、UI 设计和数字艺术领域。一个标准的 HEX 颜色由井号（#）加上 6 位十六进制字符组成，例如 #FF5733。这 6 位字符实际上编码了红色、绿色和蓝色三个通道的强度值。

十六进制（Hexadecimal）是以 16 为基数的数字系统，使用 0–9 和 A–F 共 16 个符号表示数值。在颜色表示中，每对十六进制字符表示 0 到 255 之间的一个整数，对应一个颜色通道的强度。

HEX 颜色代码的结构

一个标准的 6 位 HEX 颜色代码分为三组，每组 2 位，分别代表红（R）、绿（G）、蓝（B）三个颜色通道：

#RRGGBB

#FF5733
  ^^  = Red   (FF = 255)
    ^^ = Green (57 = 87)
      ^^ = Blue  (33 = 51)

每个通道的值从 00（最暗，即无该颜色）到 FF（最亮，即该颜色强度最大）。三个通道的组合产生了超过 1600 万种可能的颜色（256 × 256 × 256 = 16,777,216）。

十六进制与十进制的换算

十六进制中，A=10、B=11、C=12、D=13、E=14、F=15。两位十六进制数的计算方式是：第一位 × 16 + 第二位。例如，FF = 15×16 + 15 = 255；80 = 8×16 + 0 = 128；1A = 1×16 + 10 = 26。

理解这个换算对于手动调整颜色非常有用。当你将红色通道从 FF 降低到 80，颜色会变暗，因为红色强度从 255 降到了 128，正好是最大值的一半。

缩写形式：3 位 HEX 代码

当一个 6 位 HEX 颜色代码的每对字符都相同时，可以缩写为 3 位形式。例如，#FFCC00 可以缩写为 #FC0，#AABBCC 可以缩写为 #ABC。CSS 解析器会将每个字符复制一份来还原完整代码。

这种缩写格式在 CSS 中完全有效，可以减少代码量。但并非所有颜色都能缩写——只有每组两个字符相同的颜色才支持缩写。

HEX 透明度（8 位 HEX）

CSS 还支持 8 位的 HEX 颜色代码，最后两位代表透明度（Alpha 通道）。例如，#FF573380 中的 80 表示约 50% 的不透明度（128/255）。FF 表示完全不透明，00 表示完全透明。这一格式在现代浏览器中被广泛支持。

HEX 在 CSS 中的使用

在 CSS 中，HEX 颜色可以用于任何接受颜色值的属性：

/* Background color */
body { background-color: #F0F4F8; }

/* Text color */
h1 { color: #1A202C; }

/* Border */
.card { border: 1px solid #E2E8F0; }

/* With shorthand */
a { color: #06C; } /* equivalent to #0066CC */

HEX 格式简洁直观，是 CSS 中最常用的颜色表示方法之一。设计工具（如 Figma、Photoshop）通常也优先显示 HEX 值，方便设计师和开发者之间的交接。

常见 HEX 颜色参考

了解一些常见颜色的 HEX 值有助于加快开发速度：

立即免费使用相关工具

免费使用 →