在两种颜色之间生成一系列颜色

15

给定开始颜色和结束颜色，是否可以通过算法在它们之间生成一系列颜色？例如，给定下图的开始和结尾处蓝/灰色的明暗阴影，我该如何生成中间阴影？

我正在考虑的一种可能的解决方案是从两种颜色创建一个渐变，然后在该渐变的等距点处对颜色进行采样。那可能是最好的方法吗？

color color-theory

— 本·帕卡德
source

2

看看这个：graphicdesign.stackexchange.com/questions/75417/...可以接着是ducplicate？

— 拉斐尔

关于该主题的另一篇好文章：vis4.net/blog/posts/avoid-equidistant-hsv-colors

— thorn

这非常接近于该堆栈溢出问题

— 达伍德说，请恢复莫妮卡（Monica）

13

这称为颜色插值。这就是渐变的作用。您可以使用多种手段和方法来执行此操作，并且结果的内插方式取决于方法。

我通常使用JavaScript在Web项目中执行此操作，以便可以动态更改颜色，例如在此音乐可视化器中。从上面的示例中提取的一种JavaScript实现具有使用RGB的线性插值的非常简单的方法，如下所示：

现场演示

// Returns a single rgb color interpolation between given rgb color
// based on the factor given; via https://codepen.io/njmcode/pen/axoyD?editors=0010
function interpolateColor(color1, color2, factor) {
    if (arguments.length < 3) { 
        factor = 0.5; 
    }
    var result = color1.slice();
    for (var i = 0; i < 3; i++) {
        result[i] = Math.round(result[i] + factor * (color2[i] - color1[i]));
    }
    return result;
};
// My function to interpolate between two colors completely, returning an array
function interpolateColors(color1, color2, steps) {
    var stepFactor = 1 / (steps - 1),
        interpolatedColorArray = [];

    color1 = color1.match(/\d+/g).map(Number);
    color2 = color2.match(/\d+/g).map(Number);

    for(var i = 0; i < steps; i++) {
        interpolatedColorArray.push(interpolateColor(color1, color2, stepFactor * i));
    }

    return interpolatedColorArray;
}

这样使用，并返回插值颜色的数组：

var colorArray = interpolateColors("rgb(94, 79, 162)", "rgb(247, 148, 89)", 5);

您还可以找到用于颜色插值的PhotoShop（以及其他程序）扩展。但是，您可能要检查以确保插值方法与所需的相同，因为您可以使用任何函数进行插值。

— 扎克·索西耶
source

2

扎克...你真是个怪胎...音乐可视化工具真是太酷了！

— 拉斐尔

@Rafael我也做了几个你可能也喜欢的人：）

— Zach Saucier

谢谢。Color Interpolation这就是我所需要的。我发现了一些斯威夫特实现在这里- stackoverflow.com/questions/22868182/uico...

— 本惠普

2

上面的链接已断开，但您可以在此处找到该文章供将来的读者使用：基于进度值的UIColor过渡

— Zach Saucier

23

看看这个答案。如何使给定的颜色更暗或更浅？

在这里，您只需获取每个RGB分量的分隔值并将其相除。

但是我们有一个问题，不仅只有一种方法可以进行颜色转换。

第一个方法会给您最短的路线（1），但可能该路线不是您所需要的。

这也受到颜色模型或逻辑的影响。例如，在Lab *颜色模型中，红色和绿色是互补色，因此该模型上的短路径将通过中性灰色（3）。

如果您只需要某种颜色的阴影，则另一个答案是合适的答案。

— 拉斐尔
source

5

我喜欢显示插值方法不同的图形

— Zach Saucier

我想这意味着必须有一种方法来编成路径策略。

— 宝添鹤

10

在Illustrator中以RGB或CMYK使用混合：

创建2个形状，每个形状都有开始和结束的颜色（在此示例中为1个灰色和1个黑色，但是请选择所需的颜色）
进入Object → Blend → Blend Options并输入Specified steps您需要的数量（在下面的示例中为20）
选择两个对象，然后选择Object → Blend → Make。这将生成混合，然后可以通过将其转换为单个对象Object → Expand。然后，您可以看到每个中间对象及其自身的颜色代码。

— 露西安
source

5

这是其他答案的补充。

在sRGB中插值颜色时，必须考虑到RGB值的光强度不是线性的，而是人类感知的光强度是线性的。这使保存值更加容易，但是对于各种颜色操作，必须进入线性颜色空间。

人类对光强度的感知是根据幂定律的，因此

linear = sRGB^2.2
sRGB = linear^(1/2.2)

可用于在两者之间进行转换。这使用的伽玛值为2.2，这是sRGB的值。有关此的详细信息请参见本维基百科文章。

这个问题和错误的实现的示例的详细分析，可以发现在这里。其中之一是使用线性和sRGB插值的颜色渐变。

— 亨耶
source

那是内插sRGB值的一种方法，但是一个人应该做什么取决于他们想要的效果

— Zach Saucier

没错，但是线性空间中的插值是现实生活中光线发生的情况。因此，这样做是最自然的。

— henje

1

@ZachSaucier倍的人数已经做插值或sRGB的勾兑出来的具体的比较的时候，人们都做到了出于无知或懒惰（无论是思想，他们的数量意图是哦，所以，小小的正在做它在RGB，或认为（正确与否）差异不重要）。

— hobbs

1

已经提出了Photoshop的渐变（或在Ai中等效地称为“混合”）作为在起始和结束颜色之间进行线性颜色过渡的一种方法。我们如何在不编写一些脚本代码的情况下获得非线性的东西（弯曲的过渡路径）？

一种解决方案是通过调整图层或混合模式或两者来修改渐变过渡路径。如果修改图层的图层蒙版是连续的，并且在开始和结束时的影响为零，则实际上会产生从开始颜色到结束颜色的连续变换。

这是一个相当复杂的转折。图层“仅目标”具有渐变，图层“修改器”通过混合模式“颜色”产生连续的颜色偏移。为了使所有扭曲，修改器本身是渐变。

通过增加对比度的调整层“曲线”会产生更多的扭曲。它具有与修改器相同的图层蒙版，但这不是强制性的。任何遮罩都可以，如果连续且在开始和结束时都是黑色的。

存在一些不连续的混合模式和曲线，这些模式和曲线会导致突然的跳跃。其中之一是“色调”。破坏效果的另一种可能性是“不变”，这是由裁剪为全零或全255导致的可见的恒定颜色区域。我没有测试也没有计算出，实际上多少有助于使用48位/像素RGB模式。也许根本没有，因为我们在屏幕上仍然只有24位/像素。

— 用户名
source