Hex ↔ RGB ↔ HSL 转换器
输入 hex 代码或 RGB 三元组;我们将换算为其他格式并显示色块。
色彩代码并非随意——它们有精确的逻辑值得了解
十六进制色彩代码（如#3A7BD5）将三个颜色通道——红、绿、蓝——编码为两位十六进制数对。#3A对应十进制58，#7B对应123，#D5对应213。这三个数字精确定义了屏幕上红、绿、蓝光的混合比例，从而呈现出最终颜色。由于每个通道的范围为0至255，十六进制颜色共有16,777,216种可能。CSS、SVG、HTML canvas和大多数设计工具均原生支持十六进制格式。
对于设计工作而言，HSL（色相、饱和度、明度）通常比RGB更实用，因为它更符合人类感知颜色的方式。色相是色轮上的位置（0至360度），饱和度表示颜色的纯度，明度表示亮暗程度。在HSL中只调整明度值，即可得到该颜色可靠的深浅变化，而不会偏移色相——这在RGB空间中是很难精准实现的。
Frequently asked questions
十六进制3位色码与6位色码有什么区别？
3位十六进制色码（#RGB）是6位色码（#RRGGBB）的简写形式，每位数字被重复一次。因此<code>#A3F</code>等同于<code>#AA33FF</code>。这种简写仅在每个通道的两位数字完全相同时有效。它在CSS中可以节省几个字符，但仅代表完整1670万种颜色中4,096种颜色的子集。如有疑虑，请使用6位形式——它始终有效且无歧义。
为什么屏幕上的颜色与打印出来的颜色不同？
屏幕使用<strong>加色混合</strong>（RGB：光叠加），而打印机使用<strong>减色混合</strong>（CMYK：油墨吸收光线）。RGB可以呈现鲜艳的荧光色，而这些颜色在CMYK中根本无法复现——它们「超出了」印刷色域。如果您用十六进制/RGB为印刷项目设计颜色而未转换为CMYK，打印机的色彩管理软件会自动近似处理，结果往往比预期暗淡。
什么是Alpha通道？它在CSS中如何使用？
Alpha控制不透明度，取值范围为0至1。在CSS中，<code>rgba(58, 123, 213, 0.5)</code>将颜色渲染为50%透明度。8位十六进制格式<code>#3A7BD580</code>在最后两位十六进制数中编码Alpha值——十六进制<code>80</code>等于十进制128，约为50%不透明度。现代浏览器对8位十六进制的支持良好，但在旧版IE时代的代码库中可能存在兼容性问题。<code>rgba()</code>格式具有更广泛的兼容性，更为稳妥。
如何找到网页上某个颜色的十六进制代码？
最可靠的方法是使用浏览器的开发者工具。右键点击任意元素，选择「检查」，在「样式」面板中找到颜色属性——Chrome和Firefox均会显示可点击的色块，并显示十六进制、RGB和HSL值。此外，<strong>ColorZilla</strong>等浏览器扩展可让您用吸管工具取样屏幕上任意像素的颜色。对于设计资源，Figma和Adobe XD会在填充检查器中直接显示十六进制值。
Advertisement
728 × 90