Создайте линейный градиент для заданного значения HEX в Javascript

Question

Я использую линейное изображение градиента, чтобы нарисовать фон DIV.

background-image: linear-gradient(to bottom, #cdeb8f 0%,#a5c955 100%); 

Линейный градиент выглядит лучше, чем простой цвет фона. Можно ли создать такой линейный градиент javascript для данного цвета HEX?

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

Учитывая, как указано выше, если я прохожу

#cdeb8f 

он должен вернуть мне

#a5c955 

я преобразовал выше значений HEX в Десятичные и обнаружили, что они имеют отношение 1,24. Затем я использовал функцию для преобразования прошедшего HEX в Decimal, умножения или деления на 1.24 и преобразования обратно в HEX. Возврат HEX-цвета не создавал значимого линейного градиента с пройденным цветом HEX.

Основная проблема состоит в том, чтобы сохранить вышеуказанную пропорцию, чтобы линейный градиент не выглядел странным.

Answer 1

Вы можете начать здесь. Вы также можете передать соотношение в качестве параметра. Функции

Hex и RGB преобразования взяты из Tim's answer.

var div = document.getElementById("div"); 
var hex = "#cdeb8f"; 

gradient(hex, div); 

function gradient(topColor, elm) { 
    function hexToRgb(hex) { 
     var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; 
     hex = hex.replace(shorthandRegex, function(m, r, g, b) { 
      return r + r + g + g + b + b; 
     }); 

     var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); 
     return result ? { 
      r: parseInt(result[1], 16), 
      g: parseInt(result[2], 16), 
      b: parseInt(result[3], 16) 
     } : null; 
    } 

    function componentToHex(c) { 
     var hex = c.toString(16); 
     return hex.length == 1 ? "0" + hex : hex; 
    } 

    function rgbToHex(r, g, b) { 
     return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b); 
    } 

    var ratio = 1.24; 
    var top = hexToRgb(topColor); 
    var r = Math.floor(top.r/ratio); 
    var g = Math.floor(top.g/ratio); 
    var b = Math.floor(top.b/ratio); 
    var bottom = rgbToHex(r, g, b); 
    var bg = "linear-gradient(to bottom, " + hex + " 0%, " + bottom + " 100%)"; 
    elm.style.background = bg; 
} 

FIDDLE