CodeKitHub工具介绍
颜色选择器把一次视觉上的选择——『这种蓝』『Logo 里那个像素』——变成软件能理解的数字代码。同一个颜色有几种等价写法：HEX（#3b82f6）在 CSS 和设计交付中最常用，RGB（59, 130, 246）对应屏幕和代码表示颜色的方式，HSL（217°, 91%, 60%）用色相、饱和度、明度来描述，更符合人的直觉。
工具的另一半是图片吸管。上传截图、Logo 或照片，点击任意一点即可提取光标处的颜色——这是回答『这到底是什么颜色』的标准方法。浏览器支持 EyeDropper API 时会调用带放大镜的原生吸管；其他浏览器则从图片的画布副本中读取像素值。两种方式都在本地处理：图片绝不上传。
为什么使用它？
- 三种格式同屏：每次取色都同时显示 HEX、RGB、HSL，各带一键复制按钮——不用再单独做转换。
- 图片取色：上传任意图片、点击即可提取精确像素颜色——从 Logo 里提取品牌色、还原截图里看到的颜色都很合适。
- 浏览器支持时优先用带放大镜的原生 EyeDropper 吸管，其余环境自动回退到精确的画布像素读取。
- 实时预览色块直观展示当前颜色，复制前先确认没选错。
- 免费、即时、完全本地：颜色计算和图片读取都在浏览器里完成——不上传、不存储、不记录。
使用方法
- 用颜色选择框挑一个颜色，或直接粘贴/修改颜色值。
- 要从图片取色，先上传图片，再点击你想取色的位置。
- 查看同时显示的 HEX、RGB、HSL 值和实时预览色块。
- 点击所需格式旁的复制按钮——CSS 用 HEX，代码用 RGB 或 HSL。
示例
输入
点击上传的 Logo 中的蓝色区域输出
HEX #3b82f6 · RGB rgb(59, 130, 246) · HSL hsl(217, 91%, 60%)三行描述的是同一个颜色。样式表和设计工具里用 HEX；代码需要通道数值时用 RGB；想只改最后一个数字就得到更亮或更暗的变体时用 HSL。
什么场景用什么颜色格式
现代 CSS 在任何允许颜色的地方都接受这三种写法，所以选择只关乎工作流、不关乎兼容性。团队通常在设计令牌里统一用 HEX，探索变体时切换到 HSL——把明度调 10–15 个点，就能得到色相不偏移的可用悬停态。
| 格式 | 示例 | 最适合 |
|---|---|---|
| HEX | #3b82f6 | CSS、设计工具、在聊天和规范文档里传颜色 |
| RGB | rgb(59, 130, 246) | 按通道操作颜色的代码、画布绘图、rgba() 透明度 |
| HSL | hsl(217, 91%, 60%) | 做更亮/更暗/悬停变体、构建配色方案 |
从取到颜色到写完 CSS
取色通常只是样式工作的第一步。如果你还需要其他表示法——印刷用的 CMYK、广色域 CSS 用的 OKLCH——颜色转换器会接着这个选择器往下做。
取到的颜色经常直接进到视觉效果里：阴影生成器接收 HEX 值生成逼真投影，再配上圆角生成器做的圆角卡片，观感就完整了。
常见问题
HEX、RGB、HSL 有什么区别？
它们是同一颜色模型的三种写法。HEX 把红绿蓝三个通道压缩成六位十六进制（#3b82f6），是 CSS 和设计工具里最常见的形式；RGB 把同样三个通道写成 0–255 的十进制数；HSL 则用色相（0–360°）、饱和度、明度重新表达——想要『同一个颜色，只是亮一点』时它直观得多。三者互转不会改变颜色本身。
从图片取色是怎么实现的？
上传的图片会被绘制到浏览器里一块不可见的画布上。你点击时，工具读取该位置像素的红绿蓝数值，并转换成 HEX、RGB、HSL。支持 EyeDropper API 的浏览器（桌面版 Chrome、Edge）会改为打开原生放大镜吸管，可以在屏幕任意位置做像素级精确取色。
我的图片会被上传吗？
不会。图片由浏览器直接打开、在本地画布上读取；文件和颜色数据都不会被传输或存储。你可以加载页面后断网，选色器和图片吸管照常工作——所以处理未发布的设计稿和内部截图也是安全的。
为什么取到的颜色和屏幕上看到的不完全一样？
常见原因有两个。抗锯齿：文字和图形边缘的像素会和背景混合，点偏一个像素就会取到过渡色——应该点色块中间的纯色区域。色彩管理：带特殊色彩配置文件的 JPG/PNG 在不同显示器上渲染略有差异；工具报告的是文件里存储的像素值，做设计要的正是这个值。
写 CSS 该复制哪种格式？
HEX 是最稳的默认选择——所有浏览器和工具都认。计划做悬停态或深色模式变体时用 HSL，只调明度分量就能保持色相和饱和度一致。RGB 主要用在代码按数值通道构造颜色，或需要透明度时——rgba(59, 130, 246, 0.5) 比八位 HEX 可读性好得多。