取色器怎么用
上传一张照片、截图或 Logo,然后点击任意位置。工具会读取 你点中的那一个像素,并以 HEX(例如 #1e88e5)和 RGB(rgb(30, 136, 229))显示颜色。点 复制 按钮即可把 HEX 代码放进剪贴板。图片一加载,就会先读取正中间的像素,让你立刻看到一个数值。
你点过的每个颜色都会加入"最近使用"色块(最多八个),可以多点几处——按钮、背景、标题——比较之后再决定。图片只在浏览器内的 canvas 上读取,不会上传。
通俗解释 HEX、RGB 和 HSL
三者描述的都是屏幕上的同一个颜色,只是写法不同。
- HEX ——
#RRGGBB,用三组十六进制数字分别表示红、绿、蓝,范围00到ff。CSS、Figma、Canva、WordPress 主题以及大多数"品牌色"输入框都用它。 - RGB —— 同样三个通道,用 0 到 255 的十进制数表示。
#1e88e5和rgb(30, 136, 229)完全相同。写代码、用 Office 或带滑块调色的软件时很方便。 - HSL —— 色相(色轮上 0–360°)、饱和度和亮度(百分比)。本工具不直接显示 HSL,但任何设计工具或 CSS 都能把 HEX 立即换算过去。想要选中颜色的浅一点或深一点的版本时,HSL 最好用:色相不变,只改亮度。
从截图里取色
想用某个 App、网页或视频画面里的颜色,先截图(Windows:Win + Shift + S;Mac:Cmd + Shift + 4;手机:电源键 + 音量减,iPhone 为侧边按钮 + 音量加),再拖到这里。
让取色更准的几个技巧:
- 点在纯色区域。 瞄准按钮中间而不是边缘——边缘经过抗锯齿处理,与背景混合后是过渡色。
- 照片有噪点。 照片中相邻像素的颜色略有差异,多点几个位置,选最有代表性的那个。
- 截图可能偏色。 夜间模式、Night Shift、HDR 或开启色彩管理的显示器都可能让截图带上色偏。如果需要精确的品牌色,请先关闭这些功能再截图。
- 过度压缩的 JPG 会失真。 反复保存的 JPG 在边缘附近会出现色块。如果有 Logo 的原始 PNG 或 SVG,请用原图。
- 透明区域 没有真正的颜色,点上去会得到黑色(
#000000)。请点击 Logo 可见的部分。
用之前先检查对比度
好看的颜色用作文字时不一定看得清。无障碍规范(WCAG)要求普通文字与背景的对比度至少 4.5:1,大号文字和图标至少 3:1。白底浅灰字、深蓝底中蓝字常常不达标。
取好文字色和背景色后,把两个 HEX 代码粘贴到任意对比度检测工具里。比例不够就把文字调深或把背景调浅——在 HSL 里只调亮度,是在保持品牌色调的前提下修正的最快方法。
常见用途
- 从别人发来的 Logo 图片里找出品牌色。
- 在自己的设计里还原某个网站按钮或背景的颜色。
- 从照片中提取配色,用于幻灯片、社交媒体帖子或家装灵感板。
- 在 Favicon 生成器 中为 Apple touch 图标选择背景色。
相关工具
- 先把主体抠出来,再不受背景干扰地取色:去除背景。
- 裁出一小块区域,点得更精确:裁剪图片。
- 需要把图片本身变成 CSS 可用的代码?图片转 Base64。