跳到主要内容

免费图片配色提取工具

直接从本地图片提取主色、HEX 色值和可复用配色 token,再去做设计评审或前端交接。

浏览器本地处理,保护隐私

先在本地提取配色和 HEX,再做设计评审或前端交接。

关于这个工具:免费图片配色提取工具

Extract dominant colors and reusable HEX palette tokens from local images in the browser. 无需上传——全部处理都在你的浏览器本地完成,兼顾隐私与速度。

常见用法

  • 做 UI token 交接时用 4-6 色就够,做情绪板时再开到 8 色。
  • 工具会先在本地缩小预览图再采样,所以大图也能更稳更快。

从一张图片里取出真实配色

从作品本身取的配色,才会让页面看起来是「想过的」而不是「拼出来的」。先把真实颜色取出来,再从里面挑一两个当强调色,不要一次全用上。

做一套能用的配色

  1. 1

    先取,再筛

    提取器给的是「出现最多的颜色」,不是一套好配色。它们里大多数只是同一色调的近似值。

  2. 2

    用之前先算对比度

    当色卡好看的颜色,当文字可能根本读不清。要拿它和实际背景算一次对比度。

  3. 3

    只留一个强调色

    一个强强调色配中性色看起来是刻意设计;五个等权重颜色看起来是噪声。

取色常见问题

这能直接给我一套设计配色吗?
它给的是主色。选哪两三个来用属于设计决策,任何提取器都替不了你。
取出来的颜色准吗?
是从真实像素采样的,对「压缩后这张图」是准的,和原始素材可能略有差异。
图片会上传吗?
不会。取色在你的浏览器里完成,图片不会上传到任何服务器。
免费图片配色提取工具
直接从本地图片提取主色、HEX 色值和可复用配色 token,再去做设计评审或前端交接。

拖入文件或点击浏览

等待文件中

先添加一个文件再开始。

原始大小

-

颜色数量

-

主色

-

仅在浏览器本地处理,不上传。

提取出的调色板

等待文件中

CSS 变量

:root {
}

调色板 JSON

[]

小提示

  • 做 UI token 交接时用 4-6 色就够,做情绪板时再开到 8 色。
  • 工具会先在本地缩小预览图再采样,所以大图也能更稳更快。

相关免费工具

Related 3D guides and workspaces