Css 轻量化功能，非线性结果？

使用较暗/较亮的颜色作为底色，并在底色上添加10个暗/亮色调

更少的代码

HTML代码：

结果:

我的问题:

---

为什么d4和d5以及l5和l6之间会出现这样的非线性下降？

我从来没有弄清楚为什么它会如此有效，但这就是我一直在寻找的效果：

@baseColour:            #B61840;
@baseColour_d9:         multiply(@baseColour,#191919);
@baseColour_d8:         multiply(@baseColour,#323232);
@baseColour_d7:         multiply(@baseColour,#4B4B4B);
@baseColour_d6:         multiply(@baseColour,#646464);
@baseColour_d5:         multiply(@baseColour,#7D7D7D);
@baseColour_d4:         multiply(@baseColour,#969696);
@baseColour_d3:         multiply(@baseColour,#AFAFAF);
@baseColour_d2:         multiply(@baseColour,#C8C8C8);
@baseColour_d1:         multiply(@baseColour,#E1E1E1);
@baseColour_l1:         screen(@baseColour,#191919);
@baseColour_l2:         screen(@baseColour,#323232);
@baseColour_l3:         screen(@baseColour,#4B4B4B);
@baseColour_l4:         screen(@baseColour,#646464);
@baseColour_l5:         screen(@baseColour,#7D7D7D);
@baseColour_l6:         screen(@baseColour,#969696);
@baseColour_l7:         screen(@baseColour,#AFAFAF);
@baseColour_l8:         screen(@baseColour,#C8C8C8);
@baseColour_l9:         screen(@baseColour,#E1E1E1);
@baseColour_l95:        screen(@baseColour,#E6E6E6);
@baseColour_l975:       screen(@baseColour,#EBEBEB);

---

以防万一，您可以使用@basecolor*.1、@basecolor*.2、@basecolor*.3等获得相同的结果。也可以通过两种不同的方法查看更通用的实现。

 <div class='baseColour_d9'>baseColour_d9</div>
<div class='baseColour_d8'>baseColour_d8</div>
<div class='baseColour_d7'>baseColour_d7</div>
<div class='baseColour_d6'>baseColour_d6</div>
<div class='baseColour_d5'>baseColour_d5</div>
<div class='baseColour_d4'>baseColour_d4</div>
<div class='baseColour_d3'>baseColour_d3</div>
<div class='baseColour_d2'>baseColour_d2</div>
<div class='baseColour_d1'>baseColour_d1</div>
<div class='baseColour'>baseColour</div>
<div class='baseColour_l1'>baseColour_l1</div>
<div class='baseColour_l2'>baseColour_l2</div>
<div class='baseColour_l3'>baseColour_l3</div>
<div class='baseColour_l4'>baseColour_l4</div>
<div class='baseColour_l5'>baseColour_l5</div>
<div class='baseColour_l6'>baseColour_l6</div>
<div class='baseColour_l7'>baseColour_l7</div>
<div class='baseColour_l8'>baseColour_l8</div>
<div class='baseColour_l9'>baseColour_l9</div>
<div class='baseColour_l95'>baseColour_l95</div>
<div class='baseColour_l975'>baseColour_l975</div>

@baseColour:            #B61840;
@baseColour_d9:         multiply(@baseColour,#191919);
@baseColour_d8:         multiply(@baseColour,#323232);
@baseColour_d7:         multiply(@baseColour,#4B4B4B);
@baseColour_d6:         multiply(@baseColour,#646464);
@baseColour_d5:         multiply(@baseColour,#7D7D7D);
@baseColour_d4:         multiply(@baseColour,#969696);
@baseColour_d3:         multiply(@baseColour,#AFAFAF);
@baseColour_d2:         multiply(@baseColour,#C8C8C8);
@baseColour_d1:         multiply(@baseColour,#E1E1E1);
@baseColour_l1:         screen(@baseColour,#191919);
@baseColour_l2:         screen(@baseColour,#323232);
@baseColour_l3:         screen(@baseColour,#4B4B4B);
@baseColour_l4:         screen(@baseColour,#646464);
@baseColour_l5:         screen(@baseColour,#7D7D7D);
@baseColour_l6:         screen(@baseColour,#969696);
@baseColour_l7:         screen(@baseColour,#AFAFAF);
@baseColour_l8:         screen(@baseColour,#C8C8C8);
@baseColour_l9:         screen(@baseColour,#E1E1E1);
@baseColour_l95:        screen(@baseColour,#E6E6E6);
@baseColour_l975:       screen(@baseColour,#EBEBEB);