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