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

Question

我希望能够调用一个函数，该函数接受一个基础颜色并返回对应同一颜色的不同阴影的值数组。该数组可以包含hex值或rgba()值。我还希望能够输入所需阴影的数量。阴影的数量也可以用作递增阴影的度量标准。例如，如果我想让输出具有3种不同的阴影，则第1种阴影将是基准的1/3...无论数学怎么运算...此外，在某些情况下，第1个阴影可能需要100%透明，因此我想接受一个参数来设置初始Alpha值。我已经组织了我认为是该函数的基本逻辑，但其中的数学计算对我来说不太清楚。

        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

- LCaraway

---

你有搜索过吗？https://dev59.com/Um035IYBdhLWcg3wNdLg - epascarello

你能添加一些例子吗？ - Nina Scholz

你也可以通过操作数字来简单地改变hsl，并从中生成CSS字符串。 - Sterling Archer

Answer 1

通过保持颜色比例相同，可以生成阴影。假设您的基础颜色具有(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(Math.max(r, Math.max(g,b)), 1);

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)

- 11thdimension

---

我今天注意到，在最后一个代码块中，“step”公式对我来说没有意义。我不知道当时我在想什么。但我认为它应该是255 / (max*10)而不是(255 - max) / 10。已编辑答案。 - 11thdimension

为了避免当颜色为0:0:0时出现除以零的异常（step = infinity），请将以下代码：var max = Math.max(r,Math.max(g,b));修改为：var max = Math.max(Math.max(r, Math.max(g,b)), 1);点击此处查看示例 - F. Weise

谢谢，我已按照您的建议修复了它。 - 11thdimension

不错。在 (r * step * 3, g * step * 3, b * step * 3) 中，3 代表什么意思？ - Brendan

它意味着第三个阴影。代码展示了创建10个阴影的示例。对于第一个阴影，您将乘以 step * 1，对于第二个阴影，您将乘以 step * 2，对于第三个阴影，您将乘以 step * 3，以此类推。 - 11thdimension