颜色选择器在线：取色器 HEX / RGB / HSL

颜色选择器（也称在线取色器、色彩选择器、吸管取色、color picker、eyedropper）可在浏览器本地用色板选色、从图片像素取色，并在支持的浏览器中从屏幕取色。一键复制 HEX、RGB、HSL、HSV、CMYK，并查看明暗色阶与黑白文字对比度，适合网页配色、UI 调试、设计稿校对与色值互转。全部在本地完成，图片与色值不上传。

什么是在线取色器 / 颜色选择器

在线取色器用来从色板、截图或屏幕像素得到精确颜色，并换成网页常用的 HEX、RGB、HSL 等写法。色板适合从零调色；图片取色适合从设计稿、竞品截图取样；屏幕取色（EyeDropper）可在支持的桌面浏览器里点选任意窗口像素。得到的色值可直接写入 CSS、设计规范或小程序配置。

怎么用颜色选择器

「色板选择」：拖动饱和度/明度面板与色相滑块，或点「随机颜色」。
「图片取色」：上传、拖放或 Ctrl/⌘+V 粘贴截图，点击像素取样；方向键可微调坐标。
支持 EyeDropper 的桌面 Chrome / Edge 可点「屏幕取色」，从任意窗口取样。
右侧复制所需格式；点色阶或「最近取色」可快速回填。也可在 HEX / RGB 等输入框里改色值做互转。

常见颜色格式

HEX：如 #2563EB，CSS / HTML、小程序导航栏等最常用。
RGB：如 rgb(37, 99, 235)，屏幕加色模型。
HSL / HSV：按色相、饱和度、明度/亮度调节，适合做色阶与主题色。
CMYK：印刷减色参考；屏幕显示仍以 RGB/HEX 为准，印刷请用专业色彩管理。

常见用途

从设计稿 / 竞品截图取品牌色，写入 CSS 变量或设计规范。
核对小程序、App 导航栏等只接受 HEX 的配置项。
快速生成按钮悬停、背景浅色等明暗色阶。
用黑白文字对比度粗检可读性（WCAG AA / AAA 参考）。

常见问题

为什么没有「屏幕取色」按钮？

屏幕取色依赖浏览器 EyeDropper API，目前主要在桌面版 Chrome、Edge、Opera 可用。Firefox、Safari 与多数手机浏览器请改用「图片取色」：截图后粘贴再点像素。

图片会上传吗？

不会。图片用 Canvas 在本地读像素，色值转换也在浏览器完成，不提交到服务器。

HEX、RGB、HSL 怎么互转？

在右侧任一格式输入框粘贴或修改合法色值（如 #07C160、rgb(7, 193, 96)），其他格式会同步更新，再点对应「复制」即可。

HSL 为什么有小数？

取整后的 HSL 往往换算不回原来的 HEX。本工具尽量保留能还原同一 HEX 的位数，减少「写进 CSS 后颜色偏一点」的问题。

对比度说明什么？

按 WCAG 相对亮度计算当前色相对白字、黑字的对比。AA 普通文字约需 ≥4.5:1，AAA 约 ≥7:1。渐变、半透明背景仍需结合最终视觉检查。

和图片转 Base64 有什么关系？

本页负责取色与色值格式；若要把整张图编成 Data URI，请用图片转Base64。

免责声明

本工具提供浏览器本地取色与色值换算参考，不构成无障碍合规或印刷打样保证。显示器、色彩配置文件与输出设备会影响最终观感，重要场景请结合专业校色流程。

颜色选择器在线工具