Color Picker

取色器
HEX
R
G
B
A
色标
上传图片
1background: #FF930F;
2background: linear-gradient(90deg, rgba(255, 147, 15, 1) 0%,rgba(255, 249, 91, 1) 100%)

流行色

选好颜色就开工——零负担

我们在 2025 年打造了 Color Picker,因为对笨重的应用与过度复杂的配色工具已感到厌倦。作为前端开发者与插画师,我们需要能快速“捕捉”颜色、稍作调整就继续前进的方式。它起初是内部工具,后来成了同事们的心头好;我们将其打磨上线,向所有人开放。无需账号、没有学习曲线——打开页面、选择色调,复制 HEX、RGB、HSL 或 HSV 代码即可。

我们的取色器为何受欢迎

如果你曾看着一个设计在想“如何精准拿到那个色调?”,你会喜欢 Color Picker 的简洁。我们刻意保持界面极简:

  • 一键取色——立即拥有 — 轻点调色板任意位置,所需数值即刻出现。想从照片或截图取样?把文件拖到页面,用吸管工具即可。
  • 渐变毫不费力 — 在渐变条上添加并移动色标,获得如丝般顺滑的过渡。切换线性/径向,精调角度与不透明度,然后复制 CSS。
  • 无门槛,无费用 — Color Picker 可在桌面、平板与手机上的各类现代浏览器中运行。无需安装,也没有费用。
  • 需要时有扩展 — 我们的可选 Chrome 与 Edge 扩展把吸管直接带到浏览器里,让你能从任意页面取样并保留历史。

功能概览

吸管工具

可直接从已上传图片或屏幕任意位置取色;将文件拖到页面,点击像素即可查看多种格式的数值。

格式转换

在 HEX、RGB、HSL 与 HSV 间即时切换,并将代码复制到 CSS、设计软件或调色工具中。

渐变生成器

通过添加与移动色标创建线性或径向渐变;调整角度与不透明度,然后复制最终 CSS。

颜色历史

每一次选色都会被保存,便于回看或复用。

浏览器扩展

适用于 Chrome 与 Edge 的可选扩展,让你能从任意页面取样,并直接从工具栏打开工具。

广泛兼容

适配所有现代浏览器;扩展支持多语言并定期更新。

免费且注重隐私

服务免费,我们不对你的数据进行商业化处理。

适用场景

大家以多种方式使用 Color Picker:

  • 设计师与产品团队 在勾勒界面或品牌调色板时依赖它。探索组合与复制渐变的 CSS 十分快速。
  • 插画师与艺术家 使用吸管从照片与画作中汲取灵感。渐变工具有助于规划柔和的明暗与色彩过渡。
  • 前端开发者 依靠它在项目间生成一致的颜色值。扩展程序让从现有网站取样更轻松。
  • 无障碍检查者 可在不同模型下观察颜色,并调节不透明度直至满足对比度指引。

快速上手

无需教程——这里有一份速览:

  • 选择一种颜色 — 在调色板任意位置点击。HEX、RGB 与 HSV 值会立即显示。用滑块微调色相、饱和度、亮度与不透明度。
  • 从图片取样 — 将图片文件拖到页面或选择上传。点击目标像素即可显示颜色代码。
  • 创建渐变 — 点击渐变条添加并拖动色标;在线性与径向间切换。调整角度与不透明度至满意为止。
  • 复制并复用 — 你的颜色与渐变会自动保存。复制代码或 CSS 粘贴到项目,或与团队共享。

如何在线使用 Color Picker

CSS Gradient Generator

适用于 Chrome 与 Edge 的扩展程序

喜欢直接从网页上“拾取”颜色的想法吗?用于 Chrome 的 Color Picker – Eye Dropper 和用于 Edge 的 Eyedropper – Color Picker 正是为此而生。它们会在浏览器中添加一个小按钮,让你悬停到元素上即可捕捉其色调。你还可在弹窗中上传图片、把颜色混合为渐变并复制 CSS。扩展支持多语言并定期更新。

值得信赖的社区工具

我们构建 Color Picker,是因为想要一个“开箱即用”的简单工具。它是社区项目,并将永远免费。我们不收集也不出售你的数据。若你觉得有用,安装扩展或分享网站,都能帮助更多人发现它。

关于我们如何处理数据,请参见我们的页面: 隐私政策 , 使用条款.

👍 Color Picker | 取色器与渐变 | 来自图片的颜色