已提取调色板
点击色块复制 HEX，或复制整套调色板的 CSS 变量和 JSON。
已复制到剪贴板。
上传一张图片来提取调色板。
:root 本地运行的图片色彩工具
图片调色板提取器 从任意图片提取颜色
上传照片、Logo、截图或插画，提取可用于项目的 HEX、RGB、HSB、OKLCH、CSS 变量和 JSON 调色板。
图片会通过浏览器 Canvas API 在本地处理，不会上传到 Palette Lab。
图片调色板提取器工作区
把图片拖进调色板提取器，选择 5-10 个主色，然后复制适合设计或前端工作流的输出格式。
为什么图片调色板提取器对设计师有帮助
图片调色板提取器最有价值的地方，是把一张图快速转成可以立刻复用的颜色格式。
如何使用图片调色板提取器
图片调色板提取器的流程很短：上传、检查、复制，如果需要，再到你的设计工具中继续微调。
01
02
选择图片调色板提取器的颜色数量
品牌调色板可以用 5 个颜色；如果照片、插画或 UI 截图变化更多，可以选择 8-10 个颜色。
MVP 使用轻量的浏览器聚类算法，让工具保持快速和私密。
03
复制图片调色板提取器输出
点击任意色块复制 HEX；当你需要结构化输出时，可以复制整套 CSS 变量和 JSON。
如果你在现代 CSS 工作流里调整感知亮度和色度，可以参考 OKLCH 值。
复制调色板图片调色板提取器输出格式
Palette Lab 图片调色板提取器关注设计师和开发者真正会复制到项目里的颜色格式。
图片调色板提取器 HEX 值
复制 CSS、Figma、设计工具和品牌规范中最常见的六位 HEX 值。
图片调色板提取器 RGB 值
当你需要 Canvas、JavaScript 色彩计算或 CSS rgb() 时，RGB 输出更方便。
图片调色板提取器 HSB 值
通过色相、饱和度和亮度理解每个提取颜色的视觉特征。
图片调色板提取器 OKLCH 值
OKLCH 可以作为现代颜色参考，用来观察感知亮度、色度和色相。
图片调色板提取器 CSS 变量
复制一段现成的 :root 变量，快速用于网站原型和设计 token 实验。
图片调色板提取器 JSON
当你想在构建工具或应用代码中继续处理调色板时，可以使用结构化 JSON。
图片调色板提取器 FAQ
为使用 Palette Lab 图片调色板提取器的设计师、艺术创作者和前端开发者准备的常见问题。
图片调色板提取器如何工作？
Palette Lab 图片调色板提取器会在浏览器中采样可见像素，把相似颜色聚类，然后返回最主要的调色板颜色。
图片调色板提取器会上传图片吗？
不会。图片调色板提取器使用浏览器 Canvas API 在本地运行，你选择的图片不会上传到 Palette Lab 服务器。
图片调色板提取器支持哪些格式？
工具支持浏览器常见可解码图片，例如 JPG、PNG、WebP 和 GIF。不同设备的浏览器支持可能略有差异。
图片调色板提取器的输出可以用于 CSS 吗？
可以。Palette Lab 会生成可复制的 CSS 变量，并提供每个颜色的 HEX、RGB、HSB、OKLCH 和 JSON。
用图片调色板提取器处理你的下一张图
把截图、Logo、插画或照片拖进来，快速转成实用调色板。
然后复制 HEX、CSS 变量或 JSON，继续你的设计和开发工作。
图片调色板提取器免费、私密，并且在浏览器中运行。