屏幕颜色拾取器

在浏览器里拾取屏幕、本机图片或本页元素的颜色,一次给出 HEX、HEXA、RGB、RGBA、HSL、HSV、CMYK、Lab 等 10 种格式,附最近颜色名、黑白底 WCAG 对比度判定、6 套配色方案和 CSS/SCSS/Tailwind 代码片段;取色过程全在本机完成,图片不上传。
取色屏幕取色:检测中未取色

输入支持 #hex / #hexa、rgb() / rgba()(含逗号和空格写法)、hsl()、hsv()、hwb()、lab() 和 148 个 CSS 颜色名;「全部格式」面板给出 10 种格式加最近颜色名,共 11 行。

从图片取色
把截图拖到这里,或点「载入示例图」图片只在本机 canvas 里读像素,不会上传到服务器。

支持拖拽或选择 png / jpg / webp / gif / bmp,取色读的是画到 canvas 上的像素。

拾取本页元素颜色

未开启。取的是元素声明的 background-color / color,不是屏幕合成像素。

半透明叠加、图片内容和 canvas 画出来的颜色取不到,这类情况请用上面的「从图片取色」。

当前颜色
——
可读性
本机历史
操作日志
  • 取色、换色和复制都会写在这里。
全部色值格式
代码片段
配色方案
工具说明

屏幕颜色拾取器:在浏览器里取出颜色的 RGB 值,支持四种取色方式——① 用 Chrome / Edge 95+ 的 EyeDropper 直接拾取屏幕任意位置(包括其他标签页、其他桌面应用);② 把截图拖进页面或选择本机图片,用 15×15 像素放大镜逐点取色;③ 拾取本页任意元素声明的 background-color / color;④ 系统取色器或直接输入色值。取到的颜色一次给出 HEX、HEXA、RGB、RGBA、CSS 空格写法、HSL、HSLA、HSV、CMYK、Lab 共 10 种格式,外加最近 CSS 颜色名、最近 web 安全色、相对亮度、建议文字色、黑白底 WCAG 对比度判定,以及互补、类似、三角、分裂互补、四等分、单色明度阶 6 套配色和 CSS / SCSS / Tailwind / JSON 代码片段。全程在本机完成,图片不上传。

使用方法:先取一个颜色(点「拾取屏幕颜色」后鼠标会变成十字准星,按 ESC 可取消;或在图片区点「载入示例图」再点图上像素),色值会出现在「当前颜色」和下面三张结果面板里,每一行右侧都有独立「复制」按钮,也可以一次「复制全部格式」。取过的颜色按本机保存在「本机历史」,点色块即可重新载入,最多保留 24 个。

示例:示例一生成一张内置示例图(240×135,四个横带分别是灰阶、色相、纯色块和 S×V 网格)并自动取中心像素;示例二填入 #2f6fed 展示全部输出;示例三进入本页元素取色模式,鼠标移到任意元素上会浮出颜色与来源,点一下即取色。

注意:EyeDropper 只在安全上下文(https 或本机地址)可用。用 http 打开本页时按钮会变虚线灰底,但仍然可以点——点一下会在提示条里说明原因,取色区上方的说明也会常驻写明当前环境和解决办法,改成 https 访问即可恢复。元素取色读的是 CSS 声明值,半透明叠加、图片内容和 canvas 绘制结果取不到,这类需求请把图片拖进「从图片取色」。超大图片(边长超过 4096)会先等比缩放再取色,页面会标注实际尺寸。只想在多种格式之间来回换算,可以用同站的「颜色转换」工具。