邻近色颜色方案生成器：固定步长生成邻近配色

使用方法

1. 打开页面默认就带示例：基础色 #3498db、步长 30，方案区已经显示五个邻近色，你不需要先输入任何东西。
2. 把基础色填成任意六位十六进制（如 #e74c3c），步长填 1 到 180 的整数；相同输入必然得到同一方案。
3. 在任意输入框里按回车也能立即生成，不必点按钮；结果区是当场算出来的，不是固定文案（但同一组输入结果恒定）。
4. 点「生成方案」按钮，页面把基础色转成 HSL，按步长偏移色相并保持 S/L，再转回十六进制；点「复制方案」把五个颜色复制到剪贴板。
5. 基础色格式不对或步长越界时，会点名当前字段提示你修正，不会硬凑出一个错误颜色。
6. 本页不联网、不写本地存储，刷新即回到默认示例，所有转换都在你自己的浏览器里完成，输入内容不会离开设备。

这个 邻近色颜色方案生成器 能解决什么

这个生成器 解决的是「想要一组协调、不刺眼、又确定可复现的配色」这个具体需求。手工在色环上找邻近色很容易偏色，也不同人做出的不一致；本工具按固定步长偏移，同样的输入永远得到同一组，方便分享与复核。

第一类用途是网页与产品主题。做一套按钮、标签、提示色时，常需要一个主色加几个邻近辅助色，本工具一次给出，复制即用，风格统一。

第二类用途是图表与数据可视化。折线、柱状、地图分级常常需要一组相近又不混淆的色，本工具按步长铺开色相，既协调又便于区分。

第三类用途是海报与幻灯片。做封面、配图时，邻近色比互补色更柔和，本工具快速产出一组可落地色值，省去在取色器里反复试。

第四类用途是教学演示。讲 HSL、色相环、饱和度与明度时，这组色是直观又便宜的样例，配合下方对照表能看到不同步长对应的方案。

第五类用途是品牌与运营物料。活动专题页需要主色加衍生色，用固定步长保证每次产出一致，便于多页面保持视觉统一。

第六类用途是图标与插画。给一组图标配邻近色，既能区分又能成系，本工具批量产出，效率比手调高。

第七类用途是暗色模式适配。基础色确定后，用邻近色延伸出同系深浅，便于做深浅两套主题，保持品牌感。

第八类用途是算法作业对照。学生做颜色空间转换实验时，把本页同一基础色的五个值抄去对照自己的实现，能快速发现 HSL 与 RGB 互转是否写错。

第九类用途是渐变与图表配色。做图表系列、热力图分级时，邻近色既区分又成系，本工具按步长铺开色相，省去在取色器里反复试错，输出直接可用。

第十类用途是品牌延展。主色确定后，用邻近色生成同系深浅，便于做深浅双主题，保持品牌一致感，也方便交付给不同页面复用。

第十一类用途是插画与界面的细节着色。给图标、标签做同系微差色，既能区分层级又统一风格，本工具批量产出比手调更高效，结果也容易回放。

值得一提的是，本页所有计算都在本地完成，不联网也不上传。你可以放心填入任意颜色，结果不会被任何服务器记录，这点和需要登录的在线取色站不同。

原理和变量

邻近色颜色方案生成器 的核心是「HSL 色相偏移加回 RGB」，同一组输入必然得到同一方案，可被手算复核。先把基础色由十六进制转成红绿蓝，再转成色相、饱和度、明度（HSL）；以基础色相为中点，分别取 0、减一步长、加一步长、减两步长、加两步长五个色相，饱和度与明度保持不变；再把每个色相转回红绿蓝与十六进制。由于只动色相，得到的颜色天然邻近、协调。

为什么要保持饱和度与明度不变？因为只偏移色相得到的颜色在色环上相邻，观感最协调；若同时改 S/L，容易跑偏成不相关的颜色。下面变量表说明各环节含义，方便你对照手算。

完整示例

下面这组示例全部由页面算法原样得出，可直接对照你的手算。基础色 #3498db、步长 30：先把 #3498db 转成 HSL，色相约 207 度、饱和度约 0.70、明度约 0.54；取色相 207、177、237、147、267 五个值并保持 S/L，再转回十六进制，得到 #3498db、#34dbcb、#3444db、#34db77、#7734db 五个邻近色。与上方方案区、下方卡片和对照表完全自洽，相同输入必然复现，可逐色复核。

如果你想验证手算，只要按「十六进制转 HSL、偏移色相、HSL 转十六进制」三步，必然和本工具一致。这套 HSL 偏移法也是你在不支持本页的环境里手动或写脚本复现结果的可靠办法。

示例输入：基础色=#3498db，步长=30
#3498db  #34dbcb  #3444db  #34db77  #7734db

基础色方案对照表

下表列出几组基础色对应的邻近方案（共 14 行），前 12 行直接展示，点「加载更多」展开剩余项。你可以一键导出 CSV（带 BOM，Excel 直接认中文）或复制 TSV 粘进表格软件。表里所有结果都由本页同一算法得出，可复现、可复核。

结果边界与错误提示

• 基础色为空或不是六位十六进制时，提示「基础色不合法：请输入形如 #3498db 的六位十六进制颜色」，页面不会自作主张编出一个错色。
• 基础色少了开头的井号但其余六位合法时，提示你补全井号，避免误把八位或三位色当六位处理。
• 步长为空、不是整数或不在 1 到 180 时，提示「步长不合法：请输入 1 到 180 的整数度」，避免偏移过度跑出色环。
• 步长过大会让相邻色相差很远，本工具仍按公式生成，但结果可能不再「邻近」，这是预期行为而非错误。
• 结果区与错误区都带 role="alert" 语义，内容一变就会被屏幕阅读器播报；所有生成本地完成，不联网也不写存储，刷新即还原默认示例。
• 同一组基础色与步长必然得到同一方案，这是固定算法特性，并非缓存；改输入才会改结果。
• CSV 导出在文件头写入 UTF-8 BOM（\ufeff），Excel 打开中文不会乱码；TSV 复制是纯制表符分隔文本，粘进任意表格软件都会自动分列。
• 本工具只做色相偏移，不对颜色做任何含义解释；若需要对比度适配，请另行做可读性检查。

常见问题

相关工具

• RGB 转十六进制：颜色格式互转，和本工具同属颜色工具。
• 十六进制转 RGB：把十六进制颜色拆成红绿蓝分量。
• 颜色对比度检测：检查前景背景色对比度是否达标。