language agnostic - Generate colors between red and green for a power meter?

- Stack Overflow

log in

careers 2.0

chat

meta

about

faq

search

Questions

Tags

Users

Badges

Unanswered

Ask Question

Generate colors between red and green for a power meter?

Hello World!
This is a collaboratively edited question and answer site for professional and enthusiast programmers. It's 100% free, no registration required. about faq tagged
20

27

I'm writing a java game and I want to implement a power meter for how hard you are going to shoot something. I need to write a function that takes a int between 0 - 100, and based on how high that number is, it will return a color between Green (0 on the power scale) and Red (100 on the power scale). Similar to how volume controls work:

graphics 7316 language-agnostic 5911 colors 4859 interpolation 621

What operation do I need to do on the Red, Green, and Blue components of a color to generate the colors between Green and Red? So, I could run say, getColor(80) and it will return an orangish color (its values in R, G, B) or getColor(10) which will return a more Green/Yellow rgb value. I know I need to increase components of the R, G, B values for a new color, but I don't know specifically what goes up or down as the colors shift from Green-Red.

asked 4 years ago viewed 12595 times active 3 months ago

Progress:

http://stackoverflow.com/questions/340209/generate-colors-between-red-and-green-for-a-power-meter[11/02/2013 21:37:04]

language agnostic - Generate colors between red and green for a power meter? - Stack Overflow

I ended up using HSV/HSB color space because I liked the gradiant better (no dark browns in the middle). The function I used was (in java): public Color { double H double S double B getColor(double power) = power * 0.4; // Hue (note 0.4 = Green, see huge chart below) = 0.9; // Saturation = 0.9; // Brightness
iOS / OS X Software Engineer (m/f) IP Labs GmbH Bonn, Germany Unix System Administrators (Team Lead) at Booking.com Booking.com Seattle, WA WEB DEVELOPER SoulCycle New York, NY

return Color.getHSBColor((float)H, (float)S, (float)B); } Where "power" is a number between 0.0 and 1.0. 0.0 will return a bright red, 1.0 will return a bright green. Java Hue Chart:

Thanks everyone for helping me with this!

language-agnostic graphics colors interpolation

Linked
Color scaling function Is there a good way to do color cycling in javascript? Generate colors between red and green for an input range Whats the best way to create a relative color algorithm for data in a html table

share | improve this question

edited Oct 5 '12 at 15:21

asked Dec 4 '08 at 10:56 Simucal 28.5k 28 129 217

Should you not invert the power? Assuming red is the highest hit, and you are working between 0.1 and 0.4, the higher the power the lower the H Adriaan Davel Nov 20 '12 at 6:40

http://stackoverflow.com/questions/340209/generate-colors-between-red-and-green-for-a-power-meter[11/02/2013 21:37:04]

language agnostic - Generate colors between red and green for a power meter? - Stack Overflow

feedback

Related
Followup: Finding an accurate distance between colors Color scaling function

8 Answers

active

oldest

votes

Color Interpolation Between 3 Colors in .NET Color Interpolation

33

This should work - just linearly scale the red and green values. Assuming your max red/green/blue value is 255, and n is in range 0-100 R=(255*n)/100 G=(255*(100-n))/100; B=0 (Amended for integer maths, tip of the hat to Ferrucio) Another way to do would be to use a HSV colour model, and cycle the hue from 0 degrees (red) to 120 degrees (green) which whatever saturation and value suited you. This should give a more pleasing gradient. Here's a demonstration of each technique - top gradient uses RGB, bottom uses HSV:

How to interpolate hue values in HSV colour space? What's the most effective way to interpolate between two colors? (pseudocode and bitwise ops expected) OpenGL Color Interpolation across vertices Constructing colours for maximum contrast matlab - plot 2D rectangle with interpolated color Generating a list of colors, blue through red, 0% through 100% Color interpolation between 3 colors How do I generate contrasting colors?

share | improve this answer

edited Aug 7 '12 at 15:52 Neal 49.3k 10 51 101

answered Dec 4 '08 at 10:59 Paul Dixon 80.7k 10 134 204

detect if an image is generally red, green, blue, or black Python: Map float range [0.0, 1.0] to color range [red, green]? Bilinear interpolation color scheme Java: Better color selection algorithm How to interpolate between colors for a polygon in Bing Maps Generate colors between red and green for an input range Bitwise Operations How to change existing color? Bilinear Color Interpolation and

If R, G, B and n are integer types, make sure you re-write those expressions to do the multiplication first or you won't get smooth transitions. i.e. R=(255*n)/100 Ferruccio Dec 4 '08 at 11:19

2 It's much, much better to do this in HSV space. DJClayworth Dec 4 '08 at 22:31
@DJClayworth, yea I went with HSV. Simucal Jan 14 '09 at 6:59 +1; I was going to ask a new question about how to improve a color algorithm i have for coloring a bar chart in HTML/PHP... SO suggested this question as similar and your answer helped me fix the issue without having to ask the question! Thanks! beggs Jul 30 '09 at 3:49

http://stackoverflow.com/questions/340209/generate-colors-between-red-and-green-for-a-power-meter[11/02/2013 21:37:04]

language agnostic - Generate colors between red and green for a power meter? - Stack Overflow BufferedImage

feedback

Python: convert values between 0 and 1 to color range red to blue C++ - Coloured Pixels The algorithm to generate a set of colors for palette? How to override color interpolation in XNA? Perspective correction for lighting

Off the top of my head, here is the green-red hue transition in HSV space, translated to RGB:

15

