用HSL模型等间隔分布色相（H）是图表配色的可靠方法：固定饱和度（S≈70%）和明度（L≈60%–75%），按数据量均分0°–360°色相环，避开红绿盲区，辅以明度/饱和度微调，并用CSS变量实现灵活复用。
用 HSL 色彩模型按色相（Hue）等间隔分布，是让图表颜色既丰富又易区分的可靠方法。关键不是堆砌高饱和度，而是控制好色相步长、保持饱和度（S）和明度（L）稳定，避免视觉冲突或可访问性问题。
固定 S 和 L，只调节 H 实现均匀区分
HSL 中，色相 H 是 0–360° 的环形值，人眼对色相变化最敏感。只要把 H 均匀切分（如 5 个数据就取 0°、72°、144°、216°、288°），再统一设为中等饱和度（比如 S: 70%）和适中明度（L: 60%），就能生成一组协调、不刺眼、彼此清晰可辨的颜色。
- 避免用 L=50% 以下（太暗）或 90% 以上（发灰/发白），60%–75% 区间通常更稳
- S 不建议拉到 100%，80% 以内更耐看，也利于色弱用户识别
- 若数据项少（≤4），可跳过红色（0°）附近——它易被误读为“警告”，优先用青、绿、紫、洋红等中性强的色相
绕开色相盲区，手动微调关键色
纯等分有时会撞上色觉障碍者难分辨的区域，比如红-绿轴（约 0°–120°）、蓝-紫过渡（240°–300°）。可以小范围避让或调整：
- 把原本 0°（红）换成 10°（橙红），120°（绿）换成 135°（黄绿），降低混淆风险
- 用在线工具如 Colorblinding 或 Coblis 模拟红绿色盲视图，验证对比是否足够
- 对相邻色差＜30° 的组合，适当加大 S 或 L 差异（如一个 L=65%，另一个 L=55%）来强化区分
配合明度/饱和度做层次补充
当数据超过 8–10 类，单靠色相均分会变拥挤。此时保留 H 主干节奏，再用 L 或 S 做二级区分：
- 前 6 类用 H 等分 + L=60%；后几类复用前面色相，但 L 降到 45%（变暗）或升到 80%（变亮）
- 主系列用 S=70%，辅助线/背景色用同 H、S=30% 的柔化版本，保持系统感
- 禁用纯黑（#000）和纯白（#fff）作图表色——它们破坏 HSL 一致性，且在深色模式下失效
直接写 CSS 变量，方便复用和切换
定义一组 HSL 变量比硬写 HEX 更灵活，主题切换或 A/B 测试时只需改几个数值：
:root {
--chart-hue-step: 60;
--chart-sat: 70%;
--chart-light: 62%;
<p>--c1: hsl(0, var(--chart-sat), var(--chart-light));
--c2: hsl(calc(var(--chart-hue-step) <em> 1), var(--chart-sat), var(--chart-light));
--c3: hsl(calc(var(--chart-hue-step) </em> 2), var(--chart-sat), var(--chart-light));
--c4: hsl(calc(var(--chart-hue-step) * 3), var(--chart-sat), var(--chart-light));
}</p>
后续在 chart 元素中直接 color: var(--c3) 即可，增减类别只需加变量、调 step 值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
