FrameLab · 快捷工具
刃图在线图片取色与色卡提取工具
免费在线从图片提取配色。上传一张图片即可自动分析出现面积最大的主色板，也可用取色笔点击任意像素得到精确的 HEX 与 RGB 色值，一键复制、导出色卡图。取色与提取过程完全在浏览器本地完成，图片不上传服务器， 适合设计配色参考、品牌取色、临摹还原色调等场景。
核心能力
-
自动主色板
中位切分法聚类出图中占比最高的几种颜色，2–12 色任意调。
-
取色笔
点击预览图任意像素，得到该点真实的 HEX 与 RGB，逐色取样。
-
一键复制
点色块复制单个色值（HEX / RGB / HSL 任选），或复制整个主色板色值串，直接粘贴进设计稿。
-
导出色卡图
把主色板生成一张带 HEX / RGB 标注的色卡 PNG，方便分享与存档。
-
取色记录
多次取样自动累积，随时移除不需要的色，形成你的临时调色盘。
-
代码导出
把主色板或取色记录一键生成 CSS 变量 / JSON / Tailwind 代码，复制即可进项目。
-
对比度标注
每个色块标出与黑 / 白文字的最佳 WCAG 对比度（AA / AAA），一眼判断能否当背景。
-
取色放大镜
取色笔悬停时弹出跟随光标的像素放大窗 + 十字准星，大图上也能精确对到单个像素再取色。
-
鲜艳度过滤
用最低饱和度与明度区间筛掉发灰、过暗或过亮的主色，只留鲜艳且合适的颜色。
-
近似中文色名
每个颜色就近标出传统色名（如靛蓝、珊瑚红、苔绿），复制与色卡图都可携带，沟通更好描述。
-
色彩调和建议
以任意基色按互补 / 类比 / 三角 / 分裂互补生成搭配色，点建议色即可加入取色记录。
-
纯本地隐私
读取像素与聚类全在浏览器内存进行，图片绝不上传，关闭即清除。
操作流程简述
- 上传图片
拖拽、点击选择或 Ctrl + V 粘贴一张图片。
- 查看主色板
自动提取主色，拖动「主色数量」滑块调整配色精细度。
- 取色笔取样
开启取色笔，点击图上任意位置读取精确色值并入记录。
- 复制 / 导出
点色块复制 HEX，或导出一张色卡图保存整套配色。
怎么用更合适
- 设计配色参考
从喜欢的海报、插画里提取主色板，作为自己作品的配色起点。
- 品牌还原品牌色
对 Logo 或参考图取色，得到接近的 HEX 值用于物料制作。
- 电商商品主色归类
提取服装、家居商品图的主色，用于分类标签与陈列搭配。
- 学习临摹与赏析
分析大师作品、风景照的色彩构成，直观看到用了哪几种色。
常见问题
- 图片会上传到服务器吗？
- 不会。读取像素、提取主色与导出色卡全部在浏览器本地完成，关闭页面后内存数据自动清除。
- 主色板是怎么算出来的？
- 采用经典的中位切分法（Median Cut）：把图片降采样后按颜色分布递归切分成若干簇，取每簇平均色并按占比排序，得到最有代表性的主色。
- 取色笔的颜色准吗？
- 取色笔读取的是预览像素的真实 RGB，对 JPG / PNG 等常规图片即为原图对应点的颜色；若预览因超大图被等比缩小，取到的是缩放后该位置像素。
- 支持透明背景吗？
- 提取主色时会忽略完全透明的像素，只统计可见颜色；带 Alpha 的边缘按可见色处理。
- 能复制成 RGB 或 HSL 吗？
- 能。在侧栏「色值格式」选 HEX / RGB / HSL，之后点任意色块复制或「复制全部色值」都会按所选格式输出。
- 主色板可以按色相排列吗？
- 可以。用「主色排序」切换按占比、按色相（光谱）或按亮度（亮到暗）排列，预览色板与导出的色卡图都会同步该顺序。
- 色块上的小徽章是什么意思？
- 那是该颜色与纯黑或纯白文本的最佳 WCAG 对比度：≥7 标 AAA、≥4.5 标 AA、否则标「低」，用来判断把该色当背景时文字是否够清晰。
- 能导出成代码或直接复制取色记录吗？
- 能。「代码导出」可把主色板或取色记录生成 CSS 变量 / JSON / Tailwind 文本一键复制；取色记录区也能「复制全部」或「导出色卡图」，与主色板一致。
- 色块上的中文名称是怎么来的？
- 那是就近匹配出的近似色名：把颜色与一份常用中文色名表（黑、灰、靛蓝、湖蓝、珊瑚红…）比对，取最接近的名字，仅供参考、不代表精确色号。默认复制仍输出纯色值，可在侧栏勾选「复制时附带色名」。
- 调和建议的色是怎么算出来的？
- 以你选的基色在色环上按规则旋转得到：互补为 +180°，类比为左右各 30°，三角为 +120° 与 +240°，分裂互补为 +150° 与 +210°，建议色沿用基色的饱和度与明度。点任意建议色即可加入取色记录，进而复制、导出色卡或生成代码。
- 取色时的放大镜是做什么的？
- 开启取色笔后，光标在预览图上移动会出现一个跟随的放大窗，把光标附近若干像素放大成网格并用十字准星标出当前像素，下方同时标注该像素的色值与坐标，方便在大图上精确对到单个像素再点选；键盘方向键移动取样点时也会同步更新放大窗。
- 鲜艳度/明度过滤是做什么的？
- 侧栏「鲜艳度过滤」用最低饱和度与明度区间筛掉主色板里发灰、过暗或过亮的颜色，只留下符合区间的鲜艳主色；过滤结果会同步到排序、导出色卡与代码导出，但不会改动你的取色记录。把最低饱和度设为 0、明度区间设为 0–100 即不过滤。
隐私与安全
刃图取色工具不设账号、不上传图片。像素读取与配色分析均在本机完成，全站 HTTPS + CSP。更多见隐私政策与使用条款。
相关工具
取到配色后想处理图片？用图片改尺寸统一分辨率；图片压缩给图片瘦身；图片加水印保护版权；边框 / 圆角做卡片排版；框选切图用图片裁剪与分割，同一套本地优先原则。
延伸阅读
平台尺寸与格式选择指南，可直接查表。