CSS의 동적 그라디언트

Question

동적 그라디언트를 만들고 싶습니다. 나는 하나의 색상을 가지고 있으며 아래 5 가지 색상의 그라데이션을 생성하고 싶습니다. 예.

background-image: -webkit-linear-gradient(top, 
rgba(235, 82, 164, 1.00) 0% , 
rgba(244, 49, 153, 1.00) 18% , 
rgba(245, 0, 130, 1.00) 56% ,// this color i have 
rgba(196, 0, 104, 1.00) 84% , 
rgba(171, 0, 91, 1.00) 100%); 

좋은 효과를 얻기 위해 원래 색상과 비슷한 4 가지 색상을 얻을 수있는 방법이 있습니까?

Answer 1

이 기능은 대부분의 CSS 프레임 워크에 내장되어, 같은 SASS, LESS 등 당신이 그것을 수행하는 방법을 알고의 언어에 대한 소스 코드를 살펴하려면 (색상 주문 어둠에 빛) 너의 선택. 그러나 스타일 시트를 컴파일하는 동안 완료되므로 컴파일이 완료되면 규칙이 정적 코드로 생성됩니다. 예를 들어

이 덜 소스 코드입니다 :

[...] 
lighten: function (color, amount) { 
    var hsl = color.toHSL(); 

    hsl.l += amount.value/100; 
    hsl.l = clamp(hsl.l); 
    return hsla(hsl); 
}, 
darken: function (color, amount) { 
    var hsl = color.toHSL(); 

    hsl.l -= amount.value/100; 
    hsl.l = clamp(hsl.l); 
    return hsla(hsl); 
} 
[...] 

function clamp(val) { 
    return Math.min(1, Math.max(0, val)); 
} 
[...] 
toHSL: function() { 
    var r = this.rgb[0]/255, 
     g = this.rgb[1]/255, 
     b = this.rgb[2]/255, 
     a = this.alpha; 

    var max = Math.max(r, g, b), min = Math.min(r, g, b); 
    var h, s, l = (max + min)/2, d = max - min; 

    if (max === min) { 
     h = s = 0; 
    } else { 
     s = l > 0.5 ? d/(2 - max - min) : d/(max + min); 

     switch (max) { 
      case r: h = (g - b)/d + (g < b ? 6 : 0); break; 
      case g: h = (b - r)/d + 2;    break; 
      case b: h = (r - g)/d + 4;    break; 
     } 
     h /= 6; 
    } 
    return { h: h * 360, s: s, l: l, a: a }; 
}