PPT 被批配色刺眼
给客户汇报前，总监说上一版配色太跳，红绿对比让数据页像节日海报。只剩 20 分钟重调。把主色 #004080 输入工具，勾选「类比」模式，输出三组相邻色：深蓝 + 灰蓝 + 浅青。替换后页面统一，数据标签用浅青高亮，总监直接过稿。
基 色Base Color · 拖色轮改色相
和 谐 规 则Harmony Rule
色 卡Swatches · 点色块复制 · 锁定 / 微调
灵 感 预 设Gallery · 含中国传统色起色
QUANBAO · COLOR SCHEME
所见即所得的配色预览
这是一段示例正文，用于检验方案在标题、正文、背景与按钮上的实际观感。配色直接来自左侧色卡，调整即时反映在此。
主按钮
次按钮
文字对比度 · WCAG 正文 4.5 / 大字 3.0
就绪 · 按和谐规则从基色生成配色方案 · 全程浏览器本地处理
第一节
关于本工具
About调色时最怕的不是选错颜色，而是补色选成邻近色、分裂互补拆成三色——色轮上几度偏差，成品视觉就完全走味。输入一个主色，工具按色相角精确算出互补、三色、类比、单色、分裂互补五套方案，每套输出十六进制色值。计算只在浏览器里跑，配色数据不上传服务器，截图后直接取用。
使用场景
电商主图被平台降权
店铺上新一款深咖色大衣，主图背景用了相近的棕色调，平台算法判定「主体与背景边界模糊」，曝光量腰斩。把大衣主色 #5C3A21 输入工具，选「互补」模式，得到 #216E5C 的蓝绿色背景。替换后主体轮廓清晰，点击率从 1.2% 回升到 3.8%。
室内软装选窗帘撞色
客厅墙面刷了浅灰 #E0E0E0，沙发选了深蓝 #1A237E，窗帘拿不定主意。用工具选「单色」模式，输入沙发色，得到三档明度变化。选了中间档 #3949AB 的灰蓝窗帘，和墙面、沙发形成渐进的层次感，没有新增色相，空间不乱。
品牌 VI 手册缺辅助色
公司标准色是橙色 #FF6F00，但做表格和图标时只用橙色太单调。用工具「分裂互补」模式，输入主色后得到橙 + 蓝紫 + 蓝绿三组色。把蓝紫 #7B1FA2 分给图标，蓝绿 #00897B 分给数据强调色，手册从 2 页扩到 6 页，设计组不再自己瞎配。
婚礼请柬被长辈嫌素
选了莫兰迪灰粉 #D4A5A5 做请柬主色，长辈说「像丧事」。用工具「互补」模式，输入灰粉得到浅橄榄绿 #A5B4A5 作为边框色，再把灰粉明度拉高两档变成 #F2D7D7。新版请柬整体柔和但有对比，长辈看了说「喜庆又雅致」，省去重印 300 份的成本。
第二节
使用指南
Getting Started使用步骤
- 1点击色盘或输入十六进制色值（如 #FF5733）选定主色，右侧预览区即时显示该色
- 2在「配色模式」下拉菜单中选「互补」「三色」「类比」「单色」或「分裂互补」，下方自动生成对应色板
- 3鼠标悬停色板中任一色块，色块上方浮出该色的十六进制码，点击即复制到剪贴板
- 4拖拽主色盘上的取色圆点调整主色，所有关联色块同步刷新，无需重新选择模式
输入输出示例
| 输入 | 输出 | 说明 |
|---|---|---|
| #336699（主色） → 互补色 | #CC9966 | 常规：中饱和度蓝色，互补色为暖橙色，验证基础色相轮 180° 计算 |
| #FF0000（主色） → 三色 | #00FF00, #0000FF | 常规：纯红的三色方案得到绿和蓝，验证 120° 均匀分割，也是 RGB 三原色的典型 case |
| #FFFFFF（主色） → 单色 | #FFFFFF, #E6E6E6, #CCCCCC, #B3B3B3, #999999 | 边界：纯白作为主色，单色方案亮度递减，验证工具对明度极限值的处理（不会输出纯黑或溢出） |
| #000000（主色） → 类比色 | #000000, #1A1A1A, #333333, #4D4D4D, #666666 | 边界：纯黑主色，类比色仅亮度变化，验证工具在色相为零时是否仍能生成有区分度的色阶 |
| #123456（主色） → 分裂互补 | #561234, #345612 | 易错：低饱和度、低明度的颜色，分裂互补的两个颜色容易与主色混淆，验证工具是否生成视觉可辨的色值 |
| #808080（主色） → 互补色 | #808080 | 易错：中性灰（50% 灰）的互补色是其自身，验证工具是否正确处理无彩色（灰阶）的色相环映射 |
| #00FF00（主色） → 三色 | #FF0000, #0000FF | 常规：纯绿的三色方案与纯红、纯蓝构成 RGB 色轮，验证工具对高饱和度颜色的对称性计算 |
常见错误对照
1.互补色选错基准色，导致配色方案不协调
✗ 错误
选择 RGB(255, 0, 0) 作为基准色，期望得到互补色为绿色✓ 修复
选择 RGB(255, 0, 0) 作为基准色，互补色为 RGB(0, 255, 255)（青色）互补色是基于色相环上 180° 对立的颜色，红色（0°）的互补是青色（180°），而非绿色（120°）。色相环模型（如 HSV/HSL）中，补角计算依赖色相值，而非直观的 RGB 分量反转。
2.三色配色中误用等边三角形，忽略色相偏移
✗ 错误
基准色 #FF0000，三色方案直接取 #00FF00 和 #0000FF✓ 修复
基准色 #FF0000（色相 0°），三色方案应取色相 120° 和 240° 对应的颜色，如 #00FF00（120°）和 #0000FF（240°）三色配色要求色相在色环上均匀分布（间隔 120°），而非简单取 RGB 主色。RGB 主色（红、绿、蓝）在色相环上间隔 120°，但基准色偏移后，需按色相值精确计算，否则破坏视觉平衡。
3.类比色选取范围过宽，失去调和感
✗ 错误
基准色 #FF6600（橙色），类比色选取 #FF0000（红）和 #FFFF00（黄），色相跨度 60°✓ 修复
基准色 #FF6600（色相 30°），类比色选取色相 15° 和 45° 附近的颜色，如 #FF9933 和 #FFCC00类比色通常取基准色两侧 30° 以内的色相，跨度超过 60° 会引入对比色，破坏柔和过渡。色相环上相邻颜色（如橙→黄橙）才产生和谐渐变，而非直接取原色。
4.单色配色中亮度/饱和度变化不足，导致单调
✗ 错误
单色方案只取 #3366CC 和 #3366CC 的浅色版本（仅降低透明度）✓ 修复
单色方案使用 #3366CC 作为基准，搭配 #1A3D7A（更低亮度）、#6699E0（更高亮度）、#B3D1F5（高亮度低饱和度）单色配色需在色相不变的前提下，系统调整饱和度和亮度（HSL 模型中的 S/L 分量）。仅改变透明度（Alpha）不会改变颜色感知，需同时调整 S/L 值才能产生层次。
5.分裂互补色中误选两个互补色，而非互补色的邻色
✗ 错误
基准色 #FF0000，分裂互补色选 #00FF00 和 #0000FF（两个互补色）✓ 修复
基准色 #FF0000（色相 0°），分裂互补色选色相 150° 和 210° 的颜色，如 #00FF80 和 #8000FF分裂互补色是基准色的互补色（180°）两侧各取 30° 的颜色，而非直接取互补色本身。这样既保留对比又降低冲突，需按色相环精确偏移。
6.输入色值格式错误，导致工具无法解析
✗ 错误
输入颜色值 #FF6600 时写成 'FF6600' 或 '#FF66' 或 'rgb(255, 102, 0)' 但缺少括号✓ 修复
输入 #FF6600（6 位十六进制，带 # 前缀）或 rgb(255, 102, 0)（标准函数格式）工具通常要求严格格式：十六进制必须 6 位（#RRGGBB）或 3 位缩写（#RGB），RGB 函数必须完整。缺少 # 或位数不对会导致解析失败，返回默认色或报错。
7.混淆 HSL 与 HSV 色相值，导致配色偏差
✗ 错误
在 HSL 模式下使用色相 120° 得到绿色，但期望的 HSV 绿色也是 120°✓ 修复
HSL 和 HSV 中色相值相同（0-360°），但饱和度/亮度定义不同。例如 HSL 饱和度 100%、亮度 50% 对应 HSV 饱和度 100%、明度 100% 的纯色HSL 和 HSV 的色相环一致（红 0°、绿 120°、蓝 240°），但 S/L 分量映射不同。若工具同时支持两种模型，需确认当前模式，否则调整 S/L 后颜色会偏离预期。
8.忽略色域限制，选用不可打印/显示的颜色
✗ 错误
选择饱和度 100%、亮度 100% 的纯色（如 #FF00FF）用于印刷设计✓ 修复
印刷设计中使用 CMYK 模式或 sRGB 色域内的颜色，如 #CC3399（饱和度约 80%、亮度约 60%）高饱和度/亮度颜色在 sRGB 色域外或超出 CMYK 色域，屏幕显示和印刷会严重失真。配色方案应优先选择色域内的颜色，避免后期色彩管理问题。
第三节
工作原理
How It Works核心公式
互补色：H₂ = (H₁ + 180°) mod 360°
变量说明
H₁原色在 HSL 色环上的色相角度(0–360)H₂互补色在色环上的色相角度(0–360)
示例
原色色相 H₁ = 45°（橙黄色）：H₂ = (45 + 180) mod 360 = 225°（蓝紫色）。在 HSL 模型中，保持原色的饱和度(S)与明度(L)不变，仅将色相旋转 180°，得到精确互补色。
用户输入
本地处理
输出结果
第五节
常见问题
Q & A问这个配色工具能直接导出 CSS 变量或者色值代码吗？＋
答
本工具主要提供视觉配色方案的生成和预览，输出结果为色值的十六进制代码（#RRGGBB）。你可以直接复制每个色块下方的色值，粘贴到 CSS、Sketch、Figma 等设计工具中使用。目前不提供一键导出 CSS 变量或 SCSS 变量的功能，但色值本身是标准格式，手动整理成变量定义并不复杂。
问我选了一个颜色，为什么生成的互补色看起来跟我想的不一样？＋
答
互补色是基于色相环上 180 度对角的数学计算得出的，它不考虑明度、饱和度和具体色调的细微偏差。如果你选的颜色偏灰或偏暗，计算出的互补色在视觉上可能显得突兀。可以尝试先调整输入颜色的饱和度和明度，或者切换到“类比色”模式，那几种颜色在色环上相近，搭配起来更柔和。
问单色配色是不是就是同一个颜色变深变浅？＋
答
是的，单色配色方案基于你选择的基色，通过调整其明度和饱和度生成一系列颜色。这些颜色在色相上完全一致，只在深浅和鲜艳程度上变化。这种方案非常安全，不容易出错，适合需要保持整体统一、避免杂乱的页面或品牌设计，比如背景、标题、边框的层级区分。
问分裂互补色和互补色到底有什么区别，什么时候用哪个？＋
答
互补色是取色环上正对的两个颜色，对比最强烈，视觉冲击力强，适合做强调或警示元素。分裂互补色则是取一个颜色，然后取它互补色旁边的两个颜色（而不是正对的那个），形成三色组合。分裂互补的对比度没有互补色那么生硬，但比类比色更丰富，更适合在保留一定对比度的同时追求更和谐的视觉感受，比如主色+两个点缀色。
问为什么我输入的颜色在网页上显示和在手机上看到的不一样？＋
答
不同设备的屏幕色域（sRGB、P3 等）和亮度校准存在差异。本工具生成的色值基于标准的 sRGB 色域，这是绝大多数网页和显示器的通用标准。如果你的手机开启了“原彩显示”或“护眼模式”，也会改变屏幕的色温。建议在色彩管理一致的设备上（如校准过的显示器）进行关键配色决策，并参考色值本身，而非完全依赖屏幕观感。
问我随便点了一个颜色，生成的结果里有个颜色特别刺眼，怎么办？＋
答
刺眼通常是因为生成的某个颜色饱和度过高，与基色或背景形成过于强烈的反差。你可以尝试以下方法：1. 在输入颜色时，选择一个饱和度稍低、明度更柔和的颜色作为起点；2. 查看生成结果后，手动记下刺眼颜色的色值，在工具中重新输入该色值，然后选择“单色”模式，从它的同色系中挑一个更柔和的版本。
问这个工具生成配色，能用在打印（CMYK）上吗？＋
答
本工具生成的色值是基于屏幕显示的 sRGB 十六进制色码，而印刷品使用 CMYK 色彩模式。sRGB 色域比 CMYK 广，屏幕上一些鲜艳的颜色（如亮荧光色）在印刷时无法还原，会变暗淡。建议将生成的色值作为设计参考，在 Adobe 系列软件或专业配色软件中转换成 CMYK 值，并打印色卡确认最终效果。
问选择颜色的时候，有没有办法输入具体的色号，比如潘通号？＋
答
本工具目前只支持通过拾色器直接选取颜色，或者手动输入标准的十六进制色值（如 #FF5733）。不支持直接输入潘通（Pantone）色号、RAL 色号或其他专色编码。如果你有潘通色号，可以先在网络上查找到对应的十六进制近似值，再输入到工具中进行配色方案的生成。
问我选了颜色，但生成的四五组配色方案看起来都差不多，是不是出 bug 了？＋
答
不是 bug。如果输入的颜色本身偏中性（比如纯灰、米白、黑色），或者饱和度极低，那么基于色环计算出的互补色、分裂互补色之间的差异会很小，因为它们都围绕在色环的同一小段区域。建议换一个饱和度较高、色相明确的颜色（比如正红、亮蓝）作为起点，就能看到不同配色方案之间的明显区别。
隐私保证所有计算与处理均在你的浏览器本地完成，输入数据不会上传服务器，也不会保存或共享。