取色器
在线拾取颜色，HEX、RGB、HSL 互转并生成色板。选择即实时换算，一键复制，全部在浏览器本地完成。
使用说明
- 点击「选择颜色」的色块打开系统取色面板，或直接点击下方推荐色板中的颜色。
- 每次选择后，预览区和 HEX、RGB、HSL 三组颜色值都会实时更新。
- 点击对应格式旁的「复制」按钮，即可把该格式的颜色值复制到剪贴板。
- 想要新的配色灵感时，点一下「随机颜色」试试运气。
常见问题
HEX、RGB、HSL 有什么区别，该用哪个？
颜色换算准确吗？
能直接吸取屏幕上任意位置的颜色吗？
切换到深色模式后颜色会变化吗？
使用步骤
- 打开系统色盘选取颜色
点击「选择颜色」旁的色块打开系统取色对话框，拖动光标与滑杆选色。也可以直接点击下方五个预设色块快速切换。
- 查看实时转换的三种格式
每次选取后，预览区与 HEX、RGB、HSL 三个输出框同步更新。三种格式始终对应同一个颜色，无需任何手动换算。
- 一键复制需要的格式
找到需要的格式，点击旁边的「复制」按钮。#4F46E5、rgb() 或 hsl() 形式的色值会复制进剪贴板。
- 用随机颜色寻找灵感
没有头绪时点击「随机颜色」，工具会随机生成一个颜色并同步到三种格式，作为配色探索或头脑风暴的起点。
工具详细介绍
取色器提供一块可视化色盘，选中颜色后即时给出 HEX、RGB、HSL 三种写法。三者只是同一颜色的不同表达。HEX 是 CSS 中最通用的写法，rgb() 便于在代码里带透明度。hsl() 把颜色拆成色相、饱和度与亮度，人工调色最直观。工具用标准 sRGB 算法在本地换算，HEX 与 RGB 之间完全精确。
适合前端开发者对齐设计稿色值、写 CSS 时快速取色。设计师可以在选色阶段比较不同格式，运营同事也能用它为海报或页面确定品牌色。注意它是网页控件，只能打开系统色盘取色，无法吸取屏幕上其他应用的像素。需要吸管功能时，可借助系统自带的截屏取色工具。
原理与背景
三种写法描述的是同一个 sRGB 颜色。#4F46E5 与 rgb(79, 70, 229) 完全等价，只是进制不同。hsl() 把颜色拆成色相、饱和度、亮度三个分量，浏览器渲染前仍要转回 RGB。换算用标准 sRGB 算法在本地完成，HEX 与 RGB 之间完全精确。工程上常用 hsl 管理主题色：把主色存成 HSL 变量后，做深浅变体只需改亮度一个数字，比维护一堆写死的 HEX 值省事。随机颜色按钮生成的值也走同一套换算。
网页颜色默认工作在 sRGB 色域，系统色盘返回的值就落在这个空间里，所以工具之间的来回换算可以精确闭合。显示器色域是另一回事：同一个 HEX 值在广色域屏幕上看起来更鲜艳，数值本身没有变。跨设备核对颜色时应以数值为准，肉眼印象会随屏幕面板、环境光与系统色彩管理设置漂移。HSL 因四舍五入，转回去可能相差 1 个单位，属正常现象。
典型使用场景
- 设计稿色值转主题变量
拿到设计稿标注的 HEX 后转成 HSL 存入 CSS 变量，hover 加深、禁用变灰都从亮度分量推导。换主题或做深色模式时，只改几个数字就能完成。
- 图表系列色统一管理
ECharts 与 SVG 的 fill 三种写法通吃。让每个系列从同一饱和度出发、按色相角错开，图表配色整齐，比随手挑色可靠，也不用挨个换算格式。
- 初学 CSS 的对照练习
三种格式同屏联动，取一次色就能看到三处数值怎么变，比背换算公式直观得多。还能顺手验证自己心算的 rgb 值换算得对不对。
使用技巧
- 预设色块与随机按钮适合快速起步，先取一个近似色，再到设计软件里微调更省时间。
- 想找同色系深浅变化时，只改 HSL 中的亮度一个数字即可，比在 HEX 上试错直观得多。
- HEX 转 RGB 是精确整数换算；HSL 因四舍五入转回去可能相差 1 个单位，属正常现象。
注意事项
- 输出不含透明通道
工具给出的是不透明色值，没有透明通道。需要 rgba 半透明时，复制 rgb 写法后手动补上第四个参数即可，不必换工具重新取色。
- 取色对话框因系统而异
Windows 与 macOS 的系统色盘功能不同，部分 Linux 桌面只提供简化版本。手填 HEX 这条路始终可用，不受系统限制，粘贴现成色值同样有效。
- 复制的是 CSS 函数写法
rgb(79, 70, 229) 可以直接进样式表，但部分旧版设计软件的色值输入框只认三个数字。粘贴前去掉函数外壳，按 R、G、B 分别填入，颜色本身不受影响。