将主色提取为 CSS 变量
导入一张图片,直接生成包含其主色的 CSS 变量代码块(:root {}),可直接粘贴到您的样式表中。
将图片拖放到此处,或点击浏览(最大 25 MB)。
工作原理
工具通过直方图分析图片的颜色分布,保留出现频率最高的色调,并按从最主要到最少见的顺序排列。然后,每种颜色会被格式化为带编号的 CSS 变量(--color-1、--color-2 等),放在可直接复制的 :root 代码块中。
可以重命名生成的变量吗?
可以,通用的 --color-N 名称只是一个中性的起点:粘贴到样式表后,请根据实际用途重命名每个变量(例如 --color-primary、--color-accent),让代码更易读。
应该提取多少种颜色?
对于简单的视觉规范,3 到 5 种颜色通常就够了(一个主色、一个强调色,以及一两个中性色调)。如果想为更偏装饰性的用途捕捉照片的全部丰富色彩,则可以选择更多的数量。
100% 本地处理:调色板的提取完全在您的浏览器中进行,您的图片不会上传到任何服务器。