css – 如何使用由三个RGB值定义的颜色渐变来计算新的类似颜色渐变?

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

例如,以下是令人愉悦的蓝色渐变:

rgb(172,228,248) – 开始

rgb(108,205,243) – 完成

rgb(121,181,203) – 边界

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

因此,给定颜色:rgb(254,218,113)(黄色),如何以与上述相同的比率计算结束和边框颜色?

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

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)(注意它们向下舍入为整数/整数).

我希望以任何方式帮助我!

点赞