Javascript-生成相同颜色的不同阴影 [英] Javascript - Generate Different Shades of the Same Color

问题描述

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

I would like to be able to call a function that takes a base color and returns an array of values that correspond to different shades of the same color. The array can contain either hex values or rgba() values. I would like to be able to input the amount of desired shades as well. The amount of shades would then also be able to be used as a metric to increment the shade. For example if I wanted the output have 3 different shades, the 1st shade would be 1/3 of the base.. however that math would work... Additionally, In some situations the 1st shade may need to be 100% transparent so I would like to accept an argument for the initial alpha. I've organized what I think would be the basic logic of the function but the math is unclear to me.

        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）红色，绿色，蓝色值。

Shades can be generated by maintaining the ratio of the colors same. Suppose that your base color has (r,g,b) red, green, blue values.

因此，组件之间的比率是 r：g：b 。如果要生成10个阴影，那么阴影就是。

So the ratio between the components is r:g:b. If you want to generate 10 shades then your shades would be.

(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，因为减轻它们的值会增加它们。

Check resulting values of r,g, b to not be more than 255 as lightening them increases their values.

实际上，为避免超过255，您可以检查r，g，b中的哪个最大值，然后使用该值生成阴影。

In fact to avoid going over 255, you can check whichever of r,g,b is maximum and use that value to generate shades.

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-生成相同颜色的不同阴影的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！