在线拾色器,从图片取色并查 HEX RGB HSL 值

如何从图片上精确取色并查询 HEX、RGB、HSL 等格式

拾色与色值速查(Color Picker Toolkit)把两种最常用的取色调色工具 —— 拾色器与色值速查 —— 集中到一个工具里。拾色器让你能从任意图像中精确提取像素颜色;色值速查则把任意 HEX、RGB、HSL 字符串解析为完整色卡,并提供互补色、对比度、CSS 命名等专业信息。

颜色是视觉传达的第一语言 —— 研究表明,人类在 90 秒内对产品的第一印象有 62-90% 来自颜色。从 Coca-Cola 的红到 Tiffany 的蓝,从 Spotify 的绿到 McDonald's 的黄,品牌色是视觉识别系统最核心的资产。这个工具让你能像设计师一样思考颜色:精确提取、系统转换、自由探索。

什么是色彩空间(Color Space)?RGB、HSL、HEX 的区别

色彩空间是用数字表示颜色的"坐标系统"。最常见的是 RGB(Red-Green-Blue),它把颜色分解为红、绿、蓝三个分量,每个分量 0-255(8 位),共 1677 万种颜色。RGB 是"加色模型",源自发光物体(显示器、LED 灯)的原理 —— 红绿蓝三色光叠加得到白色。这就是为什么屏幕显示都用 RGB。

HSL(Hue-Saturation-Lightness)是另一种色彩空间,它用"色相、饱和度、明度"描述颜色。色相(H)是 0-360 度的色轮角度(0=红、120=绿、240=蓝),饱和度(S)是颜色的纯度(0%=灰色,100%=纯色),明度(L)是亮度(0%=黑色,50%=纯色,100%=白色)。HSL 的优势是符合人类直觉 —— "把红色变浅一点"在 HSL 里只是 L 值 +10,在 RGB 里则要同时调整三个分量。

HEX 是 RGB 的十六进制简写,如 #FF5733 等价于 rgb(255, 87, 51)。它是 Web 开发的标准格式,因为 CSS、HTML、设计工具都通用。本工具支持三种格式的互转:你可以在取色器上点选任意颜色,工具会同时显示它的 RGB、HSL、HEX 值,方便在不同场景使用(设计稿用 HEX、CSS 用 rgb()、图像处理用 HSL)。

拾色器(Color Picker):如何从图片中提取"那一抹红"?

从图片中提取颜色是设计师的日常需求:看到一张海报的配色很喜欢,想用到自己的设计中;客户给了一张 Logo 照片,需要还原出精确的品牌色;做 PPT 时想让标题颜色与配图主色调一致。这些场景都需要"取色"—— 用取色器点击图片的某个像素,获取它的颜色值。

但单次取色有个问题:同一物体的颜色在不同光线、不同角度下会有细微差异。专业的做法是"区域平均取色"—— 取色器不只看单个像素,而是取周围 5×5 或 10×10 像素的平均值,这样能过滤噪点与局部偏差,得到更有代表性的颜色。本工具的拾色器就是这种"区域平均"模式,确保你取到的颜色是稳定的。

取色的应用场景:品牌色提取(从 Logo 中取主色,用于网站、名片、周边)、配色方案生成(从一张摄影作品中提取 5-7 个主色,作为设计项目的调色板)、图像修复参考(修复老照片时,从未损坏区域取色来填补损坏区域)。配合本工具的"速查"功能,你还能立即看到提取的颜色在色轮上的位置,以及它的互补色、类似色、三角色,方便你做配色决策。

色值速查(Color Lookup):从字符串到完整色卡的"翻译器"

你可能遇到过这些场景:设计师发来一句"主题色用 #1a73e8",你想知道这是什么颜色;看到一个 CSS 文件里的 rgb(255, 87, 51),想转成 HEX 给设计工具用;调试时发现 hsl(210, 89%, 49%) 看起来和预期不一样,想可视化确认。这些都需要"色值速查"—— 把抽象的色值字符串翻译成可视化的色卡与转换结果。

本工具的速查功能支持几乎所有主流格式:HEX(#fff、#ffffff、#ffff、#ffffffff)、RGB(rgb(255,87,51)、rgba(255,87,51,0.5))、HSL(hsl(14,100%,60%)、hsla(14,100%,60%,0.5))、HSV/HSB、CMYK,以及 148 个 CSS 命名色(red、hotpink、rebeccapurple 等)。输入任意一种,立即显示它在所有其他格式中的等价表示。

除了格式转换,速查还提供"配色决策"信息:互补色(色轮对面 180°)、类似色(相邻 30°)、三角色(等边三角 120°)、对比度评分(与白/黑背景的 WCAG AA/AAA 等级,对可访问性设计至关重要)、最匹配的 CSS 命名色。这些信息让"我看到一个颜色"变成"我知道怎么用这个颜色"。

常见误区:关于取色与色值转换的 5 个"想当然"

误区一:"RGB 值越大颜色越亮"。错。RGB(255, 0, 0) 是纯红,RGB(128, 0, 0) 是暗红,但 RGB(255, 200, 200) 虽然也包含 255 却是浅粉 —— 亮度取决于三个分量的总和与比例,而非单个分量的绝对值。判断亮度应该用 HSL 的 L 值或灰度公式。

误区二:"取色就是看 RGB 值"。错。RGB 值只是颜色的"数字化表示",真正的颜色感知与显示设备、观察环境、个人色觉都有关。同一份 RGB 值在 iPhone 屏幕与 Windows 显示器上看起来会有细微差别,这就是"色彩管理"要解决的问题。专业设计工作需要校色仪(Colorimeter)来确保跨设备一致性。

误区三:"HEX 6 位和 3 位是不同颜色"。错。#FF5733 与 #F53 是同一种颜色 —— 3 位 HEX 是 6 位的简写,每个字符相当于重复两次(F → FF、5 → 55、3 → 33)。CSS 会自动展开 3 位 HEX,所以两种写法完全等价。

误区四:"HSL 的 100% 饱和度是最鲜艳的"。错。HSL 的饱和度是相对于当前明度的纯度,不是绝对鲜艳度。一个 hsl(0, 100%, 50%) 是纯红,但 hsl(0, 100%, 90%) 是浅粉 —— 虽然饱和度都是 100%,但后者因为明度高而显得"不鲜艳"。

误区五:"对比度 4.5:1 就够了"。半对。WCAG AA 级要求普通文本对比度 ≥ 4.5:1、大文本(18pt+)≥ 3:1;AAA 级则要求 7:1 与 4.5:1。但"通过 WCAG"不等于"对所有人易读" —— 低视力用户、户外强光环境、低端显示屏都可能需要更高对比度。本工具的速查会同时显示 AA 与 AAA 两个等级,帮你做出更稳健的选择。

所有处理均在浏览器本地完成,您的图片绝不会上传到任何服务器。

最后更新：2026年10月23日 2026-10-23