跳到主要内容

免费图片配色提取工具

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

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

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

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

拖入文件或点击浏览

等待文件中

先添加一个文件再开始。

原始大小

-

颜色数量

-

主色

-

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

提取出的调色板

等待文件中

CSS 变量

:root {
}

调色板 JSON

[]

调色板如何采样

图像被绘制到一个小 canvas 上,读取其像素,并对颜色进行分组,使主导颜色浮到顶部。从缩小副本采样是刻意的:它让 4000 万像素的照片保持快速分析,并防止一个嘈杂的角落主导结果。所有这些都在本地运行,因此品牌资产和未发布的作品永远不会被上传。

你会得到可以直接粘贴到样式表或设计 token 文件中的十六进制代码。

解读你提取的调色板

提取的颜色是起点,而不是完成的系统。照片的主导颜色是摄影性的:它们承载了该特定图像的光线和氛围,这往往与可用界面调色板所需的正相反。将输出视为图像所含内容的证据,然后有意识地选择可访问的配对。

发布前检查对比度。在色板行中看起来悦耳的颜色配对,仍可能无法满足正文文本的可读性阈值,而用作按钮标签颜色的提取强调色,与其背景的对比度可能远远不够。

何时提取是错误的工具

如果目标是匹配现有品牌系统,请从品牌文件采样,而不是随机照片。如果目标是完整的设计系统,提取给你的是色相,而不是你实际需要的浅色、深色、间距或语义角色。用它来为决策提供信息,而不是替你做决策。

小提示

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

下一步:把静态照片变成视频

上面这些工具都在你的浏览器里运行,完全免费。文件准备好之后交给 Animate AI:上传一张照片,选一个动作预设,就能拿回一段短视频。积分是预付的,开始前你能看到确切价格。

接下来可以看哪些页面

每种工作流、浏览器工具和定价说明都有独立页面。按你手头已有的素材,选一个开始。