跳到正文

颜色拾取器

Colour Picker

在 OKLCH 色板上选色，也可以用屏幕吸管或从上传的图片里取色，并按任意表示法复制出来。

在 OKLCH 平面上拾取颜色：明度沿它向上，彩度沿它横向，色相是下面的条。这个布局就是全部要点——在熟悉的 HSV 方块里，“同一个颜色，饱和度略低一点”是一次没人找得到的对角线移动，而在这里它是一次水平移动。在浏览器允许的地方它还能从屏幕上取色，也能从你拖入的图片上取色，后者在任何地方都管用。

🔒 完全在你的浏览器里运行colorpickereyedropper

取色

上下是明度，左右是彩度，色相是下面那条。画了斜纹的地方，颜色是存在的，只是 sRGB 显示不出来。

当前颜色

L

62.3

C

0.1880

H

259.8°

写法

复制为
  • hex#3b82f6
  • rgbrgb(59 130 246)
  • hslhsl(217.22 91.22% 59.8%)
  • hwbhwb(217.22 23.14% 3.53%)
  • lablab(54.619% 8.763 -65.791)
  • lchlch(54.619% 66.372 277.59)
  • oklaboklab(62.308% -0.0332 -0.1851)
  • oklchoklch(62.308% 0.188 259.81)
  • named#3b82f6

从图片里取色

把截图或照片拖进来

在图上任意一处点一下，就取那个像素。

全部留在这个标签页里处理。浏览器没有 EyeDropper API 的时候用得上，而大多数浏览器都没有。

要成批地在各种写法之间转换？颜色转换器能做。要从这一个色做出一整套调色板？调色板生成会在 OKLCH 里转色相。

怎么用

  1. 先定色相，再在平面上移动

    条选定色相；平面随后显示那个色相下所有可用的明度和彩度。反过来做就是在追颜色，因为改变色相会重绘整个平面。

  2. 或者从屏幕上取一个

    “从屏幕拾取”打开浏览器的吸管，读取桌面上任何像素，包括其他应用程序。它只存在于基于 Chromium 的浏览器里；在别处，按钮会说明这一点，而不是悄悄失败。

  3. 或者拖入一张截图并点击它

    底部的图片面板接受任何图片，交回你点击的那个精确像素。这是在每个浏览器里都管用的路径，吸管缺失时就用它。

  4. 按代码需要的记法复制

    每种记法同时列出，各带复制按钮。给必须到处能用的样式表取十六进制，颜色比兼容性更要紧时取 `oklch()` 值——只要色块超出 sRGB，十六进制就是映射后的近似。

  5. 保存你在比较的那些

    “保存这个”把最多十二个色块留在一排里，你可以点回去。它们只存在于页面里——刷新就清空。

常见问题

屏幕吸管按钮没有用。为什么？

它需要 EyeDropper API，只有基于 Chromium 的浏览器发布了它——Chrome、Edge、Arc、Brave。Firefox 和 Safari 没有，而且没有 polyfill，因为读取任意屏幕像素是页面无法自己授予自己的特权。改把截图加载到图片面板里；它给出同样的答案。

为什么平面上有一大片画着阴影线？

那些明度和彩度的组合在 OKLCH 里存在，但 sRGB 在那个色相下显示不了它们。这是这个空间的真实性质，不是 bug，所以那片区域画成阴影线，而不是涂成它能显示的最近颜色——那里一整面平涂的颜色会是对你屏幕能力的谎言。“拉回 sRGB”在保持明度和色相的同时降低彩度直到放得下。

吸管保留广色域精度吗？

不保留。这个 API 交回的是 sRGB 十六进制字符串，所以屏幕上的 Display P3 颜色在这个页面看到之前已经被转换了。对于你知道值的 P3 颜色，改在颜色转换器里输入 `oklch()` 或 `color(display-p3 ...)` 形式。

我拖进来的图片会上传到哪里吗？

不会。它在这个标签页里被解码到 canvas 上，逐像素读取。什么都不离开浏览器，关掉标签页就丢弃了。

可以从这些接进来

颜色格式转换

Colour Format Converter

在 HEX、RGB、HSL、HWB、LAB、LCH 和 OKLCH 之间换算同一个颜色，并给出最接近的已知色名。

完全在你的浏览器里运行

对比度检测

Contrast Checker

按 WCAG 2 和 APCA 给前景色和背景色这一对打分，并推荐最接近的能通过的颜色。

完全在你的浏览器里运行

配色方案生成

Palette Generator

从一个基准色出发，按互补、三分和邻近色规则生成协调的配色。

完全在你的浏览器里运行

CSS 渐变生成

CSS Gradient Builder

拖动色标做出线性、径向和锥形渐变，并按 sRGB 或 OKLCH 输出 CSS。

完全在你的浏览器里运行

接下来

这些工具吃得下当前工具的产出，结果可以直接送过去。

颜色格式转换

Colour Format Converter

在 HEX、RGB、HSL、HWB、LAB、LCH 和 OKLCH 之间换算同一个颜色，并给出最接近的已知色名。

完全在你的浏览器里运行

色阶生成

Tint & Shade Scale

从一个颜色生成 50–950 的明度色阶，步进在感知上均匀，可直接当设计变量用。

完全在你的浏览器里运行

对比度检测

Contrast Checker

按 WCAG 2 和 APCA 给前景色和背景色这一对打分，并推荐最接近的能通过的颜色。

完全在你的浏览器里运行

图片配色提取

Palette Extractor

从图片里提取 N 种代表色，导出为 HEX、CSS 变量或 ASE 色板。

完全在你的浏览器里运行

配色方案生成

Palette Generator

从一个基准色出发，按互补、三分和邻近色规则生成协调的配色。

完全在你的浏览器里运行

宽高比计算器

Aspect Ratio Calculator

按目标比例算出缺的那条边，并列出与之吻合的标准尺寸。

完全在你的浏览器里运行