从图片提取配色。
选一张图片，按占比从高到低列出它的主色和 HEX 色值，直接就能复制。全程在浏览器里运行，图片不会离开你的设备。
选择一张图片，看看它的主色。
在你的浏览器里运行，放进来的内容不会上传，也不会保存。
怎么从图片提取颜色
- 选择一张图片，或者直接拖到上面的框里：照片、你喜欢的设计截图、Logo 或设计稿都可以。
- 设置颜色数量，5 到 8 种，默认 6 种。
- 查看配色。 主色按占比从高到低排列，每种颜色都标出它在图片里的占比和 HEX 色值。
- 复制单个 HEX 色值，或者一次复制全部色值（用逗号分隔）。点一下图片就能换一张。
从配色到 DESIGN.md，再到 Codex
光有一组颜色，Codex 并不知道哪种颜色该用在哪里。给每种颜色分好工，写下来一次，Codex 设计的每个界面就都会用同一套配色：
- 从参考图里提取颜色：一张氛围照片、品牌图片，或者你喜欢的某个设计方向的截图。
- 给每种颜色分配角色。 占比可以帮你判断：面积大的浅色通常做背景（
neutral），深色做文字（on-surface），醒目的颜色做主要操作（primary），小面积的点缀色做secondary或tertiary。 - 用对比度检测检查文字和背景的搭配。 直接从照片里取的颜色，常常要调深或调浅一点，上面的文字才看得清。
- 把 HEX 色值填进 DESIGN.md 生成器，补上字体和间距，把文件保存到项目根目录。
- 在 AGENTS.md 里指向它，写法见 DESIGN.md 指南。之后 Codex 就会沿用这套颜色，不会每个界面都挑新的。
如果想让 Codex 来分配角色，把色值贴进提示词：
从配色生成 DESIGN.md
这是我们参考图里的主色：[粘贴 HEX 色值]。把它们分配到 DESIGN.md 的颜色角色上：primary、on-primary、secondary、tertiary、neutral、surface 和 on-surface。确保 on-primary 在 primary 上、on-surface 在 surface 和 neutral 上的对比度都至少达到 4.5:1；达不到的，保持色相不变，调整明暗。然后把这些颜色写进仓库根目录的 DESIGN.md。
常见问题
免费吗？
免费，不用注册，想试多少张图片都可以。
图片会上传吗？
不会。图片由你的浏览器在本机读取和分析，不会发送或保存到任何地方。网站只统计工具被用过，不会记录图片。
它是怎么挑出这些颜色的？
先把图片缩小到最长边不超过 160 像素（提取颜色已经足够），再把相近的像素归成几组，给出每组的平均色和它在图片里的占比。小面积的点缀色只要和其他颜色区别明显、占到图片的 0.5% 以上，就会单独列出来；边缘上过渡混合的像素则不会。透明区域会被忽略，同一张图片每次得到的配色都一样。
为什么颜色比我设置的数量少？
图片里明显不同的颜色没有那么多。比如只有几种颜色的扁平 Logo，提取出来的颜色就可能少于你设置的数量。