配色提取器
从任意图片中提取主色，点击复制 HEX。生成精美的配色卡片用于分享。100% 私密
什么是配色提取器？
配色提取器会分析图片的像素数据，识别其中最主要、视觉上最显著的颜色。结果是一组精炼的颜色（通常 3-10 个），并附带 HEX、RGB、HSL 数值，可直接用于设计、品牌物料和创意工作流。
对设计师、营销人员和内容创作者来说，配色提取至关重要 — 它能保证项目里的视觉一致性。相比手动用吸管工具采样，算法可以快速锁定定义图片情绪和美学的关键颜色，节省大量手工劳动。
9grid 的提取器完全在浏览器中运行，使用 JavaScript 和 Canvas API 在本地分析图片，保证完全的隐私安全。
提取出来的配色能做什么？
常见用途如下：
- 网页与 UI 设计: 从灵感图、参考照、竞品页面里提取色彩方案，HEX 直接拷进 CSS 或 Figma。
- 品牌识别: 从已有品牌物料里采样精确颜色值，让印刷和数字渠道保持统一。
- 社交内容: 下载配色卡片直接发到 Pinterest、Instagram、小红书 — 配色帖在视觉平台一直表现稳定。
- 时尚穿搭: 分析穿搭照、秀场图、灵感图找到互补色，用于服装搭配和当季趋势研究。
- 室内设计: 从空间灵感图或材料样本里提取配色，指导刷漆、家具、装饰决策。
- 艺术摄影: 研究画作、照片、电影帧的色彩构成，为自己的视觉风格找灵感。
可分享的配色卡片
三种设计精良的版式可一键生成可分享的配色卡片图：
- 横版: 宽幅 Banner，原图与色块并列 — 适合 Pinterest 钉图和博客文章。
- 竖版: 细长侧边栏式 — 适合 Instagram Story、手机壁纸、PPT。
- 方格: 图片与色块紧凑排列的方形 — 适合 Instagram 信息流和缩略图。
色彩理论小知识
理解一些基础色彩关系可以让配色用得更好：
- 互补色: 色轮上相对的颜色（例如蓝与橙）。对比强烈，适合做 CTA。
- 相邻色: 色轮上相邻的颜色（如蓝、蓝绿、绿）。配色和谐，给人平静感。
- 三角色: 色轮上等距的三种颜色。生动多变又保持平衡。
- 暖色 vs 冷色: 暖色（红橙黄）传达活力，冷色（蓝绿紫）传达冷静专业。
把照片配色做成可发布的色板系统
提取五到八个色块，再分配角色：一个主背景、一个行动号召强调色、一个正文中性色、一个徽章或头像边框高光。先写清角色，活动才不会漂成六个略有差别的蓝。
把可分享配色卡片发到 Pinterest 或放进客户 PDF，再把 HEX 用到免裁剪垫底和头像边框。同一组拍摄之后做成 Instagram 3×3 时，切片会更统一，因为配套图形已经说同一种颜色语言。
摄影师和独立品牌往往从主产品图提取，而不是从情绪板拼贴提取。从产品像素来的色板，在朋友圈和小红书压缩后更站得住，因为它本来就存在于你要发布的画面里。
如何从图片提取配色
上传一张照片即可获取 5-8 个主色调（HEX / RGB），以及一张可分享的配色卡。
- 上传图片 — 拖入 JPG、PNG 或 WebP，所有操作都在浏览器中完成。
- 等待分析 — 对一般照片，主色提取在不到一秒内完成。
- 复制 HEX — 点击任一色块即可复制 HEX、RGB 或 HSL 值到剪贴板。
- 下载配色卡 — 生成 1080×1080 的可分享配色卡片，用于 Pinterest、Instagram 或灵感板。
常见问题
提取算法是怎么工作的？
工具会对图片像素采样，并使用 K-means 聚类（或 median-cut 量化）算法把相似颜色聚成一组，最大的几组就成为主色调。
可以拿到某个像素的精确 HEX 吗？
可以。鼠标悬停色块查看 HEX / RGB / HSL，或使用图上吸管对准任意像素采集。
配色卡可以自由使用吗？
可以。配色卡可任意下载、发布到 Pinterest、Instagram、Behance 等平台，无需署名。
图片会被保存吗？
不会。所有颜色分析都在浏览器中完成，图片不会上传到服务器。
可以从截图或数字插画里提取颜色吗？
完全可以。照片、数字插画、截图、UI 设计、画作、渐变都行。色块清晰的数字作品提取精度更高。
应该提取多少种颜色？
多数设计项目用 5-6 种比较平衡；极简风用 3-4 种；分析画作等复杂图像可用 8-10 种以覆盖更多色调。