确定HSL变化以转换另一种颜色

Question

我使用LESS,我想利用各种集成的颜色功能,只允许设置几个基本颜色,然后导出其他改变色调,饱和度,亮度,旋转, ecc.

让我们假设我的着色器中有以下两种颜色(本例中为浅绿色和深绿色):

@primary-color:    rgb(0,100,60);
@secondary-color:  rgb(185,215,50); 

我想明确设置@primary-color,然后在适当的HSL转换后获得 @secondary-color.(例如darken(hsl(90, 80%, 50%), 20%))

有没有办法确定我必须应用什么hsl设置@primary-color才能获得@secondary-color？

换一种说法:

鉴于2种RGB颜色定义,是否有任何方法可以确定它们之间存在的色调,饱和度和亮度方面的差异,以表示@secondary-color为@primary-color？

PS:如果需要,也可以借助Photoshop等外部工具.

Answer 1

这是计算两种颜色的色调,饱和度和亮度值之间差异的方法,然后使用它来计算基于第一种颜色的第二种颜色.

各个步骤如下:

• 色差计算:通过计算两个给定颜色的色调,饱和度和亮度的差异hue(),saturation()和lightness()功能.此功能可以单独使用,仅用于输出差异.
• 到达基于主要的二级颜色:这是一个三步过程,它们如下:
  • spin()通过传递两种颜色之间的色调差异,使用该功能调整原色的色相
  • 根据差异使用saturate()或desaturate()功能调整色调调整后颜色的饱和度(从上一步开始).
  • 根据差异使用darken()或lighten()函数调整饱和度的亮度调整后的颜色(从上一步开始).

这个答案是关于如何从另一种颜色计算一种颜色的本SASS文章的较少改编.

@primary: rgb(0,100,60); /* primary color */
@secondary: rgb(185,215,50); /* secondary color */

/* mixin to calculate the difference between two given colors */
.color-diff(@color1; @color2){ 
    @hueDiff: hue(@color2) - hue(@color1);
    @saturationDiff: saturation(@color1) - saturation(@color2);
    @lightnessDiff: lightness(@color1)- lightness(@color2);

    color1: @color1; color2:@color2; /* just for testing, can be removed */
}

/* Step 1: mixin to adjust the hue difference between the colors */
.adjust-hue(@color; @diff){ 
    @hueAdjusted: spin(@color, @hueDiff);
}

/* Step 2: mixin to adjust the saturation difference */
.adjust-saturation(@color; @diff) when (@diff > 0){
    @satAdjusted: desaturate(@color, abs(@diff)); /* desaturate if diff is greater than 0 */
}
.adjust-saturation(@color; @diff) when not (@diff > 0){
    @satAdjusted: saturate(@color, abs(@diff)); /* saturate if diff is not greater than 0 */
}

/* Step 3: mixin to adjust the lightness diff between the colors */
.adjust-lightness(@color; @diff) when (@diff > 0){
    @lightnessAdjusted: darken(@color, abs(@diff)); /* darken if diff is greater than 0 */
}
.adjust-lightness(@color; @diff) when not (@diff > 0){
    @lightnessAdjusted: lighten(@color, abs(@diff)); /* else lighten */
}

div{
    .color-diff(@primary; @secondary);
    .adjust-hue(@primary; @hueDiff);
    .adjust-saturation(@hueAdjusted; @saturationDiff);
    .adjust-lightness(@satAdjusted; @lightnessDiff);
    color: @lightnessAdjusted; /* final output value */
}

编译CSS:

div {
    color1: #00643c;
    color2: #b9d732;
    color: #b9d732;
}

如果您只想获得两种颜色之间的差异,那么您可以使用如下所示的循环来输出色调,饱和度和亮度值方面的差异.

@color-list-1: rgb(0,100,60), #B0BCA7, #ABCDEF; /* list of primary colors */
@color-list-2: rgb(185,215,50), #BADA55, #FEDCBA; /* list of secondary colors */

#output{
    .loop-colors(@index) when (@index > 0){
        @primary: extract(@color-list-1, @index);
        @secondary: extract(@color-list-2, @index);
        .color-diff(@primary; @secondary);

        /* output the values of the comparison */
        color-comparison-@{index}+: ~"Hue Difference: @{hueDiff}";
        color-comparison-@{index}+: ~"Saturation Difference: @{saturationDiff}";        
        color-comparison-@{index}+: ~"Lightness Difference: @{lightnessDiff}";
        .loop-colors(@index - 1);
    }
    .loop-colors(length(@color-list-1));
}

上面的代码将比较两个列表中的相应值,并输出它们的差异,如下所示:

#output {
  color-comparison-3: Hue Difference: -180, Saturation Difference: -29.142857142857153%, Lightness Difference: -5.882352941176478%;
  color-comparison-2: Hue Difference: -19.849624060150404, Saturation Difference: -50.70282063269439%, Lightness Difference: 10.196078431372548%;
  color-comparison-1: Hue Difference: -85.09090909090908, Saturation Difference: 32.65306122448979%, Lightness Difference: -32.352941176470594%;
}