图片取色 — 在线提取主色调色板
上传图片自动提取主色与配色方案:4-12 种主色可选,HEX / RGB / HSL 三种格式点击即复制,还能一键导出 CSS 变量与 Tailwind 配色片段。浏览器本地分析、图片不上传。支持电脑、平板、手机浏览器。
图片取色(调色板提取)就是从一张图片里自动分析出最具代表性的几种主色,常用于从照片、海报、参考图中提炼配色方案。本工具用中位切分(median cut)量化算法在浏览器本地计算:上传后立即给出 4-12 种主色及各自的占比,每个色块点击即复制,支持 HEX / RGB / HSL 三种格式切换;做前端的还能整套导出 CSS 变量或 Tailwind 配色片段,直接贴进项目。全程本地分析,图片不上传、不存储。
什么时候需要
设计配色参考
从喜欢的照片 / 海报里提炼一套可用的配色。
前端 / 品牌落地
把品牌图的主色变成 CSS 变量或 Tailwind 配置。
内容创作
封面、PPT、贴文找到与图片协调的文字与背景色。
关于取色结果
- 主色按占比排序,一眼看出画面的颜色构成
- HEX / RGB / HSL 随切随复制,CSS 变量 / Tailwind 一键导出
- 本地量化计算,大图先缩样再取色,不卡顿不上传
- 量化取的是「代表色」,与某个像素的精确颜色可能略有差别
- 主色数量越多越细碎,配色参考一般 4-8 种就够
- 接近纯色 / 渐变的图片,多种主色可能非常相近
图片取色常见问题
主色是对整张图做量化聚类的「代表色」,反映画面的整体颜色构成;它不等于某个像素点的精确取值。如果你要的是某一点的颜色,可以放大后截图该区域再提取,或用系统自带的吸管工具。
三者只是同一颜色的不同写法:HEX(如 #1C72DE)最常用于网页与设计软件;RGB 按红绿蓝三通道数值表示;HSL 按色相 / 饱和度 / 亮度表示,调亮调暗更直观。工具里点格式按钮即可切换,复制的就是当前格式。
CSS 变量片段贴进你的全局样式(如 :root)后,用 var(--palette-1) 引用;Tailwind 片段合并进 tailwind.config 的 theme.colors 后,用 bg-palette-1 / text-palette-2 等类名使用。
不会。取色在你的浏览器里完成:先把图片缩样到很小的尺寸再做量化计算,全程不联网、不上传、不存储,断网也能用。