Javascript-生成相同颜色的不同阴影

我希望能够调用一个采用基本颜色并返回与同一颜色的不同阴影对应的值的数组的函数。该数组可以包含十六进制值或rgba()值。我也希望能够输入所需的阴影量。阴影的数量然后也可以用作增加阴影的度量。例如，如果我希望输出具有3个不同的阴影，则第一个阴影将是基数的1/3。但是，该数学运算将起作用。此外，在某些情况下，第一个阴影可能需要100％透明，所以想要接受初始字母的参数。我已经整理好了我认为是该功能的基本逻辑的内容，但是数学上我不清楚。

        var buildColorStops = function (baseColor,numberOfValues,initialAlpha) {
            var b = baseColor;
            var n = numberOfValues //expected number of colors in the output. If n was 3 results would be [light blue, blue(base), dark blue] (# or rgba will work)
            var d = 1 / n; // if number of values was 5 d would represent 1/5 of the base.
            var ia = initialAlpha; // some situations may require the first color to be 100% transparent

            var outputArray = [];
            var i = 0;
            while (i < n) {
                if (i == 0) {
                    //...math on base color & incorporate initial alpha
                    outputArray.push("result of math on base")
                }
                else {
                    //...math on base color by incrementing d or 1/n
                    outputArray.push("result of math on base")
                }
            }

            return outputArray;
        }// end of buildColorStops

最佳答案

通过保持相同的颜色比例可以生成阴影。假设您的基色具有(r,g,b)红色，绿色，蓝色值。
因此，组件之间的比率为r:g:b。如果要生成10个阴影，则阴影将是。

(r/10, g/10, b/10)
(2*r/10, 2*g/10, 2*b/10)
(3*r/10, 3*g/10, 3*b/10)
(4*r/10, 4*g/10, 4*b/10) and so on

那是为了更深的阴影。
用于较浅的阴影

(11*r/10, 11*g/10, 11*b/10)
(12*r/10, 12*g/10, 12*b/10)
(13*r/10, 13*g/10, 13*b/10) and so on

将r，g，b的结果值检查为不超过255，因为减轻它们的值会增加它们的值。
实际上，为避免超过255，您可以检查r，g，b中的哪个最大值，然后使用该值生成阴影。

var max = Math.max(r,Math.max(g,b));

var step = 255 / (max * 10)
(r * step, g * step, b * step)
(r * step * 2, g * step * 2, b * step * 2)
(r * step * 3, g * step * 3, b * step * 3)

关于Javascript-生成相同颜色的不同阴影，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40619476/