配色和谐度调整工具

让多个颜色搭配更和谐统一 · 基于专业配色理论

明度等级

主色明度范围：40-60 | 背景色明度范围：85-95 | 文字色明度：≤20

主色与配色 *必填

这些颜色将被统一协调，最多添加10个，第一个颜色为主色

支持批量粘贴多个颜色，自动识别逗号、空格、换行等分隔符
建议明度范围：50-60 未添加颜色

背景色 选填

单个背景色，用于检测与主色的协调性

点击添加背景色
建议明度范围：80-95 未设置

文字色 选填

单个文字色，确保与背景有足够对比度

点击添加文字色
建议明度范围：≤25 未设置

关于配色明度协调工具

💡 什么是感知明度协调？

在设计中使用多个不同色相（如红、黄、蓝）时，即使它们的HSL明度相同，人眼感知到的亮度却可能差异很大。例如黄色天生明亮，蓝色天生深沉。

本工具的核心功能：基于人眼感知明度（WCAG 2.0标准），让不同色相的颜色实现视觉搭配和谐。

🎨 三个明度等级

⚖️ 默认（推荐） - 保持原有明度，只统一和谐度
适合所有场景，尊重设计师的明度选择，只让多色相协调统一
☀️ 浅色系 - 感知明度 55-75，清新轻盈
适合清新风格、春夏季主题、女性向设计、美妆母婴类
⚡ 强对比 - 感知明度 20-40，深邃有力
适合高端品牌、科技感、运动风格、秋冬季主题、男性向设计

🚀 如何使用？

  1. 选择明度等级 - 默认/浅色系/强对比（推荐使用"默认"）
  2. 添加主色和辅助色 - 输入1-10个颜色，支持批量粘贴（如：#FF0000, #00FF00, #0000FF）
  3. 选填背景色和文字色 - 可选，用于完整的配色检测
  4. 点击"明度分析" - 查看彩色预览和黑白明度对比
  5. 点击"一键协调" - 自动统一所有颜色的感知明度
  6. 手动微调（可选） - 使用滑块精细调整每个颜色
  7. 应用或导出 - 复制颜色代码或下载配色图

✨ 核心技术特点

  • 感知明度算法 - 基于WCAG 2.0标准，考虑人眼对RGB三色的敏感度差异（绿71.52% > 红21.26% > 蓝7.22%）
  • 以基准色为中心 - 第一个颜色作为基准，其他颜色向它对齐，保持整体明度层次
  • 黑白观察层 - 实时显示颜色在去除饱和度后的真实明度，模拟PS专业流程
  • 智能批量输入 - 自动识别逗号、空格、换行等分隔符，支持从代码、设计工具直接粘贴
  • 场景化调整 - 根据明度等级自动约束范围，或完全保持原有感觉

💼 典型应用场景

  • APP多分类配色 - 多种不同色相需要视觉统一
  • 品牌色系扩展 - 主品牌色衍生出多个辅助色，保持一致性
  • 数据可视化 - 图表、仪表板的多色需要明度协调
  • UI组件库 - 按钮、标签等不同状态色需要统一明度
  • 印刷物料 - 海报、宣传册等多色设计需要视觉平衡

📌 使用建议

  • 首次使用推荐选择"默认"等级，它会尊重你选择的明度，只做协调统一
  • 第一个添加的颜色会作为基准色，其他颜色向它对齐，所以建议把最重要的颜色放第一个
  • 如果想整体调亮配色，选择"浅色系"；想整体加深，选择"强对比"
  • 调整后记得查看"黑白明度预览"，确认明度是否真正统一
  • 对于品牌色系，建议先在"默认"模式下调整，再根据需要切换到其他等级