Html 显示百分比范围内的颜色阴影

我们如何在百分比范围内显示颜色阴影。在这里，我试图设计不同颜色的阴影，并以百分比显示范围数。我们如何做到这一点，请指导我

这里是一个例子，就像我试图设计和显示的颜色和阴影。

---

您可以使用rgba颜色属性调整任何颜色的alpha级别

例如，在您的例子中，最暗的颜色有R:36、G:89、B:137

---

因此，80-100%范围内的rgba颜色代码将是

rgba（36,89137,1）

，0-20%范围内最轻的颜色代码可以是

rgba（36,89137,0.20）

我认为使用hsl颜色系统（色调、饱和度、亮度）是一个好方法

例如，使用固定色调（比如230度）和固定饱和度（比如70%）。然后你可以改变亮度，很容易得到同一颜色的不同强度

显然，您也可以尝试更改饱和度以满足您的需要

这些颜色可以很容易地用在

css

规则中，例如

背景色：hsl（230,70%，50%）

一个很好的工具就是这个链接