Suppose there is a color #ff7fa1 , as by means of scss :

  1. Increase its juiciness to the maximum level of #ff0044 ?
  2. Reduce its juiciness to the minimum level #ffffff ?

enter image description here

enter image description here

enter image description here

    1 answer 1

    You can refer to the color scheme hsl

    In this case, the maximum juiciness of the color will be at a value of 50% for l components and the minimum (white color) at a value of 100%.

    In SASS, there is a function to get l components: lightness($color)

    And also functions for changing this component:

    Thus, to solve point two, you need to add the value of the component to 100 , and to solve the first point, if the current value is more than 50, decrease it; otherwise, increase it to 50.

    Example of use:

     .c1{ color: lighten($color, 100-(lightness($color))); } .c2{ $l : lightness($color); color: if($l > 50, darken($color, ($l)-50), lighten($color, 50-($l))); }

    When $color: #ff7fa1 converted to the following:

     .c1 { color: white; } .c2 { color: #ff0044; }

    if function is used