什么是取色器？

可视化选取任意颜色，获取十六进制、RGB 和 HSL 色值。点击或拖拽找到想要的色调，直接复制色值即可。

在饱和度/亮度方块里拖动改变色调,移动色相条切换色系,工具会自动给出 hex、RGB 和 HSL 三种数值,点一下就能复制。在输入框里输入 hex,方块会立刻跳到对应位置,方便基于现有品牌色微调,不必从随机色开始。

使用方法

1. 在色彩区域点击或拖动选择器找到想要的颜色
2. 使用色相滑块和可选的透明度控制进行微调
3. 一键复制十六进制、RGB 或 HSL 色值

何时使用

• 为网站 CSS 挑强调色,不用来回切换设计软件。
• 把品牌手册里的 hex 翻成 HSL,套进设计系统。
• 通过移动色相滑块,搭出一组相邻的小色板。

结果

选择一个暖橙色，得到 #E67E22、rgb(230, 126, 34)、hsl(28, 80%, 52%)。

常见问题

HSL 和 HSB(HSV)有什么区别?

HSL 在亮度 50% 时是最纯色,从黑到白对称,适合调亮暗双向的色阶。Photoshop 用的 HSB 则是亮度 100% 时最纯,符合调色板搅拌颜料的直觉。

为什么屏幕上的颜色和印出来的不一样?

屏幕走 RGB(发光),印刷走 CMYK(吸光油墨)。鲜艳的亮绿、电光蓝这类颜色在 CMYK 里根本找不到完全对应。重要稿件出片前一定要在目标载体上打样确认。

选出来的 hex 默认就符合 WCAG 吗?

并不会。无障碍是由前景和背景的对比决定的,单一颜色无所谓合不合规。把前景 hex 和背景 hex 一起算对比度,正文至少 4.5:1,大字至少 3:1。

怎样取到屏幕上已经存在的颜色?

点击「屏幕取色」，取色器就能吸取屏幕上任意一个像素的颜色——精确的 hex 会直接载入选色器，方便你再调饱和度、亮度或透明度。（取色按钮只在支持该功能时出现；否则可用系统自带取色器（macOS「数码测色仪」、Windows PowerToys、Chrome DevTools）读出 hex 再粘到输入框。）

这个取色器支持透明度吗?

支持。色相条下方有一条不透明度滑块,可以在 0 到 100% 之间任意调整 Alpha。预览色块底下显示棋盘格,一眼就能看出透明效果。当 Alpha 小于 100% 时,RGB 和 HSL 的复制按钮会自动切换成 rgba() 和 hsla()。

相关工具