Определите изменение HSL, чтобы преобразовать цвет в другой

Question

Я использую LESS, и я хотел бы воспользоваться различными интегрированными цветовыми функциями, которые позволяют устанавливать только несколько основных цветов, а затем выводить другие, меняя оттенок, насыщенность, легкость, вращение и т. Д.

Давайте представим, что у нас есть следующие 2 цвета (в этом примере - светло-зеленый и темно-зеленый):

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

Я хотел бы явно установить только @primary-color а затем получить @secondary-color после соответствующего преобразования HSL. (например 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%;
}