Colors 确定HSL变化以在另一种颜色中变换颜色
我使用更少的，我想利用各种集成功能，只允许设置少数基本颜色，然后导出其他更改色调、饱和度、亮度、旋转、ecc的颜色 让我们设想一下，在我的着色程序中有以下两种颜色（本例中为浅绿色和深绿色）：Colors 确定HSL变化以在另一种颜色中变换颜色,colors,less,hsl,Colors,Less,Hsl,我使用更少的，我想利用各种集成功能，只允许设置少数基本颜色，然后导出其他更改色调、饱和度、亮度、旋转、ecc的颜色 让我们设想一下，在我的着色程序中有以下两种颜色（本例中为浅绿色和深绿色）： @primary-color: rgb(0,100,60); @secondary-color: rgb(185,215,50); 我只想显式地设置@原色，然后在适当的HSL转换后获得@副色。（例如变暗（hsl（90%、80%、50%、20%）） 有没有办法确定我必须对@原色应用什么hsl设置才
@primary-color: rgb(0,100,60);
@secondary-color: rgb(185,215,50);
@原色@副色变暗（hsl（90%、80%、50%、20%）@原色@副色@二次色@原色备注：如果需要，也可以借助Photoshop等外部工具。以下是计算两种颜色的色调、饱和度和亮度值之间的差值，然后根据第一种颜色计算第二种颜色的方法 具体步骤如下：
- 色差计算：使用
、Hue（）
和Saturation（）
函数计算两种给定颜色之间的色调、饱和度和明度差。此函数可以单独使用，仅输出差异Lightness（） - 根据原色得出次颜色：这是一个三步过程，如下所示：
- 通过传递两种颜色之间的色调差异，使用
函数调整原色的色调spin（） - 根据不同，使用
或saturate（）
函数调整色调调整颜色的饱和度（上一步）desaturate（） - 根据不同，使用
或变暗（）
功能调整饱和度调整颜色的亮度（从上一步开始）变亮（）
- 通过传递两种颜色之间的色调差异，使用
@primary:rgb（0100,60）；/*原色*/
@中学：rgb（185215,50）；/*次要颜色*/
/*mixin以计算两种给定颜色之间的差异*/
.color diff（@color1；@color2）{
@色调（@color2）-色调（@color1）；
@饱和度差：饱和度（@color1）-饱和度（@color2）；
@亮度差异：亮度（@color1）-亮度（@color2）；
color1:@color1；color2:@color2；/*仅用于测试，可以删除*/
}
/*步骤1：混合以调整颜色之间的色调差异*/
.调整色调（@color；@diff）{
@hueAdjusted:spin（@color，@hueDiff）；
}
/*步骤2：混入以调整饱和度差*/
.在（@diff>0）时调整饱和度（@color；@diff）{
@satAdjusted：去饱和（@color，abs（@diff））；/*如果diff大于0，则去饱和*/
}
.调整饱和度（@color；@diff），而不是（@diff>0）{
@satAdjusted：饱和（@color，abs（@diff））；/*如果diff不大于0，则饱和*/
}
/*步骤3：混合以调整颜色之间的亮度差异*/
.在（@diff>0）时调整亮度（@color；@diff）{
@亮度调整：变暗（@color，abs（@diff））；/*如果diff大于0，则变暗*/
}
.当亮度不为（@diff>0）时，调整亮度（@color；@diff）{
@亮度调整：变亮（@color，abs（@diff））；/*否则变亮*/
}
div{
.色差（@初级；@次级）；
.调整色调（@primary；@hueDiff）；
.调整饱和度（@hueAdjusted；@saturationDiff）；
.调整亮度（@satajusted；@lightnessDiff）；
颜色：@亮度调整；/*最终输出值*/
}
div {
color1: #00643c;
color2: #b9d732;
color: #b9d732;
}
如果您只想获得两种颜色之间的差异，那么您可以使用下面这样的循环来输出色调、饱和度和亮度值方面的差异
@color-list-1:rgb（0100,60），#B0BCA7，#ABCDEF；/*原色列表*/
@颜色列表-2:rgb（185215,50），#BADA55，#FEDCBA；/*二级颜色列表*/
#输出{
.循环颜色（@index）时（@index>0）{
@主：提取（@color-list-1，@index）；
@次要：提取（@color-list-2，@index）；
.色差（@初级；@次级）；
/*输出比较的值*/
颜色比较-@{index}+：~“色调差异：@{hueDiff}”；
颜色比较-@{index}+：~“饱和度差：@{saturationDiff}”；
颜色比较-@{index}+：~“明度差：@{lightnessDiff}”；
.循环颜色（@index-1）；
}
.循环颜色（长度（@color-list-1））；
}
#输出{
颜色比较-3：色调差异：-180，饱和度差异：-29.142857142857153%，明度差异：-5.882352941176478%；
颜色比较-2：色调差异：-19.849624060150404，饱和度差异：-50.70282063269439%，明度差异：10.196078431372548%；
颜色比较-1：色调差异：-85.0908，饱和度差异：32.65306122448979%，明度差异：-32.352941176470594%；
}