Color Ramp Generator
Printed From: Pixel Joint
Category: The Lounge
Forum Name: Resources and Support
Forum Discription: Help your fellow pixel artists out with links to good tutorials, other forums, software, fonts, etc. Bugs and support issues should go here as well.
URL: https://pixeljoint.com/forum/forum_posts.asp?TID=13042
Printed Date: 13 September 2025 at 4:47pm
Topic: Color Ramp Generator
Posted By: shampoop
Subject: Color Ramp Generator
Date Posted: 29 September 2011 at 2:59pm
|
Hey All,
I wrote a simple console application that calculates ramps through interpolation between two colors. Here is an example: 
What I did was define two colors [26, 27, 34] & [156, 190, 252] and asked for 5 colors. The output are the start color, end color, and 3 colors in between that combine for a color ramp. Below I used the colors on the outside as my start/stop colors and generated the colors in between. As you can see, circular ramps are a lot easier to create. 
Here is the http://web.cecs.pdx.edu/~aelston/Palette/PaletteGeneratorSource.zip - Source and the http://web.cecs.pdx.edu/~aelston/Palette/Release.zip - Release Edit: * .NET 3.5 framework required |
Replies:
Posted By: CELS
Date Posted: 29 September 2011 at 3:13pm
| Very interesting. Thanks for sharing! |
Posted By: surt
Date Posted: 29 September 2011 at 4:43pm
|
You generally don't want to do colour ramp interpolation in RGB, as for example at the halfway point between blue (0,0,255) and yellow (255,255,0) you will get grey (127,127,127) rather than the desired green (0,255,0). A hue-based colour-space such as HSL solves this problem. ------------- 
|
Posted By: shampoop
Date Posted: 29 September 2011 at 5:37pm
|
Hmm, interesting. I'll research the formulas for how a change in one of the HSL values alters the different RGB values and see what I can come up with. I admit I don't have any color theory knowledge and I suppose PJ is a good resource. Anyway, I was just bored at work and wasting time. Now I envision a .dll for doing color calculations and using it to create a grid based GUI for creating pallets. Thanks for the help. |
Posted By: tanuki
Date Posted: 29 September 2011 at 11:16pm
|
Here's a few basic things I've noticed about the relationship between RGB and HSB.
RGB / HSB 255, 0, 0 = 0, 100, 100 255, 255, 0 = 60, 100, 100 0, 255, 0 = 120, 100, 100 0, 255, 255 = 180, 100, 100 0, 0, 255 = 240, 100, 100 255, 0, 255 = 300, 100, 100 With RGB values maxed for red, yellow, green, etc., the HSB values are always 100% saturation and value while the hue increases by increments of 60 around the color wheel. Now if you cut the numbers in half in all of that for RGB , using 128 instead of 255 in each case, then it's the exact same results as above in HSB except the value is cut in half from 100% to 50%. 128, 0, 0 = 0, 100, 50 128, 128, 0 = 60, 100, 50 0, 128, 0 = 120, 100, 50 0, 128, 128 = 180, 100, 50 0, 0, 128 = 240, 100, 50 128, 0, 128 = 300, 100, 50 Saturation is slightly more complicated. Take all of the zeros in the first list above and replace it with half of the other number, which in this case will be 128. 255, 128, 128 = 0, 50, 100 255, 255, 128 = 60, 50, 100 128, 255, 128 = 120, 50, 100 128, 255, 255 = 180, 50, 100 128, 128, 255 = 240, 50, 100 255, 128, 255 = 300, 50, 100 It's exactly the same as the first list, it just has the saturation reduced by half each time because the other channels were filled with what would otherwise be grey if the one or two channels with 255 in them had been equal to those. Here's a combination of reducing both the saturation and values by half. 128, 64, 64 = 0, 50, 50 128, 128, 64 = 60, 50, 50 64, 128, 64 = 120, 50, 50 64, 128, 128 = 180, 50, 50 64, 64, 128 = 240, 50, 50 128, 64, 128 = 300, 50, 50 Because the high numbers are cut in half the value is down to 50%, and because the other channels have half of the high number in them the saturation is also cut in half. Now let's look at some different hues. 255, 128, 0 = 30, 100, 100 128, 255, 0 = 90, 100, 100 0, 255, 128 = 150, 100, 100 0, 128, 255 = 210, 100, 100 128, 0, 255 = 270, 100, 100 255, 0, 127 = 330, 100, 100 Using the first one as an example- If 255, 0, 0 had a hue of 0°, and 255, 255, 0 had one of 60°, then only putting 128 into the green channel should only get us halfway to 60° because it's half of 255, so it comes out as a hue of 30°. Notice that the last one in the list had a 127 in it instead of 128. I put that there on purpose to show that there's colors in RGB that don't exist in HSB, which actually has far fewer total possible colors (3,682,561 vs 16,777,216). It doesn't matter if you have a 127 or 128 in that last row, because they both convert into the same HSB numbers. I think it applies to many other cases of 127/128 throughout these lists, but I haven't tested them all to see if it's all of them or just some. |
Posted By: yrizoud
Date Posted: 30 September 2011 at 7:37am
|
I hadn't realized that the HSB space (with 8bits per components) had a much worse resolution than the 24bit RGB space. In this case, HSB is only a temporary space so the solution is to use floats or doubles in HSB (range 0.0-1.0 instead of 0-255), and only convert back to 24bit RGB at the end. |
Posted By: shampoop
Date Posted: 30 September 2011 at 11:34am
|
Thanks for the help!
I had the same idea yrizoud, convert rgb to hsl with range 0.0 - 1.0, interpolate, and convert back to rgb. I used the conversions found http://www.geekymonkey.com/Programming/CSharp/RGB2HSL_HSL2RGB.htm - here and finished the implementation. Strange though, when going from blue (0,0,255) to yellow (255,255,0), I got green (0, 255, 128). Here are the differences from the example from my first post: [26, 27, 34] & [156, 190, 252] (top is rgb interpolation, bottom is hsl interpolation) 
The hsl ramp is way better IMO. here is the program to generate color ramps based on HSL interpolation: http://web.cecs.pdx.edu/~aelston/Palette/HSLInterpolation.zip - HSLInterpolation.zip |
Posted By: shampoop
Date Posted: 15 November 2011 at 11:19am
|
I made a little update to this program so it works with grafx2.
Basically, you input some colors and a file name and it will write the results to a file. Here is an example starting with the following pairs of colors: 
(Ctrl + 'C' to exit) Enter Starting Color Red [0 - 255]: 36 Green: [0 - 255]: 13 Blue: [0 - 255]: 47 Enter End Color Red [0 - 255]: 27 Green: [0 - 255]: 17 Blue: [0 - 255]: 149 Enter number of colors to generate: 4 Adding rgb 36 13 47 Adding rgb 46 17 78 Adding rgb 44 18 112 Adding rgb 27 17 149 Continue (Y or YES): y (Ctrl + 'C' to exit) Enter Starting Color Red [0 - 255]: 26 Green: [0 - 255]: 87 Blue: [0 - 255]: 230 Enter End Color Red [0 - 255]: 139 Green: [0 - 255]: 166 Blue: [0 - 255]: 214 Enter number of colors to generate: 4 Adding rgb 26 87 230 Adding rgb 67 116 221 Adding rgb 105 143 216 Adding rgb 139 166 214 Continue (Y or YES): y (Ctrl + 'C' to exit) Enter Starting Color Red [0 - 255]: 12 Green: [0 - 255]: 99 Blue: [0 - 255]: 40 Enter End Color Red [0 - 255]: 184 Green: [0 - 255]: 217 Blue: [0 - 255]: 72 Enter number of colors to generate: 4 Adding rgb 12 99 40 Adding rgb 27 148 22 Adding rgb 100 195 35 Adding rgb 184 217 72 Continue (Y or YES): y (Ctrl + 'C' to exit) Enter Starting Color Red [0 - 255]: 108 Green: [0 - 255]: 63 Blue: [0 - 255]: 49 Enter End Color Red [0 - 255]: 209 Green: [0 - 255]: 170 Blue: [0 - 255]: 50 Enter number of colors to generate: 4 Adding rgb 108 63 49 Adding rgb 140 88 51 Adding rgb 174 123 51 Adding rgb 209 170 50 Continue (Y or YES): y (Ctrl + 'C' to exit) Enter Starting Color Red [0 - 255]: 192 Green: [0 - 255]: 39 Blue: [0 - 255]: 1 Enter End Color Red [0 - 255]: 238 Green: [0 - 255]: 147 Blue: [0 - 255]: 134 Enter number of colors to generate: 4 Adding rgb 192 39 1 Adding rgb 241 51 11 Adding rgb 238 99 74 Adding rgb 238 147 134 Continue (Y or YES): y (Ctrl + 'C' to exit) Enter Starting Color Red [0 - 255]: 77 Green: [0 - 255]: 202 Blue: [0 - 255]: 238 Enter End Color Red [0 - 255]: 3 Green: [0 - 255]: 104 Blue: [0 - 255]: 116 Enter number of colors to generate: 4 Adding rgb 77 202 238 Adding rgb 17 193 233 Adding rgb 8 152 176 Adding rgb 3 104 116 Continue (Y or YES): n Enter filename and extension: palette.pal Writing to "C:\Users\XXXXX\Desktop\png\palette.pal" Done...Press key to exit. Now I drag that file into grafx2 and get the palette below. (make sure the file name ends in .pal) 
https://s3-us-west-1.amazonaws.com/adamjones/PaletteGenerator.zip - Here is the program https://s3-us-west-1.amazonaws.com/adamjones/PaletteGeneratorSource.zip - Here is the source code (VS2008 C#) |
Posted By: Sergiotron
Date Posted: 15 November 2011 at 1:43pm
| this is interesting! thanks for sharing :) |
Posted By: DawnBringer
Date Posted: 15 November 2011 at 3:24pm
|
So that's HSL-ramps, right. Interesting, esp. since I haven't yet written a such. HSL-ramping could be an interesting tool for certain operations...but I suspect that it may be of a bit limited use artistically. Since HSL is an abstract space with esp. (HSL)Saturation being a very funky concept + the fact that the singel most important thing about colors is their perceptual brightness.
But it looks real neat in 3D. Made a 32 color ramp from red to blue. Since Hue is cylindrical, you may wanna add a direction-parameter (So one could ramp red-blue thru violett). 
|
Posted By: shampoop
Date Posted: 15 November 2011 at 4:29pm
Yes, this tool is limited. Take the following example:
As you can see, the interpolation will not "wrap around." Instead, it interpolates across the whole HSL space. Also, straight interpolation leads to bland ramps. Adding some kind of variant or third space is something I will explore. Something like this: 
Anyway, the tool is a good way to mock up some quick ramps as long as the start and end color are somewhat close. Also cyclic ramps are easy to generate by having the next start color be the last end color. |
Posted By: linkboy84
Date Posted: 21 May 2015 at 9:50am
| 404 error? Has the tool been discontinued? |