配色方案生成器

从图片中提取颜色或选择基础色,生成和谐美观的配色方案——100% 在浏览器本地运行,免费且私密。

免费使用 →

功能特性

🖼️

从图片提取颜色

上传、拖拽、粘贴或通过 URL 加载图片,使用中位切割量化算法提取主色调,并按占比排序显示。

🎨

6 种色彩和谐方案

基于任意基础色生成单色系、类似色、互补色、分裂互补色、三角配色和四边形配色方案。

🔢

HEX / RGB / HSL 格式

每个色块同时显示三种格式的颜色值,点击即可一键复制。

🖥️

实时 UI 预览

将调色板应用到真实界面示例中预览效果,包含背景、文字、按钮和强调色。

WCAG 对比度检测

内置 AA/AAA 级对比度检测,帮助你保证文字的可读性和无障碍访问性。

📦

多格式导出

导出为 CSS 变量、Tailwind 配置、SCSS 变量或 JSON,也可下载 PNG 色卡图片。

🔒

完全私密

图片通过 Canvas 在本地处理,不会上传到任何服务器。

使用方法

1

选择输入方式

切换到「图片」标签上传照片,或使用「颜色」标签直接选取基础色。

2

确定基础色

点击提取出的色块,或使用拾色器/HEX 输入框设置配色方案的基础色。

3

选择配色方案

在 6 种色彩理论方案中切换,调色板和预览界面会实时同步更新。

4

复制或导出

点击任意颜色值复制,或将整套方案导出为 CSS、Tailwind、SCSS、JSON 或 PNG 图片。

常见问题

配色方案生成器是免费的吗?
是的,完全免费,无需注册,无水印,无使用限制。
我的图片会上传到服务器吗?
不会。所有图片分析均通过 Canvas API 在浏览器本地完成,你的图片不会离开你的设备。
主色调是如何提取的?
图片会被缩放到约 100px,然后使用中位切割颜色量化算法分析,提取最具代表性的颜色并按图片覆盖面积排序。
支持哪些配色方案?
支持单色系、类似色、互补色、分裂互补色、三角配色和四边形配色——均基于色彩理论中的色相关系推导。
支持哪些导出格式?
可复制为 CSS 自定义属性、Tailwind 颜色配置、SCSS 变量或 JSON,也可下载 PNG 色卡图片。
支持哪些图片格式?
支持 PNG、JPG、GIF、WebP 和 SVG,可通过上传、拖拽、剪贴板粘贴或 URL 方式输入。

← 返回 pudone! 首页