调色板

#4A90D9

#D47F25

#70A5DB

#257BD4

#70A5DB

关于调色板

免费在线调色板工具

调色板工具支持两种模式:配色方案生成和图片调色板提取。在生成模式中,选择一个基色并选择配色规则,即可自动生成一组和谐配色。在提取模式中,上传图片可自动提取主色调,也可以使用取色器精确点选颜色。所有计算在浏览器本地进行。


功能特点

  • 8 种色相环配色规则:单色、互补、类似、三分色、四分色、分裂互补、邻近补色、双分裂互补
  • 上传图片自动提取调色板,支持取色器精确选色
  • 一键导出为 CSS 变量、Tailwind v4、SCSS 变量
  • 锁定/解锁单个颜色,锁定后在重新生成时保持不变
  • 点击色块复制颜色值,支持 HEX/RGB/HSL 三种格式
  • 纯前端离线处理,不上传任何数据

使用方法

  1. 1在「配色生成」模式下,选择入口颜色和配色规则
  2. 2调色板自动生成,可锁定或复制单个颜色
  3. 3切换到「图片提取」模式,上传图片自动提取调色板
  4. 4点击导出按钮一键复制 CSS/Tailwind/SCSS 配置

常见问题

调色板和颜色转换器、颜色取色器有什么区别?
颜色转换器用于 HEX/RGB/HSL 等格式之间的互相转换;颜色取色器用于从屏幕或图片中吸取某个位置的颜色值;调色板则专注于生成一组和谐配色方案,或从图片中提取完整的调色板。
配色方案中的颜色可以单独锁定吗?
可以。每个色块右侧有锁定按钮,锁定后的颜色在重新生成(如修改基色或切换规则)时会保持不变,只替换未锁定的颜色。
哪些配色规则适合设计初学者?
互补色对比鲜明,适合需要视觉冲击的设计;类似色柔和统一,适合品牌和界面设计;单色简洁专业,适合极简风格。三分色和四分色更适合有经验的设计师。
图片提取调色板的精度如何?
使用颜色桶聚类算法,将图片中相近的颜色合并为最多 8 种主色。提取结果会自动过滤透明像素,并统计每种颜色的占比。如果需要精确取色,可以使用取色器模式手动点选。
数据会上传到服务器吗?
不会。所有配色计算和图片处理完全在浏览器本地完成,您的颜色数据和上传的图片不会被发送到任何服务器。
导出的 Tailwind 格式适用于哪个版本?
导出的格式采用 Tailwind CSS v4 的 @theme 自定义颜色语法,可以直接在 CSS 文件中使用 --color-* 变量。

相关工具

图片质量压缩图片黑白化图片调色图片像素化AI 智能抠图换背景GIF 裁剪工具图片水印证件照打印排版证件照裁剪图片切片工具图片信息查看颜色吸取器图片Base64编码转换器表情包制作