什么是 十六进制颜色?

十六进制颜色是网页设计中最常用的颜色表示法,格式为 #RRGGBB,由三对十六进制值(00-FF)分别表示红、绿、蓝通道强度。它支持 1670 万种颜色,可简写为 #RGB 形式,现代 CSS 还支持 #RRGGBBAA 格式表示透明度。

快速了解

全称十六进制颜色代码
创建时间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 透明度
  • 所有浏览器和设计软件通用支持

常见用途

  1. CSS 样式中定义网页颜色(文本、背景、边框)
  2. 图形设计软件中指定颜色
  3. 品牌色彩指南和风格规范
  4. UI/UX 设计系统的颜色标记
  5. 电子邮件模板和新闻稿样式

示例

loading...
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 在编程颜色操作方面提供更好的可读性。

相关工具

相关术语

相关文章

颜色空间转换详解【2026】- RGB、HSL、HEX完全指南

深入硬核讲解现代前端 Web 开发与 UI/UX 视觉设计中 RGB、HSL、HSV、HEX、CMYK 等主流色彩空间(Color Space)的数学理论模型、相互双向转换公式及其底层 JavaScript 代码实现逻辑。全面掌握现代 Web 开发中的高级颜色格式使用技巧(如 OKLCH 等)、CSS 变量定义规范以及 WCAG 无障碍网页对比度(Contrast Ratio)检测最佳实践。

2026-02-06

进制转换详解【2026】- 一文搞懂二进制、八进制、十进制、十六进制

全面系统地掌握计算机科学底层核心:数字进制转换(Base Conversion)原理及其在编程语言中的原生实现机制。深入了解各种常用进制系统,包括二进制(Binary)、八进制(Octal)、十进制(Decimal)与十六进制(Hexadecimal)之间的高效双向数学换算方法与应用场景(如内存地址表示、网络协议抓包分析)。附带 JavaScript(BigInt) 和 Python 等多语言大数处理代码示例。

2026-01-12

代码格式化工具大全【2026】- JS/CSS/HTML/XML格式化最佳实践

全面深度硬核解析前端 Web 网页开发中代码格式化(Code Formatting)与代码压缩优化(Minification)的底层 AST(抽象语法树)核心原理机制。详细系统探讨如何通过自动化配置 ESLint、Prettier 等工具显著提升庞大团队协作代码的规范可读性,并使用 Terser 等现代构建打包工具(Webpack/Vite)极限压缩 JavaScript/CSS 以大幅缩减文件体积,成倍提升网站首屏加载性能与用户转化体验。

2025-02-01