🎨 颜色选择器
选择颜色并即时获取 HEX、RGB 和 HSL 值。
这是什么工具？
颜色选择器是一种工具，让您从视觉调色板中选择颜色，并即时查看其在网页上最常用的三种颜色格式中的值：HEX、RGB 和 HSL。设计师、开发者和艺术家经常在这些表示法之间转换，因为不同的工具和情境需要不同的格式。CSS 样式表通常接受三种中的任何一种，但 Figma 或 Photoshop 等设计软件可能默认显示 HEX，而数据可视化库经常要求 RGB 或 HSL 元组。这个工具通过并排显示三种值并在您调整颜色时保持同步来弥合这些差距，因此您不必另外寻找转换器。内置的颜色输入会打开您操作系统的原生选择器，支持整个光谱的精细选择，而手动 HEX 字段则让您粘贴现有代码进行检查或转换。大型预览色块以足够的尺寸显示确切颜色，让您可以准确判断，一键复制按钮将每个值发送到您的剪贴板，准备粘贴到样式表、组件库或设计文件中。由于转换使用标准色彩空间数学，这些值在各浏览器间是精确且一致的。无论您是在建立品牌调色板、挑选按钮的强调色，还是将设计师的 HEX 代码转换为图表库所需的 HSL，这个工具都能以正确的格式提供您所需的值，毫无摩擦。运作原理
工具维护当前颜色的单一事实来源，并在来源变更时在格式之间转换。当您使用视觉颜色输入时，浏览器返回一个 HEX 字符串（如 #3b82f6），工具读取并通过解析十六进制对将其分割为红、绿、蓝三个成分。这三个值（每个范围从零到二百五十五）构成显示的 RGB 元组。为产生 HSL 表示，工具将 RGB 通道标准化到零到一的范围，找到最大值和最小值来计算亮度，然后从它们之间的差距推导饱和度，最后根据哪个通道最大来计算色相在色环上的角度。当您手动输入 HEX 代码时，工具验证输入，接受带或不带前缀 # 的代码，并填充三位数简写，然后执行相同的转换流程，使 RGB 和 HSL 输出即时更新。颜色预览色块通过将其背景设为当前 HEX 值来更新，为您提供所选颜色的准确、全尺寸渲染。每次转换都在 JavaScript 中本地进行，因此工具快速、私密且可离线运作，所有计算均不需要任何网络调用。使用方法
挑选和转换颜色只需片刻。
- 点击彩色方块以打开您系统的原生颜色选择器并视觉地选择任何颜色。或者，在 HEX 输入字段中输入六位数的 HEX 代码（带或不带前缀 #）。
- 当您变更颜色时，预览色块会即时更新，HEX、RGB 和 HSL 值也会即时重新计算。
- 查看预览下方显示的三个值。每个值都以可直接粘贴到 CSS 或设计工具中的确切格式显示。
- 点击您需要的格式旁边的复制按钮，将该值发送到您的剪贴板，然后粘贴到您的样式表、组件或文档中。您可以随意切换颜色，每个值都保持完美同步。
常见问题
常见问题
HEX、RGB 和 HSL 有什么不同？
HEX 将颜色表示为六位数的十六进制字符串，例如 #FF5733，其中每对数字代表红、绿、蓝三个通道。RGB 将同样的三个通道值列为从 0 到 255 的十进制数字，例如 rgb(255, 87, 51)。HSL 以色相、饱和度和亮度来描述颜色，这通常更直观，因为您可以通过调整单个值来使颜色变暗或增加饱和度。
我可以手动输入 HEX 代码吗？
可以。在 HEX 字段中输入任何有效的六位数 HEX 代码（带或不带前缀 #），工具即会即时更新预览并显示对应的 RGB 和 HSL 值。三位数简写（如 #3b5）也被接受并扩展为六位数形式。
我应该在 CSS 中使用哪种格式？
三种格式在现代 CSS 中都是有效的，因此选择主要取决于便利性。HEX 精简且在样式表中被广泛使用。RGB 在您需要通过 rgba() 表示法调整透明度时很清楚。HSL 在您想要创建同一色相的色调和阴影时特别有用，因为您可以只改变亮度，同时保持色相和饱和度不变。
转换后的值精确吗？
是的。转换使用标准色彩空间数学，因此 HEX、RGB 和 HSL 值是准确且在各浏览器间一致的。由于这些格式都描述同一个 sRGB 色彩空间，在它们之间转换永远不会遗失信息。
技巧与建议
建立调色板时，从单一品牌色开始，使用 HSL 读数通过调整亮度和饱和度同时保持色相不变来产生和谐的变体，这会产生感觉属于一体的色调和阴影。对于无障碍界面，始终检查您所选颜色与其上的文字或背景之间的对比度，因为看起来引人注目的颜色仍可能无法满足可读性标准。请记住，HSL 亮度 50% 不等于感知亮度，因此在相同 HSL 亮度下非常亮的黄色和非常暗的蓝色看起来可能差异很大。如果您要将颜色交接给开发者，请提供 HEX 代码作为标准值，并包含 RGB 和 HSL 等效值作为参考。最后，将最终调色板储存在共用的 token 文件中，让每位团队成员参考相同的值，这可以防止颜色从一个工具复制到另一个工具时产生的微妙偏差。