在javascript中创建更深的颜色？答案

【问题标题】：Create darker shades of color in javascript?在javascript中创建更深的颜色？
【发布时间】：2018-06-25 21:14:37
【问题描述】：

我正在尝试编写一段将采用原始颜色的代码，然后将 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------”格式改变了颜色，当我从中减去时不起作用。

感谢您的帮助！

【问题讨论】：

可能重复 (stackoverflow.com/questions/16503286/…)
这是一种方法：jsfiddle.net/khrismuc/7p6xedL9

标签： javascript html css colors

【解决方案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)。但这将是一个很大的颜色跳跃。

【讨论】：