应使用语义化CSS变量定义图表颜色，如--color-category-product，并在JS中读取转为RGB传入图表库，避免硬编码、动态HSL生成及忽略CSS变量注入。
用 CSS 变量定义语义化颜色名，别直接写 #ff6b6b
直接在图表组件里硬编码十六进制色值，会导致改一个颜色要搜全项目、不同图表间不一致、设计师改品牌色时前端得逐个替换。正确做法是把颜色按语义分层定义在 :root 里，比如 --color-category-a、--color-status-success，而不是 --red-500 这类实现型命名。
示例：
:root {
--color-category-product: 75, 0, 130; /* indigo，主产品线 */
--color-category-service: 186, 85, 211; /* mediumorchid，服务类 */
--color-category-support: 108, 117, 125; /* neutral，支持类 */
}这样后续 SVG 或 Canvas 渲染图表时，可直接用 rgb(var(--color-category-product))，语义清晰，也方便后期批量调整。
多分类颜色必须满足色盲友好 + 高对比度两个硬条件
红绿色盲人群占比约 8%（男性），仅靠色相区分多个类别极易失效。不能只依赖 red 和 green 对比，必须叠加明度差或图案/纹理辅助。
立即学习“前端免费学习笔记（深入）”；
- 优先选用 ColorBrewer 验证过的定性调色盘，如
Dark2或Set2的 RGB 值，它们已通过色觉缺陷模拟测试 - 相邻色块的相对亮度差（Luminance contrast）应 ≥ 1.5:1，可用
getContrastRatio()工具校验 - 在 SVG 图表中，对关键分类可额外加
stroke-dasharray或不同fill-opacity做二次区分
避免在 CSS 中用 hsl() 动态生成多分类色，除非你控制类别数
有人喜欢写 hsl(calc(360 / var(--n) * var(--i)), 70%, 60%) 来“自动分配”颜色，这在类别数固定且 ≤ 6 时可行；但一旦数据动态增减（比如后端返回 12 个分类），HSL 圆环上相邻色会挤在一起，视觉上难区分。
更稳妥的做法是：
- 预设一个长度 ≥ 12 的命名颜色数组（如
--color-category-1到--color-category-12） - 在 JS 渲染逻辑中，按数据顺序取对应变量，超出则 fallback 到灰阶或加边框强调
- 不要让 CSS 承担“分类数不确定”时的颜色计算逻辑
Chart.js / ECharts 等库中，CSS 变量需通过 JS 注入才生效
这些库默认不读取 CSS 变量，fill: rgb(var(--color-category-a)) 在 canvas 上无效。必须把 CSS 变量值转成实际 RGB 字符串传给配置项。
例如 Chart.js：
const getCssColor = (name) => {
const val = getComputedStyle(document.documentElement).getPropertyValue(name);
return val.trim() ? `rgb(${val})` : '#999';
};
<p>const config = {
datasets: [{
backgroundColor: [
getCssColor('--color-category-product'),
getCssColor('--color-category-service'),
getCssColor('--color-category-support')
]
}]
};漏掉这步，再规范的 CSS 定义也白搭——这是最容易被忽略的衔接断点。
