颜色转 HEX

什么是 HEX 颜色？

HEX 颜色是使用十六进制（base-16）表示法表示颜色的方式，最常见于 Web 设计和 CSS。HEX 代码以井号 # 开头，后跟六位数字，前两位表示红色分量，中间两位表示绿色，最后两位表示蓝色——例如，#0EA5E9 是天蓝色，由红色 14、绿色 165、蓝色 233 组成。每对数字范围从 00（十进制 0）到 FF（十进制 255），可表示超过 1670 万种颜色。

HEX 格式随 HTML 和 CSS 一起引入，作为指定 RGB 颜色的紧凑、易读方式。所有浏览器、设计工具和图像编辑器都支持它，使其成为数字颜色的通用语言。三位简写形式（如 #0E9）也是有效的，通过将每个数字加倍扩展为 #00EE99。

何时使用 HEX 颜色

HEX 是 Web 开发和数字设计中最广泛使用的颜色格式。常见场景包括：

• CSS 样式。 color、background、border-color 等属性直接接受 HEX 值。
• 设计系统。 品牌调色板和主题令牌通常以 HEX 定义，以确保团队间的一致性。
• 图像编辑。 Photoshop、Figma 和 Sketch 都在其颜色选择器中显示和接受 HEX 代码。
• 无障碍审计。 对比度检查器和 WCAG 工具在评估颜色对时期望 HEX 输入。
• 营销素材。 邮件模板、社交媒体图形和 PDF 生成器使用 HEX 确保品牌颜色准确。
• 分享颜色。 HEX 代码是将特定颜色传达给他人的最短、最明确的方式。

虽然 CSS 现在也支持 rgb()、hsl() 和 oklch()，但 HEX 因其简洁性和普遍支持，仍是大多数代码库的默认选择。

HEX、RGB 与 HSL 的区别

HEX、RGB 和 HSL 是描述相同颜色的三种方式。HEX 将红、绿、蓝通道编码为十六进制对。RGB 以 0 到 255 的十进制数字表示相同通道，可选带 alpha 通道（如 rgba(14, 165, 233, 0.5)）。HSL 通过色相（色轮上的角度）、饱和度和亮度描述颜色，对设计师来说通常更直观，因为它映射到人类感知颜色的方式。

HEX 和 RGB 在数学上等价，转换简单。HSL 需要通过 RGB 颜色空间转换，但在需要创建阴影、色调或和谐调色板时非常有价值，因为调整亮度或饱和度会产生视觉一致的变体。

常见的 HEX 颜色

下表列出了常用 HEX 颜色及其 RGB 等值。

名称	HEX	RGB
黑色	#000000	0, 0, 0
白色	#FFFFFF	255, 255, 255
红色	#FF0000	255, 0, 0
绿色	#00FF00	0, 255, 0
蓝色	#0000FF	0, 0, 255
天蓝色	#0EA5E9	14, 165, 233
黄色	#FFFF00	255, 255, 0

品牌颜色通常以 HEX 代码形式在风格指南中分发，以便开发者、设计师和印刷商都引用完全相同的值。

如何将颜色转换为 HEX

使用本工具转换颜色只需一秒，完全在浏览器内完成。无需上传、无需注册、无需安装。请按以下步骤操作：

1. 拾取颜色。 使用颜色选择器，或在 RGB 输入框中输入红、绿、蓝值（0–255）。
2. 查看结果。 HEX 代码实时更新到输出框，预览色块显示当前颜色。
3. 复制 HEX。 点击"复制 HEX"复制该值，然后粘贴到你的 CSS、设计工具或文档中。

由于每一步都使用 JavaScript 在浏览器中本地运行，你的颜色选择永远不会上传到服务器。这使得转换完全私密且即时。