步骤 1
选择颜色并微调数值
先在左侧使用取色器选择颜色，如有需要，再通过 HEX、RGB、HSL 输入框微调同一种颜色。
确认点
- 当前颜色预览会变为所选颜色
- HEX、RGB、HSL 会同步表示同一种颜色
- 输入错误会显示在对应字段上
本画面的操作
01
取色器
先用取色器接近目标颜色，再进行细调会更容易。
02
确认 HEX
当需要把颜色直接用于 CSS 或配置文件时，可优先确认 HEX。
03
调整 RGB / HSL
需要匹配设计稿或已有代码中的数字时，可直接调节 RGB 或 HSL。
使用方法
取色器、图片与透明度支持的使用方法
一个 browser-only 的颜色工具，可在选择颜色的同时完成 HEX、RGB、HSL 相互转换。当前颜色预览、相近色比较、最近使用颜色复用都可以在同一工作区完成。确认 CSS 颜色代码、转换设计稿数值、比较相近色调，均可在浏览器内完成。
- 步骤
- 2 步
- 指南
- 附截图说明
- 内容
- 注意事项与 FAQ
适用场景
适合在这些时候使用
- 快速确认 CSS 颜色代码
- 转换设计稿中的 RGB 或 HSL 数值
- 并排比较相近色调
- 将 Figma 或 Photoshop 中的颜色代码转换为其他格式
- 并排比较相近色调以检查无障碍性
- 快速复用最近用过的颜色
可实现内容
这个工具可以做什么
- HEX、RGB、HSL 相互转换
- 当前颜色预览与按格式复制
- 色调面板与最近颜色复用
- 使用拾色器获取屏幕上的颜色
- 自动保存最多 20 个最近使用的颜色
- 通过 Alpha 滑块调整透明度
步骤
步骤
这里按顺序整理操作流程与确认点，便于边看页面边继续操作。
步骤 2
复制需要的格式，并复用相近色或最近颜色
从右侧当前颜色区域复制 HEX、RGB 或 HSL，并在需要时从色调面板或最近颜色中复用。
确认点
- 可以复制需要的格式
- 可以从面板选择相近明度的颜色
- 可以重新使用最近颜色
本画面的操作
01
按格式复制
根据实际使用场景复制 HEX、RGB 或 HSL。
02
色调面板
想快速比较更亮或更暗的变体时，可以直接从面板选择。
03
最近颜色
最近使用的颜色会保存在浏览器中，无需反复重新输入。
注意事项
注意事项
将使用前应先判断的重要点按原因归纳整理。
检查项
先固定当前颜色，再选择输出格式
HEX、RGB、HSL 只是同一种颜色的不同表示方式。先把当前颜色确认下来，再决定使用哪种格式会更稳定。
检查项
相近颜色可通过色调面板比较
想尝试稍亮或稍深的颜色时，比起反复手动输入，直接从色调面板选择会更快。
注意
保存的颜色依赖浏览器存储
最近使用的颜色仅保存在浏览器存储中，清除浏览器数据时颜色历史也会一并删除。重要的颜色代码建议另行记录。
FAQ
关于 取色器、图片与透明度支持 的常见问题
这里先整理能帮助使用前判断的常见问题。
选择的颜色会被发送到外部吗？
不会。颜色选择、转换、复制和最近颜色保存都只在浏览器内完成。
最近使用的颜色保存在哪里？
最近颜色只会保存在浏览器存储中，可在同一设备和浏览器里继续使用。
可以用拾色器从屏幕取色吗？
可以。使用拾色器功能可获取屏幕上任意位置的颜色。不支持 EyeDropper API 的浏览器无法使用此功能。
可以设置透明度（Alpha 值）吗？
可以。通过透明度滑块可以使用 RGBA 和 HSLA 格式进行设置。
可以直接输入颜色代码吗？
可以。可以在 HEX、RGB、HSL 各输入框中直接输入数值。
在哪里可以查看保存的颜色？
最近使用的颜色（最多 20 个）显示在最近颜色区域，可在同一浏览器中复用。
下一步指南
相关指南
这里整理了相关指南，便于继续操作时不迷失。
