Создавать более темные оттенки цвета в JavaScript?

Question

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

Вот мой код для справки:

var color = "db4848";
           for(var i = 0; i < coins.length; i ++){


                widget += "<div style=\"padding-top:6px;padding-left:50%;height:40px;background-color:" + color + ";color:white;border:1px solid #ffffff\">" + coins[i].coinType + "</div>";
                //color = color - 10; (How would I do this??)
           }
           document.getElementById("coinDisplay").innerHTML = widget;

Кроме того, изменение форматирования цвета "0x ------" изменило цвети не работал, когда я вычитал из него.

Спасибо за любую помощь!

Answer 1

используйте цветовое кодирование RGB вместо шестнадцатеричного ... вы также можете преобразовать входящее значение в rgb.

числа идут от 0 до 255. 0 - это нулевое значение этого цвета.255 - максимальное количество этого цвета.таким образом, rgb (255, 100, 0) - это максимальный красный, среднее количество зеленого и нулевой синий.

белый - это rgb (255,255,255).черный - это rgb (0,0,0)

предположим, что ваш входящий цвет был rgb (200,100,50).тогда rgb (190, 90, 40) немного затемнит его.RGB (180,80,30) будет затемнять его больше.если вы хотите сохранить цветовой тон, уменьшите каждое значение в процентах, а не на фиксированные значения.так что если вы снизитесь на 10%, тогда rgb (200, 100, 50) станет rgb (180, 90, 45).

Интересная вещь произойдет, если вы достигнете нуля.Вы могли бы тогда обернуться и начать сверху.так что если вы дошли до этого: rgb (10, 5, 0), ваш следующий цвет может быть rgb (0, 250, 245).но это был бы большой скачок цвета.