css - 减淡功能，非线性结果？

Question

使用 less darkem/lighten 获取基色并为其添加 10 种暗度/亮度。

更少的代码

@baseColour:            #B61840;
@baseColour_d9:         darken(@baseColour,90%);
@baseColour_d8:         darken(@baseColour,80%);
@baseColour_d7:         darken(@baseColour,70%);
@baseColour_d6:         darken(@baseColour,60%);
@baseColour_d5:         darken(@baseColour,50%);
@baseColour_d4:         darken(@baseColour,40%);
@baseColour_d3:         darken(@baseColour,30%);
@baseColour_d2:         darken(@baseColour,20%);
@baseColour_d1:         darken(@baseColour,10%);
@baseColour_l1:         lighten(@baseColour,10%);
@baseColour_l2:         lighten(@baseColour,20%);
@baseColour_l3:         lighten(@baseColour,30%);
@baseColour_l4:         lighten(@baseColour,40%);
@baseColour_l5:         lighten(@baseColour,50%);
@baseColour_l6:         lighten(@baseColour,60%);
@baseColour_l7:         lighten(@baseColour,70%);
@baseColour_l8:         lighten(@baseColour,80%);
@baseColour_l9:         lighten(@baseColour,90%);
@baseColour_l95:        lighten(@baseColour,95%);
@baseColour_l975:       lighten(@baseColour,97.5%);
.baseColour_d9{background-color:@baseColour_d9; width:132px;height:32px;}
.baseColour_d8{background-color:@baseColour_d8; width:132px;height:32px;}
.baseColour_d7{background-color:@baseColour_d7; width:132px;height:32px;}
.baseColour_d6{background-color:@baseColour_d6; width:132px;height:32px;}
.baseColour_d5{background-color:@baseColour_d5; width:132px;height:32px;}
.baseColour_d4{background-color:@baseColour_d4; width:132px;height:32px;}
.baseColour_d3{background-color:@baseColour_d3; width:132px;height:32px;}
.baseColour_d2{background-color:@baseColour_d2; width:132px;height:32px;}
.baseColour_d1{background-color:@baseColour_d1; width:132px;height:32px;}
.baseColour{background-color:@baseColour;   width:132px;height:32px;}
.baseColour_l1{background-color:@baseColour_l1; width:132px;height:32px;}
.baseColour_l2{background-color:@baseColour_l2; width:132px;height:32px;}
.baseColour_l3{background-color:@baseColour_l3; width:132px;height:32px;}
.baseColour_l4{background-color:@baseColour_l4; width:132px;height:32px;}
.baseColour_l5{background-color:@baseColour_l5; width:132px;height:32px;}
.baseColour_l6{background-color:@baseColour_l6; width:132px;height:32px;}
.baseColour_l7{background-color:@baseColour_l7; width:132px;height:32px;}
.baseColour_l8{background-color:@baseColour_l8; width:132px;height:32px;}
.baseColour_l9{background-color:@baseColour_l9; width:132px;height:32px;}
.baseColour_l95{background-color:@baseColour_l95;width:132px;height:32px;}
.baseColour_l975{background-color:@baseColour_l975;width:132px;height:32px;}

HTML代码:

 <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>

结果:

我的问题: 为什么 d4 和 d5 以及 l5 和 l6 之间存在这种非线性下降？

Answer 1

我从来没有弄清楚为什么它会像它那样工作，但这就是我一直在寻找的效果:

@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);