Question

Given a set of 3 colors, keeping the same ratios, but starting with a new color, generate the next two.

For example, the following is a pleasing blue gradient:

rgb(172, 228, 248) – Start

rgb(108, 205, 243) – Finish

rgb(121, 181, 203) – Border

I need to create a series of 10 similar gradients starting from different colors. I’d like the gradients to maintain the same light-to-dark ratios.

So, given the color: rgb(254, 218, 113) (yellow), how can I calculate the end and border colors with the same ratios as above?

Answer 1

Here’s my try: suppose your initial three colors are:

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

And suppose the color which you’d like to calculate the analogous pattern on is rgb(x1, y1, z1). The other two components are calculated like this:

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

And thus your resulting colors are rgb(x2, y2, z2) and rgb(x3, y3, z3).

Here’s the result of applying the method above on your example color (rgb(254, 218, 113)):

The two resulting colors are rgb(159, 196, 110) and rgb(178, 173, 92) (note that they’re rounded down to integers/whole numbers).

I hope that helped in any manner!