配色方案生成器
支持多种配色方案生成、图片取色、CSS渐变色和阴影效果生成,可单色或批量处理。
【本地执行模式】 : 您的所有数据均在浏览器中处理,不会上传服务器,数据安全有保障。不放心的,可等待页面加载完成后 断网使用!(需提前登录账号)
【速度及稳定性】 : 处理速度由您的机器配置决定。少数工具可能出现无法使用或异常,请使用:批量工具软件版(首页可进入)。或联系技术 wxcwxc1989 处理!
【注意】:软件版和在线版的工具是 不同的。软件版工具更专业,更强大,支持win10/11;在线版更方便,工具数量更多,手机电脑通用。各有千秋!请根据情况选择!
【速度及稳定性】 : 处理速度由您的机器配置决定。少数工具可能出现无法使用或异常,请使用:批量工具软件版(首页可进入)。或联系技术 wxcwxc1989 处理!
【注意】:软件版和在线版的工具是 不同的。软件版工具更专业,更强大,支持win10/11;在线版更方便,工具数量更多,手机电脑通用。各有千秋!请根据情况选择!
工具使用
单色模式
批量取色
RGB: 79, 70, 229
HSL: 243°, 75%, 59%
0%
0%
90°
20px
0px
40%
预览效果
点击上传或拖拽图片到此处
支持 JPG、PNG、GIF、WebP 格式点击图片上的任意位置取色
提取的主色调:
点击上传或拖拽多张图片到此处
支持批量选择,每张图片将自动提取主色调0%
已复制到剪贴板
使用说明
软件使用说明
- 选择基础颜色:使用颜色选择器选取基础色,或直接输入HEX色值(如#4f46e5),也可点击"随机颜色"按钮获取灵感。工具会实时显示RGB和HSL色值信息。
- 选择配色方案:
- 单色配色:同一色相,通过改变饱和度和明度产生变化
- 近似色配色:色环上相邻的颜色,自然柔和
- 互补色配色:色环上相对的两种颜色,对比强烈
- 拆分互补色:基色与其互补色两侧的颜色
- 三元色配色:色环上等距分布的三种颜色
- 四方色配色:四种等距分布的颜色
- 四元色配色:两对互补色,层次分明
- 调整参数:
- 颜色数量:选择生成3、5、7或9种颜色
- 饱和度调整:拖动滑块增减整体饱和度
- 明度调整:拖动滑块增减整体明度
- 生成CSS渐变色:选择线性或径向渐变类型,调整角度参数,即可生成可直接使用的CSS渐变色代码。
- 生成阴影效果:调整模糊半径、扩展半径和透明度参数,生成基于当前基础色的阴影CSS代码。
- 从图片提取颜色:上传图片后,工具自动提取主色调。可点击图片任意位置精确取色,将提取的颜色应用为基础色。
- 批量取色模式:切换到"批量取色"标签页,上传多张图片,设置每张提取的颜色数量和配色方案扩展模式,点击开始批量提取,完成后可下载ZIP包含全部结果。
- 复制和导出:点击任意颜色卡片可复制色值,点击"导出配色方案"按钮可下载包含完整配色信息的JSON文件。
常见问题
答:单色配色适合简洁、优雅的设计;近似色适合自然主题和渐变背景;互补色适合需要强对比的突出设计;三元色适合活泼的儿童产品和艺术创作;四方色和四元色适合复杂界面和数据可视化。根据设计目标选择合适的方案。
答:在"从图片提取颜色"区域上传图片,工具会自动分析并提取8种主要色调。您可以点击提取的颜色选中它,然后点击"使用选中颜色作为基础色"按钮,即可基于该颜色生成完整的配色方案。
答:点击渐变色代码区域的"复制"按钮,将代码粘贴到您的CSS文件中,应用到需要渐变背景的元素上即可。支持线性渐变和径向渐变两种类型,线性渐变可自定义角度方向。
答:批量处理完成后下载的ZIP包含三个文件:palette-summary.json(所有配色数据的JSON汇总)、palettes.css(可直接使用的CSS变量定义)、preview.html(可视化预览页面)。方便在不同场景下使用提取的配色方案。
答:饱和度控制颜色的鲜艳程度,增加饱和度使颜色更鲜艳,降低则使颜色更柔和灰暗;明度控制颜色的亮暗程度,增加明度使颜色更亮,降低则使颜色更深。通过调整这两个参数可以微调整体配色效果。
答:支持JPG、JPEG、PNG、GIF、WebP等常见图片格式。建议使用色彩丰富、对比度较高的图片以获得更准确的主色调提取结果。图片处理完全在本地完成,不会上传至服务器。
答:直接点击任意颜色卡片或色块,对应的HEX色值会自动复制到剪贴板,页面底部会显示"已复制到剪贴板"的提示。在批量结果中,同样点击颜色条即可复制对应色值。