CODEWITHSUNDEEP
cssmathcolorsgradientbackground-color
Ryan
Ryan

Reputation: 15270

How can I calculate new analogous color gradients, using a color ramp as defined by a triple of RGB values?

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?

Upvotes: 4

Views: 2229

Answers (2)

Yisela
Yisela

Reputation: 6961

A non-algorithmical solution (read: manual) in case you don't find something more interesting:

http://colorschemedesigner.com/

or http://kuler.adobe.com

Your colors have an advantage: They are all in the same "line", so fairly similar to the automatic values you can get using the monochromatic or complementary functions:

enter image description here

They should be (in theory) an easy way to calculate, since they are in a line and will keep the same distance, but because I don't know how it's done here's how you can do it manually (kuler uses RGB as well as HEX and other formats).

Upvotes: 0

Chris
Chris

Reputation: 26888

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)):

enter image description here

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!

Upvotes: 2

Related Questions