blue = 0.0 if 0<=power<0.5: #first, green stays at 100%, red raises to 100% green = 1.0 red = 2 * power if 0.5<=power<=1: #then red stays at 100%, green decays red = 1.0 green = 1.0 - 2 * (power-0.5) The red, green, blue values in the above example are percentages, you'd probably want to multiply them by 255 to get the most used 0-255 range.
share | improve this answer answered Dec 4 '08 at 11:16 Rafa Dowgird 12.7k 3 24 55

feedback

I have previously asked the same (extremely similar) question here:

http://stackoverflow.com/questions/168838/color-scaling-function
share | improve this answer answered Dec 4 '08 at 11:03 Tomas Pajonk 1,977 1 16 33

http://stackoverflow.com/questions/340209/generate-colors-between-red-and-green-for-a-power-meter[11/02/2013 21:37:04]

language agnostic - Generate colors between red and green for a power meter? - Stack Overflow

feedback

Linearly interpolating between green and red almost should work, except that in the middle there will be muddy brown color. The most flexible and best looking solution is to have an image file somewhere that has the exact color ramp you want. And then lookup the pixel value in there. This has the flexibility that you can tweak the gradient to be just right . If you still want to do it from code, then it's probably best to interpolate between green and yellow colors in the left side, and between yellow and red on the right side. In RGB space, green is (R=0, G=255, B=0), yellow is (R=255, G=255, B=0), red is (R=255, G=0, B=0) - this is assuming each color component goes from 0 to 255.
share | improve this answer answered Dec 4 '08 at 11:07 NeARAZ 3,881 11 26

feedback

You need to linearly interpolate (LERP) the color components. Here's how it's done in general, given a start value v0 , an end value v1 and the required ratio (a normalized float between 0.0 and 1.0): v = v0 + ratio * (v1 - v0) This gives v0 when ratio is 0.0, v1 when ratio is 1.0, and everything between in the other cases. You can do this either on the RGB components, or using some other color scheme, like HSV or HLS. The latter two will be more visually pleasing, since they work on hue and brightness compoments that map better to our color perception.
share | improve this answer answered Dec 4 '08 at 11:11 efotinis 4,397 1 11 21

http://stackoverflow.com/questions/340209/generate-colors-between-red-and-green-for-a-power-meter[11/02/2013 21:37:04]

language agnostic - Generate colors between red and green for a power meter? - Stack Overflow

feedback

import java.awt.Color;

public class ColorUtils { public static Color interpolate(Color start, Color end, float p) { float[] startHSB = Color.RGBtoHSB(start.getRed(), start.getGreen(), start.getBlue(), null); float[] endHSB = Color.RGBtoHSB(end.getRed(), end.getGreen(), end.getBlue(), null); float brightness = (startHSB[2] + endHSB[2]) / 2; float saturation = (startHSB[1] + endHSB[1]) / 2; float hueMax = 0; float hueMin = 0; if (startHSB[0] > endHSB[0]) { hueMax = startHSB[0]; hueMin = endHSB[0]; } else { hueMin = startHSB[0]; hueMax = endHSB[0]; } float hue = ((hueMax - hueMin) * p) + hueMin; return Color.getHSBColor(hue, saturation, brightness); } }
share | improve this answer answered Jul 5 '11 at 14:05 mawi 11 1

feedback

http://stackoverflow.com/questions/340209/generate-colors-between-red-and-green-for-a-power-meter[11/02/2013 21:37:04]

language agnostic - Generate colors between red and green for a power meter? - Stack Overflow

If I were asked to do this, could you not generate a color gradient?

I know in C# you can quite easily, then just access a color part way through the gradient. Is this possible in JAVA?
share | improve this answer answered Dec 4 '08 at 11:07 TK. 6,961 21 68 101

1 Nice to know how to do it yourself though Paul Dixon Dec 4 '08 at 11:08
This is true, altthough, this method could work for any color gradient without having to worry too much about the Gradient Stops. TK. Dec 4 '08 at 11:14

feedback

Short Copy'n'Paste answer...

On Java Std: int getTrafficlightColor(double value){ return java.awt.Color.HSBtoRGB((float)value/3f, 1f, 1f); } On Android: int getTrafficlightColor(double value){ return android.graphics.Color.HSVToColor(new float[]{(float)value*120f,1f,1f}); } note: value is a number between 0 and 1 indicating the red-to-green condition.
share | improve this answer answered Nov 6 '12 at 10:49 willsteel 607 3 13

http://stackoverflow.com/questions/340209/generate-colors-between-red-and-green-for-a-power-meter[11/02/2013 21:37:04]

language agnostic - Generate colors between red and green for a power meter? - Stack Overflow

feedback

Your Answer

Name

Email

log in

or

required, but never shown

Home Page

Post Your Answer

By posting your answer, you agree to the privacy policy and terms of service.

http://stackoverflow.com/questions/340209/generate-colors-between-red-and-green-for-a-power-meter[11/02/2013 21:37:04]

language agnostic - Generate colors between red and green for a power meter? - Stack Overflow

Not the answer you're looking for? Browse other questions tagged language-agnostic
graphics colors interpolation or ask your own question.

question feed

about | faq | blog | chat | data | legal | privacy policy | jobs | advertising info | mobile | contact us | feedback

stackoverflow.com api/apps careers 2.0 serverfault.com superuser.com meta area51 webapps gaming ubuntu webmasters cooking game development math photography stats tex english theoretical cs programmers unix apple wordpress physics homeimprovement gis electricalengineering android security bicycles dba drupal sharepoint scifi&fantasy userexperience skeptics rpg judaism mathematica travel
site design / logo 2013 stack exchange inc; user contributions licensed under cc-wiki with attribution required

rev 2013.2.9.1

http://stackoverflow.com/questions/340209/generate-colors-between-red-and-green-for-a-power-meter[11/02/2013 21:37:04]