I know that this won't directly invert a colour, it will just 'oppose' it. I was wondering if anyone knew a simple way (a few lines of code) to invert a colour from any given colour?
At the moment I have this (which isn't exactly the definition of an invert, because if I pass it a grey / gray colour it will return something extremely similar e.g. 127, 127, 127):
const int RGBMAX = 255;
Color InvertMeAColour(Color ColourToInvert)
{
return Color.FromArgb(RGBMAX - ColourToInvert.R,
RGBMAX - ColourToInvert.G, RGBMAX - ColourToInvert.B);
}
It depends on what do you mean by "inverting" a color
Your code provides a "negative" color.
Are you looking for transform red in cyan, green in purple, blue in yellow (and so on) ? If so, you need to convert your RGB color in HSV mode (you will find here to make the transformation).
Then you just need to invert the Hue value (change Hue by 360-Hue) and convert back to RGB mode.
EDIT: as Alex Semeniuk has mentioned, changing Hue by (Hue + 180) % 360 is a better solution (it does not invert the Hue, but find the opposite color on the color circle)
You can use :
MyColor=Color.FromArgb(MyColor.ToArgb()^0xffffff);
It will invert MyColor.
Try this:
uint InvertColor(uint rgbaColor)
{
return 0xFFFFFF00u ^ rgbaColor; // Assumes alpha is in the rightmost byte, change as needed
}
If you want to change every color, try a rotational function (shifting or adding) rather than a flipping function (inverting). In other words, consider the range of 0 to 255 for each single color (red, green, and blue) to be wrapped, connected at the tips like a circle of values. Then shift each color around the cirle by adding some value and doing mod 256. For example, if your starting value for red is 255, and you add 1, you get 0. If you shift all three colors by 128, you get dramatically different values for every original color in the picture, even the grays. Gray 127, 127, 127 becomes white 255, 255, 255. Gray 128, 128, 128 becomes black 0, 0, 0. There's a photographic effect like that called Solarization, discovered by accident by Man Ray in the 1930's.
You can also do rotational operations on each color (red, green, blue) by a different amount to really mess up a picture.
You can also do rotational operations on hue, shifting the hue of every original color by some amount on the hue circle, which alters all the colors without altering the brightness, so the shadows still look like shadows, making people look like Simpsons or Smurphs for example.
The code for a shift by 128 could look like:
public static Color Invert(this Color c) => Color.FromArgb(c.R.Invert(), c.G.Invert(), c.B.Invert());
public static byte Invert(this byte b) {
unchecked {
return (byte)(b + 128);
}
}
Invert the bits of each component separately:
Color InvertMeAColour(Color ColourToInvert)
{
return Color.FromArgb((byte)~ColourToInvert.R, (byte)~ColourToInvert.G, (byte)~ColourToInvert.B);
}
EDIT: The ~ operator does not work with bytes automatically, cast is needed.
What you already have is an RGB-Invert. There are other ways to classify colors and hence other definitions for the Inverse of a Color.
But it sounds like maybe you want a contrasting Color, and there isn't a simple Inversion that is going to work for all colors including RGB(127, 127, 127).
What you need is 1) a conversion to HSV (see ThibThibs answer) and invert the Hue, but also 2) check if the Hue isn't to close to the middle and if so go to either fully bright or fully dark.
The most simple and lazy way I made it to work with having not only triple 12x, but mixed values, is this:
Color invertedColor= Color.FromArgb(fromColor.ToArgb() ^ 0xffffff);
if (invertedColor.R > 110 && invertedColor.R < 150 &&
invertedColor.G > 110 && invertedColor.G < 150 &&
invertedColor.B > 110 && invertedColor.B < 150)
{
int avg = (invertedColor.R + invertedColor.G + invertedColor.B) / 3;
avg = avg > 128 ? 200 : 60;
invertedColor= Color.FromArgb(avg, avg, avg);
}
Now, invertedColor has a different color that the original, even if we have a 128, 128, 128 or close to it color value.
I've created this simple function for VB.NET:
Public Shared Function Invert(ByVal Culoare As Color) As Color
Return Color.FromArgb(Culoare.ToArgb() Xor &HFFFFFF)
End Function
And this one for C#:
public static Color Invert(Color Culoare)
{
return Color.FromArgb(Culoare.ToArgb() ^ 0xFFFFFF);
}
Related
So basically, I need a method in which I can pass values of red, green and blue and the method should return whether that combination of RGB values result in a visibly Red-ish color Green-ish color or Blue-ish color. And if the combination doesn't result in any of those three colors it should return false.
I tried to do this by using conditional statements, tried a few variations, but nothing is accurate.
For example I tried:
if (B > 100 && B > G / 2 && B > R / 2)
{
blueCount++;
}
else if (G > 100 && G > G / 2 && G > B / 2)
{
greenCount++;
}
else if (R > 100 && R > G / 2 && R > B / 2)
{
redCount++;
}
// R , G , B contains 0-255 values
If you define "being color-ish" as:
the color value is above 100
the color value is at least twice as the 2 other values
your current code states "at least half of the 2 other values" but this can't work because if you have "R:199 G:101 B:102", you could say that it is green-ish because G is above 100 and more than half 199 and half 102 (when it's obviously red-ish)
then your code looks almost good (just replace / with *).
I would just use an enum for the result:
enum Ish
{
Other, // 0 so this would be false if you convert it to bool
Red, // 1
Green, // 2
Blue // 3
}
if (R>100 && R>G*2 && R>B*2)
return Ish.Red;
if (G>100 && G>R*2 && G>B*2) // you had G>G/2 here /!\
return Ish.Green;
if (B>100 && B>G*2 && B>R*2)
return Ish.Blue;
return Ish.Other;
I used 2 for twice, but I think you can use other values as long as it is >1 (you can't say blue is dominant if B <= R for example)
This would be the redish values possible for R=100 (left image with factor 2, right image with factor 1):
And this for R=200 (left image with factor 2, right image with factor 1):
Therefore you could probably use a factor between 1 and 2
For R=200 you can see the red-ish colors depending on the factor below:
I suggest using different color space: HSV or HSL instead of RGB.
Now, to declare the color being greenish you have to check
If color has H (Hue) within some range (Green tinge dominates over other colors)
If color has S (Saturation) above some threshold in order not to be too colorless (grayish)
If color has V or L (Value or Luminocity) above some threshold in order not to be too dark (blackish)
https://vignette.wikia.nocookie.net/psychology/images/e/e0/HSV_cylinder.png/revision/latest?cb=20071105130143
Don't try to hard to encounter a perfectly accurate answer for this. After all, there is no such thing as a perfect defined line between red-ish and not red-ish.
The way I would approach this is: first, check that color is not too grey/black. This can be done using the sum of the three components (keep in mind that full black is 0;0;0 on RGB, greys are usually something like 55;55;55). For example, you could consider as too dark any color whose components sum up less than 300. Play a little bit with any RGB picker tool to find the threshold you like the most.
EDIT: from comment below I see sum of three components won't work, for example the 255;0;0 would be consider as too grey. So you have to use maximum value of the three components. For example, 20;0;0 would still be quite dark, but 100;0;0 not so much. Thanks to #rafalon for pointing this out.
Then, you would need to check that this color is close to a "pure" color, that is, red, green or blue. In order to do that, you would need to compare the most prominent component with the other two. You have to compare this highest component with the other two, individually. This is because a color like 255;0;255 is not redish at all, while a 255;128;128 could be considered as such. So combination of the two less prominents components won't do the trick.
You could consider a color to be red-ish if both Green and Blue have a value lower than some percentage of red. Take for example this percentage to be 50%. Then, you need to check that green is less than 0.5 * red AND blue is less than 0.5 * red. Again, you should play a bit with RGB colors to find a percentage that you think it suits.
TL;DR: for a color with components r, g and b, this color will be a "pure" color if:
Max(r, g, b) > tooDarkValue
r > somePercentage * Max(r, g, b) AND g > somePercentage * Max(r, g, b) AND b > somePercentage * Max(r, g, b)
Note that second condition will always be true for Max(r, g, b), (any number is greater than a percentage of itself), so no need to evaluate which component is highest and then have 3 different conditions
I want to programmatically recolor an image as seen below:
So how can I do that without fully painting the whole image to one solid color?
I suggest converting the RGB (Red Green Blue) color to a HSB/HSV (Hue Satuation Brightness / Hue Saturation Value) color. Then you can shift the colors by changing the Hue value. Keep Saturation and Value (Brightness) and convert it back to RGB.
You can get the H, S, V values like this:
Color color = Color.FromArgb(red, green, blue);
float h = color.GetHue();
float s = color.GetSaturation();
float v = color.GetBrightness();
There is no built-in way for the reverse transformation. You can find a C# example here: Converting HSV to RGB colour using C#. Also, don't forget to copy the alpha component containing the transparency information, if the image has transparent parts.
The hue is measured in degrees, ranging from 0.0f through 360.0f, so would change the hue like this:
float delta = 120f; // Arbitrary value in the range 0.0f through 360.0f
h = (h + delta) % 360f;
See also: HSL and HSV
Another excellent article with C# examples: Manipulating colors in .NET - Part 1
As a follow up to this question: (How can I draw legible text on a bitmap (Winforms)?), I'm drawing legible but small text on top of a bitmap by calculating the "average" color beneath the text, and choosing an appropriately contrasting color for the text.
I've stolen Till's code from https://stackoverflow.com/a/6185448/3784949 for calculating "average" bmp color. Now I'm looking at the "color difference" algorithm suggested by http://www.w3.org/TR/AERT#color-contrast.
This suggests that I need to make my color brightness at least 125 "units" greater, and my color difference at least 500 units greater, where brightness and difference are calculated like this:
Color brightness is determined by the following formula:
((Red value X 299) + (Green value X 587) + (Blue value X 114)) / 1000
Color difference is determined by the following formula:
(maximum (Red value 1, Red value 2) - minimum (Red value 1, Red value 2)) + (maximum (Green value 1, Green value 2) - minimum (Green value 1, Green value 2)) + (maximum (Blue value 1, Blue value 2) - minimum (Blue value 1, Blue value 2))
How do I implement this? I can set my color by ARGB (I believe, it's a label foreground color); but how do I calculate how much to change each individual value to achieve the difference being required here? I'm not familiar with the math required to break the "difference" units down into their component parts.
As an example, my "average" for one bitmap is: Color [A=255, R=152, G=138, B=129]. How do I "add" enough to each part to achieve the two differences?
EDIT: To be specific, my confusion lies here:
it looks like I need to add to three separate values (R,G,B) to achieve two different goals (new RGB adds up to original plus 125, new RGB adds up to original plus 500
it looks like I may need to "weight" my added brighness values to add more to G than R than B.
I have no idea how to address #1. And I'm not positive I'm correct about #2.
EDIT: Proposed solution
I'm currently experimenting with this:
private Color GetContrastingFontColor(Color AverageColorOfBitmap,
List<Color> FavoriteColors)
{
IEnumerable<Color> AcceptableColors =
(IEnumerable<Color>)FavoriteColors.Where(clr =>
(GetColorDifferenceAboveTarget(AverageColorOfBitmap, clr, (float)200) > 0)
&& (GetBrightnessAboveTarget(AverageColorOfBitmap, clr, (float).125) > 0))
.OrderBy(clr => GetColorDifferenceAboveTarget(
AverageColorOfBitmap, clr, (float)200));
return AcceptableColors.DefaultIfEmpty(Color.Aqua).First();
}
It's a good framework, but I need to work on selecting the "best" candidate from the list. Right now it's just returning "the qualifying color with the greatest color difference that meets the brightness criteria". However, this allows me to modify the float values (W3's "500 color difference required" is complete crap, zero KnownColors qualify) and experiment.
Support code:
private float GetBrightnessAboveTarget(Color AverageColorOfBitmap,
Color proposed, float desiredDifference)
{
float result = proposed.GetBrightness() - AverageColorOfBitmap.GetBrightness();
return result - desiredDifference;
}
private float GetColorDifferenceAboveTarget(Color avg, Color proposed,
float desiredDifference)
{
float r1 = Convert.ToSingle(MaxByte(Color.Red, avg, proposed));
float r2 = Convert.ToSingle(MinByte(Color.Red, avg, proposed));
float r3 = Convert.ToSingle(MaxByte(Color.Green, avg, proposed));
float r4 = Convert.ToSingle(MinByte(Color.Green, avg, proposed));
float r5 = Convert.ToSingle(MaxByte(Color.Blue, avg, proposed));
float r6 = Convert.ToSingle(MinByte(Color.Blue, avg, proposed));
float result = (r1 - r2) + (r3 - r4) + (r5 - r6);
return result - desiredDifference;
}
private byte MaxByte(Color rgb, Color x, Color y)
{
if (rgb == Color.Red) return (x.R >= y.R) ? x.R : y.R;
if (rgb == Color.Green) return (x.G >= y.G) ? x.G : y.G;
if (rgb == Color.Blue) return (x.B >= y.B) ? x.B : y.B;
return byte.MinValue;
}
private byte MinByte(Color rgb, Color x, Color y)
{
if (rgb == Color.Red) return (x.R <= y.R) ? x.R : y.R;
if (rgb == Color.Green) return (x.G <= y.G) ? x.G : y.G;
if (rgb == Color.Blue) return (x.B <= y.B) ? x.B : y.B;
return byte.MinValue;
}
This is more an answer to the original question. I call it a homemeade outline.
Using transparency plus the maximum and minimum brightness you can get (white&black) it creates good contrast, at least it looks pretty good on my screen.
It is a mixture of shadowing and transparency. I have subtracted a little from the red component to get the aqua you thought about..
It is creating first a darker version of the background by printing the text 1 pixel up left and the 1 pixel down right. Finally it prints a bright version on top of that. Note that it is not really using black and white because with its semi-transparent pixels the hue really it that of each background pixel.
For an actual printout you will have to experiment, especially with the font but also with the two transparencies!
Also you should maybe switch between white on a black shadow and black on a white highlight, depending on the brightness of the spot you print on. But with this homemeade outline it really will work on both dark and bright backgrounds, it'll just look a little less elegant on a bright background.
using (Graphics G = Graphics.FromImage(pictureBox1.Image) )
{
Font F = new Font("Arial", 8);
SolidBrush brush0 = new SolidBrush(Color.FromArgb(150, 0, 0, 0))
SolidBrush brush1 = new SolidBrush(Color.FromArgb(200, 255, 255, 222))
G.DrawString(textBox1.Text, F, brush0 , new Point(x-1, y-1));
G.DrawString(textBox1.Text, F, brush0 , new Point(x+1, y+1));
G.DrawString(textBox1.Text, F, brush1, new Point(x, y));
}
Edit: This is called from a button click but really should be in the paint event.
There the Graphics object and its using block G would be replaced by simply the e.Graphics event parameter..
I noticed that you are using a 'transparent' label to display the data to avoid the details of Graphics.DrawString and the Paint event.
Well that can be done and the result looks rather similar:
string theText ="123 - The quick brown fox..";
Label L1, L2, L3;
pictureBox1.Controls.Add(new trLabel());
L1 = (trLabel)pictureBox1.Controls[pictureBox1.Controls.Count - 1];
L1.Text = theText;
L1.ForeColor = Color.FromArgb(150, 0, 0, 0);
L1.Location = new Point(231, 31); // <- position in the image, change!
L1.Controls.Add(new trLabel());
L2 = (trLabel)L1.Controls[pictureBox1.Controls.Count - 1];
L2.Text = theText;
L2.ForeColor = Color.FromArgb(150, 0, 0, 0);
L2.Location = new Point(2, 2); // do not change relative postion in the 1st label!
L2.Controls.Add(new trLabel());
L3 = (trLabel)L2.Controls[pictureBox1.Controls.Count - 1];
L3.Text = theText;
L3.ForeColor = Color.FromArgb(200, 255, 255, 234);
L3.Location = new Point(-1,-1); // do not change relative postion in the 2nd label!
However you will note that due to the impossiblity of having really transparent controls in Winforms we need a little extra effort. You probably use a label subclass like this:
public partial class trLabel : Label
{
public trLabel()
{
SetStyle(ControlStyles.SupportsTransparentBackColor | ControlStyles.UserPaint, true);
BackColor = Color.Transparent;
Visible = true;
AutoSize = true;
}
}
This seems to work. But in reality it only seems that way, because upon creation each label gets a copy of its current background from its parent. Which never gets updated. Which is why I have to add the 2nd & 3rd label not to the picturebox I display the image in, but to the 1st and 2nd
'transparent' label respectively.
There simply is not real transparency between Winforms controls unless you draw things yourself.
So the DrawString solution is not really complicated. And it gives you the bonus of allowing you to twist several properties of the Graphics object like Smoothingmode, TextContrast or InterpolationMode
Short suggestion: Just use black or white.
The algorithms are giving you a passing criteria, but not an algorithm for determining what colors meet that criteria. So, you will have to create such an algorithm. A naive algorithm would be to loop through every possible color, and calculate the color difference, then see if the difference is greater than 125, and if so you have a good color to use. Better, you could search for the color with the maximum difference.
But that's foolish - if I gave you the color R=152, G=138, B=129 - what do YOU think is a very good color to contrast that with? Just by gut, I'm gonna guess 0,0,0. I picked a color with the farthest possible R value, G value, and B value. If you gave me the color 50,200,75 I'd pick R=255, G=0, B=255. Same logic. So my algorithm is if R<128 choose R = 255, else choose R = 0. Same thing for G, and B.
Now that algorithm only picks RGB values that are 0 or 255. But if you don't like that, now you need a mathematical definition for what is "pretty" and I'll leave you to figure that out on your own. :-)
How can I do this?
int blue = Color.Blue.ToArgb();
int yellow = Color.Yellow.ToArgb();
blue = (blue + yellow) / 2;
Color Blue = ConvertFromRGB(blue);
I think what you're looking for is this:
var blueColor = Color.FromArgb((blue + yellow) / 2);
However, I don't think it will give you the result you actually want.
You must be quite careful about mixing colours in this way. The int value representing a colour in ARGB form is fairly arbitrary as far as the coder is concerned. It's probably best to mix RGB components individually, like:
var color1 = Color.Blue;
var color2 = Color.Yellow;
var blueColor = Color.FromArgb((color1.R + color2.R) / 2,
(color1.G + color2.G) / 2, (color1.B + color2.B) / 2);
This interpolates (taking the centre point) between two colours, and should give you something that looks much more like the blend of the two colours.
(Note that I assume you're referring to the System.Drawing.Color type here.)
I think this is what you might be looking for:
int blue = Color.Blue.ToArgb();
int yellow = Color.Yellow.ToArgb();
blue = (blue + yellow)/2;
Color Blue = Color.FromArgb(blue);
Just average the colors component-wise, if that is what you are trying to do:
Color average = ConvertFromRGB((Color.Blue.R + Color.Yellow.R) / 2), (Color.Blue.G + Color.Yellow.G) / 2), (Color.Blue.B + Color.Yellow.B) / 2));
It would be useful to know what you're expecting from the second assign to 'blue' - you certainly won't be getting a shade of blue (more like red).
The problem is that the Color class keeps its ARGB values as Int32 because each of the 4 bytes represents one of the Alpha, Red, Blue and Green values.
Asking to add together two colours in their Int32 form is going to cause unexpected values, as one byte 'overflows' into the next (what happens when you add 255 and 1?)
Color.Blue, for example, is -16776961. That's because it has 4 bytes that look like this:
0: 255
1: 0
2: 0
3: 255
Or:
11111111 00000000 00000000 11111111
You'll find it much clearer to break the ARGB components down into individual bytes, System.Drawing.Color allows you to do this via its instance properties:
blue.A
blue.R
blue.G
blue.B
You can safely manipulate these, but remember that they're an instance of Byte, so you can't assign a value out of the range 0-255. To create a colour from the component bytes, use:
Color.FromArgb(a, r, g, b);
Where a, r, g, b are bytes.
Somewhat confusingly, Color.FromArgb accepts int parameters, rather than bytes. I'm afraid I've no idea why, someone better than me will have to answer that, but casting a byte to an int with produce an int with a value between 0 and 255, so it's safe to use this. Color also has a private CheckByte class that it passes each argument into so you'll get an ArgumentException rather than an unexpected color (that you'll likely get with your non-component approach).
What's the easiest way to convert a percentage to a color ranging from Green (100%) to Red (0%), with Yellow for 50%?
I'm using plain 32bit RGB - so each component is an integer between 0 and 255. I'm doing this in C#, but I guess for a problem like this the language doesn't really matter that much.
Based on Marius and Andy's answers I'm using the following solution:
double red = (percent < 50) ? 255 : 256 - (percent - 50) * 5.12;
double green = (percent > 50) ? 255 : percent * 5.12;
var color = Color.FromArgb(255, (byte)red, (byte)green, 0);
Works perfectly - Only adjustment I had to make from Marius solution was to use 256, as (255 - (percent - 50) * 5.12 yield -1 when 100%, resulting in Yellow for some reason in Silverlight (-1, 255, 0) -> Yellow ...
I made this function in JavaScript. It returns the color is a css string. It takes the percentage as a variable, with a range from 0 to 100. The algorithm could be made in any language:
function setColor(p){
var red = p<50 ? 255 : Math.round(256 - (p-50)*5.12);
var green = p>50 ? 255 : Math.round((p)*5.12);
return "rgb(" + red + "," + green + ",0)";
}
What you probably want to do is to assign your 0% to 100% some points in a HSV or HSL color-space. From there you can interpolate colors (and yellow just happens to be between red and green :) and convert them to RGB. That will give you a nice looking gradient between the two.
Assuming that you will use the color as a status indicator and from a user-interface perspective, however, that is probably not such a good idea, since we're quite bad at seeing small changes in color. So dividing the value into, for example, three to seven buckets would give you more noticeable differences when things change, at the cost of some precision (which you most likely would not be able to appreciate anyway).
So, all the math aside, in the end I'd recommend a lookup table with the following colors with v being the input value:
#e7241d for v <= 12%
#ef832c for v > 12% and v <= 36%
#fffd46 for v > 36% and v <= 60%
#9cfa40 for v > 60% and v <= 84%
#60f83d for v > 84%
These have been very naïvely converted from HSL values (0.0, 1.0, 1.0), (30.0, 1.0, 1.0), (60.0, 1.0, 1.0), (90.0, 1.0, 1.0), (120.0, 1.0, 1.0), and you might want to adjust the colors somewhat to suit your purposes (some don't like that red and green aren't 'pure').
Please see:
Using HSL Color (Hue, Saturation, Luminosity) To Create Better-Looking GUIs for some discussion and
RGB and HSL Colour Space Conversions for sample C# source-code.
In pseudocode.
From 0-50% your hex value would be FFxx00 where:
XX = ( Percentage / 50 ) * 255 converted into hex.
From 50-100 your hex value would be xxFF00 where:
XX = ((100-Percentage) / 50) * 255 converted into hex.
Hope that helps and is understandable.
This is a nice clean solution that improves on the currently accepted answer in three ways:
Removes the magic number (5.12), therefore making the code easier to follow.
Won't produce the rounding error that's giving you -1 when the percentage is 100%.
Allows you to customise the minimum and maximum RGB values you use, so you can produce a lighter or darker range than simple rgb(255, 0, 0) - rgb(0, 255, 0).
The code shown is C# but it's trivial to adapt the algorithm to any other language.
private const int RGB_MAX = 255; // Reduce this for a darker range
private const int RGB_MIN = 0; // Increase this for a lighter range
private Color getColorFromPercentage(int percentage)
{
// Work out the percentage of red and green to use (i.e. a percentage
// of the range from RGB_MIN to RGB_MAX)
var redPercent = Math.Min(200 - (percentage * 2), 100) / 100f;
var greenPercent = Math.Min(percentage * 2, 100) / 100f;
// Now convert those percentages to actual RGB values in the range
// RGB_MIN - RGB_MAX
var red = RGB_MIN + ((RGB_MAX - RGB_MIN) * redPercent);
var green = RGB_MIN + ((RGB_MAX - RGB_MIN) * greenPercent);
return Color.FromArgb(red, green, RGB_MIN);
}
Notes
Here's a simple table showing some percentage values, and the corresponding red and green proportions we want to produce:
VALUE GREEN RED RESULTING COLOUR
100% 100% 0% green
75% 100% 50% yellowy green
50% 100% 100% yellow
25% 50% 100% orange
0% 0% 100% red
Hopefully you can see pretty clearly that
the green value is 2x the percentage value (but capped at 100)
the red is the inverse: 2x (100 - percentage) (but capped at 100)
So my algorithm calculates the values from a table looking something like this...
VALUE GREEN RED
100% 200% 0%
75% 150% 50%
50% 100% 100%
25% 50% 150%
0% 0% 200%
...and then uses Math.Min() to cap them to 100%.
I wrote this python function based on the javascript code. it takes a percentage as a decimal. also i have squared the value to keep the colours redder for longer down the percentage scale. I also narrowed the range of colours from 255 to 180 to give a darker red and green at each end. these can be played with to give nice colours. I'd like to add a touch of orange in the middle, but i gotta get on with proper work, boo.
def getBarColour(value):
red = int( (1 - (value*value) ) * 180 )
green = int( (value * value )* 180 )
red = "%02X" % red
green = "%02X" % green
return '#' + red + green +'00'
As yellow is a mix of red and green, you can probably start with #F00 and then slide green up until you hit #FF0, then slide red down to #0F0:
for (int i = 0; i < 100; i++) {
var red = i < 50
? 255
: 255 - (256.0 / 100 * ((i - 50) * 2));
var green = i < 50
? 256.0 / 100 * (i * 2)
: 255;
var col = Color.FromArgb((int) red, (int) green, 0);
}
I use the following Python routines to blend between colours:
def blendRGBHex(hex1, hex2, fraction):
return RGBDecToHex(blendRGB(RGBHexToDec(hex1),
RGBHexToDec(hex2), fraction))
def blendRGB(dec1, dec2, fraction):
return [int(v1 + (v2-v1)*fraction)
for (v1, v2) in zip(dec1, dec2)]
def RGBHexToDec(hex):
return [int(hex[n:n+2],16) for n in range(0,len(hex),2)]
def RGBDecToHex(dec):
return "".join(["%02x"%d for d in dec])
For example:
>>> blendRGBHex("FF8080", "80FF80", 0.5)
"BFBF80"
Another routine wraps this to blend nicely between numerical values for "conditional formatting":
def colourRange(minV, minC, avgV, avgC, maxV, maxC, v):
if v < minV: return minC
if v > maxV: return maxC
if v < avgV:
return blendRGBHex(minC, avgC, (v - minV)/(avgV-minV))
elif v > avgV:
return blendRGBHex(avgC, maxC, (v - avgV)/(maxV-avgV))
else:
return avgC
So, in Jonas' case:
>>> colourRange(0, "FF0000", 50, "FFFF00", 100, "00FF00", 25)
"FF7F00"
My solution for ActionScript 3:
var red:Number = (percentage <= 50) ? 255 : 256 - (percentage - 50) * 5.12;
var green:Number = (percentage >= 50) ? 255 : percentage * 5.12;
var redHex:Number = Math.round(red) * 0x10000;
var greenHex:Number = Math.round(green) * 0x100;
var colorToReturn:uint = redHex + greenHex;
Because it's R-G-B, the colors go from integer values of -1 (white), to -16777216 for black. with red green and yellow somewhere in the middle that. Yellow is actually -256, while red is -65536 and green is -16744448. So yellow actually isn't between red and green in the RGB notation. I know that in terms of wavelenghts, green is on one side, and red is on the other side of the spectrum, but I've never seen this type of notation used in computers, as the spectrum doesn't represent all visible colours.