在线免费图片取色和调色板提取工具

图片取色和调色板提取工具怎么用

这个在线图片取色工具可以从一张图片中提取主色、辅助色和常用配色，并输出 HEX、RGB、HSL 和 CSS 变量。它适合设计师、前端开发者、运营、品牌视觉维护者和内容创作者使用，用来从海报、产品图、网页截图、Logo、Banner、摄影图片或社媒封面中快速提取配色。

图片读取和颜色分析都在浏览器本地完成，不会上传到服务器。你可以放心处理未发布的设计稿、产品截图、运营素材和内部品牌图。

支持哪些颜色格式

  • HEX：例如 #2F80ED，适合 Figma、CSS、设计标注和品牌色记录。
  • RGB：例如 rgb(47, 128, 237)，适合 CSS、Canvas 和部分设计工具。
  • HSL：例如 hsl(214, 85%, 56%)，适合调整色相、饱和度和亮度。
  • CSS 变量：例如 --palette-1: #2F80ED;，适合直接复制到前端项目。
  • JSON：可以下载完整调色板数据，方便保存、复用或接入脚本。

使用步骤

  1. 上传 PNG、JPG、WebP、GIF 或 BMP 图片。
  2. 工具会自动提取图片主色，并显示每个颜色的占比。
  3. 点击单个颜色可以复制 HEX、RGB 或 HSL。
  4. 调整颜色数量，控制提取多少个主色。
  5. 调整采样步长，步长越小越精细，步长越大处理越快。
  6. 设置 CSS 变量前缀，然后复制整段 CSS 变量或下载 JSON。

适合哪些场景

图片调色板提取适合从品牌 Logo 中整理品牌主色，从产品图中提取电商配色，从运营海报中复用视觉风格，从网页截图中提取 UI 色彩，也适合前端开发者快速生成主题色变量。对于小红书封面、公众号封面、Twitter/X 头图、YouTube 缩略图和 OpenGraph 分享图，也可以先提取主色，再用于标题、背景、按钮和边框颜色。

取色结果为什么可能和肉眼略有差异

图片取色会对像素进行采样和归类，把相近颜色合并成代表色。照片、渐变、阴影、抗锯齿、透明区域和压缩噪点都会影响结果。你可以通过增加颜色数量、降低采样步长、开启忽略透明像素来获得更符合预期的调色板。

如果你需要品牌色或 UI 规范色，建议把提取结果作为初稿，再根据设计规范微调 HEX 值。