什么是 十六进制颜色?
十六进制颜色是一种用于网页设计和数字图形的六位字母数字颜色表示法,由三对十六进制值(00-FF)组成,分别代表红、绿、蓝三个颜色通道。
快速了解
| 全称 | 十六进制颜色代码 |
|---|---|
| 创建时间 | 1996 年(CSS1 规范) |
| 规范文档 | 官方规范 |
工作原理
十六进制颜色代码是网页开发和数字设计中最广泛使用的颜色表示法。格式使用井号(#)后跟六个字符,每对字符代表红、绿、蓝(RGB)的强度,范围从 00(无颜色)到 FF(最大强度)。例如,#FF0000 代表纯红色,#00FF00 代表纯绿色,#0000FF 代表纯蓝色。当每对字符相同时,可以使用简写形式(#RGB),如 #FF6600 可以写成 #F60。现代 CSS 还支持 8 位十六进制代码(#RRGGBBAA),其中最后两位代表 alpha(透明度),00 为完全透明,FF 为完全不透明。
主要特点
- 使用 16 进制数字系统,包含 0-9 和 A-F
- 格式:#RRGGBB 或简写 #RGB(重复数字时)
- 支持 1670 万种颜色(256 × 256 × 256)
- 大小写不敏感(#FF0000 等于 #ff0000)
- 8 位格式(#RRGGBBAA)支持 alpha 透明度
- 所有浏览器和设计软件通用支持
常见用途
- CSS 样式中定义网页颜色(文本、背景、边框)
- 图形设计软件中指定颜色
- 品牌色彩指南和风格规范
- UI/UX 设计系统的颜色标记
- 电子邮件模板和新闻稿样式
示例
Loading code...常见问题
6 位和 8 位十六进制颜色代码有什么区别?
6 位十六进制颜色代码(#RRGGBB)仅指定红、绿、蓝通道,产生完全不透明的颜色。8 位十六进制颜色代码(#RRGGBBAA)添加了两个额外数字用于 alpha 通道,允许您指定透明度。Alpha 值范围从 00(完全透明)到 FF(完全不透明)。
如何将 RGB 值转换为十六进制颜色代码?
要将 RGB 转换为十六进制,需要将每个 RGB 值(0-255)转换为其十六进制等效值(00-FF)。例如,RGB(255, 128, 0) 变为 #FF8000,因为 255 = FF,128 = 80,0 = 00。在 JavaScript 中,可以使用公式:hex = value.toString(16).padStart(2, '0') 来转换每个通道。
什么时候应该使用十六进制颜色的简写形式?
当完整形式中每对数字相同时,可以使用 3 位简写形式(#RGB)。例如,#FFFFFF 可以写成 #FFF,#336699 可以写成 #369。这可以节省 CSS 空间,但只有当数字对相同时才有效。注意 #F60 展开为 #FF6600,而不是 #F60F60。
十六进制颜色代码区分大小写吗?
不,十六进制颜色代码不区分大小写。#FF5733、#ff5733 和 #Ff5733 都代表相同的颜色。但是,为了一致性和可读性,大多数风格指南建议在整个项目中使用全大写(#FF5733)或全小写(#ff5733)。
为什么设计师在网页设计中更喜欢使用十六进制颜色而不是 RGB?
设计师通常更喜欢十六进制颜色,因为它们更紧凑(6-7 个字符 vs. rgb() 的 13+ 个字符)、更容易复制和分享、在设计工具中被普遍认可,并且自 CSS 早期以来一直是标准表示法。然而,RGB 和 HSL 在编程颜色操作方面提供更好的可读性。