数据可视化定性色序方案 · 色导网方案库
分类色的难点不是好看，是在最坏情况下还能分开。这一套的明度是错开排的，所以即使色相信息全丢也不至于糊成一片。
色卡
#2B51AB
#6F3A1F
#337166
#4A1D53
#8C742C
#C87E9D
#68BE60
#373D43
这一套是怎么排的
定性色序要同时满足三件事：色相彼此分开、明度彼此错开、并且在色觉障碍模拟下不塌成一堆。前两件靠排布，第三件只能实测。
顺序本身也有讲究：前四个是最常用的，拿掉后四个仍然是一套可用的配色。所以画三类数据时直接取前三个，不要从八个里挑自己喜欢的——那样很容易挑出两个相近的。
色觉模拟下的实测色差
| 条件 | 最小 ΔE*ab | 最接近的一对 |
|---|---|---|
| 原色（八色） | 28.8 | #337166 与 #373D43 |
| 绿色盲模拟（八色） | 17.7 | #337166 与 #373D43 |
| 红色盲模拟（八色） | 19.3 | #337166 与 #C87E9D |
| 绿色盲模拟（前四色） | 30.6 | #337166 与 #4A1D53 |
| 绿色盲模拟（前六色） | 20.8 | #337166 与 #C87E9D |
八色全用时，模拟后最接近的一对仍然明显不同，但没到可以放心的 20。所以八类并列时请务必加第二重编码，四类以内才可以只靠颜色。可以在色觉模拟工具里把这八个值粘进去自己复核。
CSS 自定义属性
:root {
--dv-1: #2B51AB;
--dv-2: #6F3A1F;
--dv-3: #337166;
--dv-4: #4A1D53;
--dv-5: #8C742C;
--dv-6: #C87E9D;
--dv-7: #68BE60;
--dv-8: #373D43;
}