css - 如何使用由三重 RGB 值定义的色带计算新的类似颜色渐变？

Question

给定一组 3 种颜色，保持相同的比例，但从一种新颜色开始，生成接下来的两种颜色。

例如下面是一个赏心悦目的蓝色渐变:

rgb(172, 228, 248) - 开始

rgb(108, 205, 243) - 完成

rgb(121, 181, 203) - 边框

我需要从不同的颜色开始创建一系列 10 个相似的渐变。我希望渐变保持相同的明暗比。

那么，给定颜色:rgb(254, 218, 113)(黄色)，我该如何计算具有与上述相同比率的结束颜色和边框颜色？

Answer 1

这是我的尝试:假设您最初的三种颜色是:

rgb(a1, b1, c1) --> Start
rgb(a2, b2, c2) --> Finish
rgb(a3, b3, c3) --> Border

假设您要计算类似图案的颜色是rgb(x1, y1, z1)。其他两个分量是这样计算的:

x2 = (a2 / a1) * x1, y2 = (b2 / b1) * y1, z2 = (c2 / c1) * z1
x3 = (a3 / a2) * x2, y3 = (b3 / b2) * y2, z3 = (c3 / c2) * z2

因此您得到的颜色是 rgb(x2, y2, z2) 和 rgb(x3, y3, z3)。

这是对您的示例颜色 (rgb(254, 218, 113)) 应用上述方法的结果:

得到的两种颜色是 rgb(159, 196, 110) 和 rgb(178, 173, 92)(请注意，它们已四舍五入为整数/整数)。

我希望能以任何方式提供帮助!