时间戳

首页 > 解决方案 > 在javascript中创建更深的颜色？

javascript - 在javascript中创建更深的颜色？

问题描述

我正在尝试编写一段将采用原始颜色的代码，然后将 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;

此外，使颜色 var "0x-----" 格式改变了颜色，并且当我从中减去时不起作用。

谢谢你的帮助！

标签： javascripthtmlcsscolors

解决方案

使用 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)。但这将是一个很大的颜色跳跃。

推荐阅读