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

Question

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

例如，以下是令人愉悦的蓝色渐变：

rgb(172, 228, 248)- 开始

rgb(108, 205, 243)- 结束

rgb(121, 181, 203)- 边界

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

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

score 2 · Accepted Answer

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

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)（请注意，它们被四舍五入为整数/整数）。

我希望以任何方式有所帮助！

score 0 · Accepted Answer

一个非算法解决方案（阅读：手册），以防您找不到更有趣的东西：

您的颜色有一个优势：它们都在同一“行”中，因此与您可以使用单色或互补功能获得的自动值非常相似：

在此处输入图像描述

它们应该（理论上）是一种简单的计算方法，因为它们在一条线上并且将保持相同的距离，但是因为我不知道它是如何完成的，所以您可以手动进行（kuler 使用 RGB 以及HEX 和其他格式）。

2 回答 2