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）。但这将是一个很大的色彩跳跃。

在javascript中创建深色阴影？

1 个答案: