Mobile app version of vmapp.org
Login or Join
Dunderdale640

: Creating a palette from two *intermediate* colors I am given 7 categories and 2 colors: blue (#02A7E3) and orange (#F6A800). There are numerous online tools to interpolate between these two, for

@Dunderdale640

Posted in: #Color #Interpolation #Palette

I am given 7 categories and 2 colors: blue (#02A7E3) and orange (#F6A800). There are numerous online tools to interpolate between these two, for instance:



But what if I don't want my given colors to be at the ends? More precisely:


unknown
blue (#02A7E3)
unknown
unknown
unknown
orange (#F6A800)
unknown


I think reasonable to calculate the colors 3 to 5 with the same tool:



So:


unknown
blue (#02A7E3) #8ba7b5 #bba787 #dba858
orange (#F6A800)
unknown


How could I interpolate the colors at both ends?

Ideally (but I don't know whether these requirements are compatible), I would all the resulting colors to be dark enough to serve as background against a white text (with a bold font).

10.03% popularity Vote Up Vote Down


Login to follow query

More posts by @Dunderdale640

3 Comments

Sorted by latest first Latest Oldest Best

 

@Yeniel278

Let me clarify my comment a bit. Color is not a very simple concept. While color has 3 components it is not really a straightforward way to say what the vector means like say physical location that also has 3 variables.

First RGB color values are not linear. Secondly while we have information on how to equally space colors in certain limited sets of colors its not the same thing as lineary spacing RGB values. So we know in fact that this is not linear interpolation of color. It is linear interpolation of RGB values, while a perfectly valid request not the same as intermediate color.

Now, it does not particularly help us that there can be two perfectly valid and scientifically correct and incompatible definitions of color. Simply inetremidate is badly defined and equally spaced is HARD, can not be done in a RGB space not even in LAB space. One can do it with quite a lot of fiddling and uncertainty as to whether or not you actually did it.

But yeah you can treat RGB values as linear color coordinates, and it works out as you have show. But then who is tio say RGB is the space to use LAB gives different results, XYZ gives different results a space consisting of Munsel colors would admittedly give you well spaced results an and again you get different results in HSV, HSB and XYZ spaces

10% popularity Vote Up Vote Down


 

@Hamaas979

Do 3 transitions, and discard the colours you don't need.

For the sake of an example, here I have chosen MidnightBlue at one end, and a Yellow colour for the other transitions at either side:

10% popularity Vote Up Vote Down


 

@Sarah814

In Photoshop and many other graphic software you have layer blending modes Add and Subtract. With subtract you can calculate the step size (=B-A) between two colors A and B. You can add that step to B to get as distant new color C or subtract it from A to see what belongs in front of A to that series.

A nice theory, but it works poorly in normal RGB mode with 0 to 255 channel value range. We have unfortunately no negative colors. You get better results in 32 bit RGB mode. See an example:



I have taken 5th and 6th colors of your series and calculated the 7th. For reference the original 7th color is shown as the right half of the image, the calculated (=extrapolated) version is the left half.

Another example: I have subtracted and merged 2nd and 6th color of your series. Then I subtract it with 50% opacity from your 2nd color. I get your first color. You see that the first color in the reference series has nearly sunken to the calculated color. :



Actually you do not need graphic software. You know the RGB values and you can calculate the colors with a calculator or spreadsheet. It's elementary, if you use linear interpolation. Calculate X1 plus or minus N*(X2-X1)/M where X is R, G and B in their turn, N is an integer "how many steps you want to advance", M is another integer "how many steps there already is from color1 to color2, use plus and minus for different directions. Do not make any roundings until you are ready. If you happen to get a final R,G or B number below zero or over 255, then you have wanted something impossible in 8 bit RGB range.

NOTE: This is not exact even with 32 bit colors because we used elementary linear interpolation with no idea how the series was actually formed. A series between two colors can be formed via arbitary routes in the color space. Linear interpolation is only one possiblity and it happened to give quite the same result than your color series generator just in this case. Another source for inaccuracy is that I used as starting values numbers which are already rounded to 8 bit. Finally the system color management and the trip via Imgur distort colors.

linear interpolation between RGB numbers is only one of the zillion possiblities to advance from color 1 to color 2 and create some intermediate steps. Somehow visually optimal result needs surely something advanced which takes into the account the limitations of the devices and the human color perception. Artists do all that intuitively.

If you want to get a series without radically differently saturated intermediate colors, you can try interpolating between hue, saturation and luminance values. Note that you must select do you want to go clockwise or CCW along the hue circle.

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme