颜色选择工具

颜色选择工具是一款免费工具，可让你直接在浏览器中选择颜色，并获取所需格式的颜色值。

颜色选择工具会返回什么？

颜色选择工具会以数值形式返回你在色轮上选中的颜色。同一种视觉颜色可以用多种格式表示，最常见的有十六进制、RGB、RGBA、HSL 和 HSLA。

这些格式以不同方式描述颜色。十六进制和 RGB 用数值表示红、绿、蓝三个通道。HSL 使用色相、饱和度和亮度，便于进行有规律的调整。带 Alpha 通道的格式还可以表示不透明度。

• 十六进制：值由井号和十六进制数字组成，例如 #336699。
• RGB：值通常用 0 到 255 之间的数字表示各个通道，例如 rgb(51, 102, 153)。
• HSL：值使用色相角度，以及饱和度和亮度的百分比，例如 hsl(210, 50%, 40%)。
• RGBA 和 HSLA：可表示透明度。Alpha 值为 0 时完全透明，为 1 时完全不透明。

CSS 也支持颜色名称，但可用名称仅限于固定集合，不太适合表示精确的设计令牌。生成的数值通常更容易在设计系统、样式表和应用程序代码之间迁移。

如何使用颜色选择工具？

选择 Color 字段，在色轮上选取所需位置，然后根据应用程序的要求使用相应格式的结果值。整个过程都在浏览器中完成，输入的颜色不会上传到服务器。

如果是在现有界面中使用，请先沿用代码库已有的格式。这样可以避免不必要的颜色转换，也方便审核拉取请求。检查第三方数据时，在用看似相同的颜色替换原值之前，先确认其中是否包含不透明度信息。

部署前，可以先选择或还原目标颜色，复制合适的表示法，再到组件的实际状态中检查效果。请分别测试正常、悬停、聚焦和禁用状态，因为不透明度和继承样式可能会改变最终的渲染结果。

如何解读结果

请根据对应的颜色模型解读结果，并在复制到代码前检查是否存在 Alpha 分量。在 RGB 中，每个通道值分别控制红、绿、蓝分量的强度。在 HSL 中，色相沿色轮变化，饱和度控制颜色强度，亮度则控制黑与白之间的平衡。

在 CSS 或结构化数据中使用时，颜色语法有严格要求。手动编辑时常见的错误包括：

• 十六进制 CSS 颜色值漏写开头的井号；
• 使用五位或七位十六进制数字，这些都不是有效的标准长度；
• 在要求 RGB 通道数值的实现中使用百分比；
• 在旧式 RGB 语法中漏写逗号，或混用互不兼容的新旧语法；
• 把带 Alpha 通道的颜色值复制到只接受六位十六进制值的软件中；
• 使用小数逗号，例如 0,5，而 CSS 要求使用小数点，例如 0.5。

此工具用于生成颜色值，并不是通用的 CSS 验证器。它无法证明外围声明、JSON 文档或主题文件是否有效，因此，颜色值之外的语法错误仍需使用相应的解析器或开发工具检查。

颜色转换示例

六位十六进制颜色将三组各两位数字分别映射到红、绿、蓝通道。例如，下面几种表示法描述的是同一种完全不透明的颜色。

十六进制值 #336699

对应的 RGB 值 rgb(51, 102, 153)

对应的 HSL 值 hsl(210, 50%, 40%)

三位十六进制是简写形式。每一位数字重复一次，即可得到六位值。

十六进制短写 #fff

展开后的十六进制值 #ffffff

对应的 RGB 值 rgb(255, 255, 255)

八位十六进制值会在红、绿、蓝三组数字之后加入 Alpha 通道。请注意，有些系统使用不同的通道顺序，或不接受八位表示法。在纯色状态下视觉效果相同的颜色，设置不透明度并叠加到其他背景上后，也可能呈现不同的效果。

应该选择哪种颜色格式？

除非确实有理由更改，否则请使用目标环境已经要求的颜色表示法。六位十六进制格式简洁，常用于 CSS 变量和设计令牌文件。软件直接提供通道值时，RGB 会更方便。需要通过调整亮度或饱和度创建相关颜色时，HSL 则更合适。

• 需要简洁且便于广泛理解的不透明网页颜色时，使用六位十六进制格式。
• 只有在目标环境明确支持这种 Alpha 表示法时，才使用八位十六进制格式。
• 需要分别处理红、绿、蓝通道时，使用 RGB 或 RGBA。
• 需要根据色相、饱和度或亮度以编程方式生成主题变体时，使用 HSL 或 HSLA。
• 如果已经有颜色值，只需转换格式，而不是通过视觉方式选择新颜色，请使用颜色转换工具。

不要把屏幕上显示的 RGB 值直接当作印刷规范。商业印刷可能需要 CMYK 值、ICC 颜色配置文件、打样，以及与印刷方确认。仅靠数学转换无法保证印刷颜色与背光屏幕上的颜色一致。

哪些情况不需要选择或转换颜色？

如果现有颜色值已经符合目标环境要求，就不必再次选择或转换。反复转换可能造成舍入差异、字母大小写不一致，或给源文件带来不必要的改动。

有时，保留主题变量等命名设计令牌会比将其替换为字面值更合适。令牌可以维持组件之间的关联，并支持集中修改颜色。同样，如果某个颜色值只供机器使用，就没有必要将其转换成更便于阅读的形式，除非有人需要检查或维护它。

任何颜色选择工具都无法单独判断所选颜色的对比度是否足够、是否符合品牌规范，或色觉障碍人士能否区分。请使用专门的对比度工具检查前景色与背景色的组合，并结合实际界面查看效果。

常见问题

结果可以用于 CSS 变量吗？

可以，前提是所选表示法对你支持的浏览器和构建工具来说是有效的 CSS。将完整颜色值存入自定义属性，再通过 var() 函数引用。如果项目会分别处理各个通道，按照项目现有规范单独存储这些通道可能更方便。

为什么同一种颜色在另一块屏幕上看起来不一样？

因为不同显示器在校准、亮度、面板技术和色域支持方面存在差异。浏览器的色彩管理和操作系统的显示配置文件也会影响渲染。因此，即使数值完全一致，也不能保证颜色在所有设备上的实际视觉效果相同。

十六进制字母的大小写会改变颜色吗？

不会。十六进制数字 A 到 F 不区分大小写，因此 #AABBCC 和 #aabbcc 表示相同的颜色。请遵循代码仓库已有的大小写规范，避免产生仅涉及格式的改动。

颜色值中可以包含带重音符号或非拉丁字符吗？

不可以。标准十六进制、RGB 和 HSL 表示法使用 ASCII 数字、字母和标点符号。这些数值颜色语法不包含带重音符号或非拉丁字符。如果相关语言和文件编码允许，它们可以出现在外围变量名或元数据中。

完全透明的颜色就等于没有颜色吗？

不等于。完全透明的颜色仍然包含通道值，只是这些值本身不可见。在动画、插值、合成或后续更改不透明度时，这些隐藏通道可能会影响结果。如果应用程序依赖这些行为，请保留相应通道值。

小数形式的通道值需要舍入吗？

仅应按照目标环境接受的精度，以及生成一致结果所需的精度，对小数颜色通道和 Alpha 值进行舍入。精度过高会增加审核难度，舍入过度则可能产生轻微色差。完成舍入后，请结合预期背景和各个交互状态检查组件的实际渲染效果。