通过HSL色彩模型在色相环上等距分配颜色（如5个数据项每72°取一色），固定饱和度（60%–80%）和亮度（50%–70%）以提升视觉区分度，同时避开红绿色盲敏感组合，改用蓝、橙、紫等易辨色并结合图案或标签增强可读性，有效改善图表颜色辨识问题。
图表颜色难以区分，往往是因为颜色之间的视觉差异太小，尤其是在数据系列较多或显示设备色彩表现有限的情况下。使用HSL（色相、饱和度、亮度）色彩模型可以帮助我们系统性地调整颜色，让不同数据系列在视觉上更清晰可辨。
理解HSL色彩模型的优势
HSL将颜色拆解为三个直观维度：
- 色相（Hue）：决定颜色的基本类型，如红、绿、蓝等，取值范围为0–360°，形成一个色轮。
- 饱和度（Saturation）：颜色的鲜艳程度，0%为灰色，100%为完全饱和。
- 亮度（Lightness）：颜色的明暗程度，0%为纯黑，100%为纯白。
相比RGB，HSL更适合手动调节颜色，因为你可以固定饱和度和亮度，只改变色相来生成一组协调且易区分的颜色。
通过色相轮均匀分布颜色
当图表中有多个数据系列时，可以通过在色相环上等距取值，确保每种颜色在视觉上有足够差异。
立即学习“前端免费学习笔记（深入）”；
例如：若有5个数据项，可将色相按 360° / 5 = 72° 的间隔分配：- 第一项：hsl(0, 70%, 60%) → 红色系
- 第二项：hsl(72, 70%, 60%) → 黄绿色系
- 第三项：hsl(144, 70%, 60%) → 绿色系
- 第四项：hsl(216, 70%, 60%) → 蓝色系
- 第五项：hsl(288, 70%, 60%) → 紫色系
这样生成的颜色在色相上均匀分布，避免了相近颜色（如浅蓝和浅绿）混淆的问题。
保持一致的饱和与亮度提升可读性
为了保证整体风格统一，建议对所有系列使用相同的饱和度和亮度值：
- 推荐饱和度在60%–80%之间，既鲜明又不刺眼。
- 亮度控制在50%–70%，避免过亮或过暗导致对比不足。
如果某些颜色在背景上不够清晰（比如黄色在白色背景上），可以微调其亮度或添加边框增强识别。
考虑色盲友好配色
约8%的男性存在不同程度的色觉障碍，尤其是红绿色盲。即使你用色相区分颜色，也要避免仅靠红绿对比传递信息。
改善方法包括：- 避开红色（hsl(0...)）与绿色（hsl(120...)）直接对比。
- 改用蓝色、橙色、紫色等更易区分的组合，如 hsl(210), hsl(30), hsl(270)。
- 结合图案、标签或图例文字辅助识别。
基本上就这些。用HSL控制色相分布，固定饱和与亮度，再兼顾色盲可读性，就能有效提升图表颜色的区分度。不复杂但容易忽略细节。
