选好颜色,复制代码,继续工作

取色器、渐变生成器和图片吸管集于一页。无需注册、无需安装、无需等待:选一个色调,复制为 HEX、RGB、HSL 或 HSV。

%
打开颜色页面

颜色代码

HEX#0F37FF
RGBrgb(15, 55, 255)
HSLhsl(230°, 100%, 52.94%)
HSVhsv(230°, 94.12%, 100%)
CMYKcmyk(94.12%, 78.43%, 0%, 0%)
XYZxyz(19.61, 10.05, 95.5)
LABlab(37.93, 62.96, -98.45)
LCHlch(37.93, 116.86, 302.6°)

包含哪些功能

吸管

从上传的图片取色,在浏览器支持时也可以从屏幕上任意位置取色。把文件拖到页面上,点击像素即可。

格式转换

在 HEX、RGB、HSL、HSV、CMYK、XYZ、LAB 和 LCH 之间即时切换,并把任一数值直接复制到 CSS 或设计软件。

渐变生成器

在色条上添加并拖动色标,切换线性与径向,调整角度和不透明度,然后复制完成的 CSS。

颜色历史

你做过的每个颜色和渐变都留在浏览器里,方便以后回看或在别的项目里重复使用。

配色与变化

每个颜色页都提供淡色、暗色和六种配色方案,任意一种都能一键变成渐变。

免费且注重隐私

没有付费墙,也不会追踪你选了什么。上传的图片在浏览器内读取,不会传到任何地方。

适合谁使用

设计师与产品团队
在勾勒界面或品牌色板、尝试搭配、复制渐变所需的确切 CSS 时。
插画与绘画
用吸管从照片和画作中取色,并用渐变工具规划柔和的明暗过渡。
前端开发
在项目中产出一致的颜色数值,并从既有设计稿中读回这些数值。
做无障碍检查的人
在不同颜色模型之间对比同一个颜色,并调整到对比度达到所需门槛。

如何使用

  1. 1

    选一个颜色

    在饱和度区域点击任意位置,再用色相和透明度滑块微调。HEX、RGB 和 HSV 会同步更新。

  2. 2

    从图片取色

    把图片拖到页面上或选择文件,然后点击想要的像素,色值会立刻出现。

  3. 3

    做一条渐变

    点击色条添加色标并拖到位置,切换线性或径向,再设定角度。

  4. 4

    复制并使用

    复制数值或整段 CSS 声明。你选过的一切都会自动存进历史。

常见问题

一个不碍事的小工具

它最初只是内部小工具:我们想取个颜色、调一下就继续干活,而不必先打开笨重的设计软件。它刻意只有一页,刻意保持轻快,并且会一直免费。

浏览器扩展

想直接从浏览的网页取色?Chrome 和 Edge 扩展会在工具栏添加吸管按钮,保存各自的历史记录,并可一键打开本工具。