2

I have a color hex string stored in the database like 0x78dce6b0; I can convert this to an ARGB color using:

string colorString=0x78dce6b0;
int hexColor = Convert.ToInt32(colorString ?? "0", 16);
Color colorTL = Color.FromArgb(hexColor);

Now I want to convert this to use in an HTML page, so I need to convert into an HTML value like #cc3388. If I directly convert using ColorTranslator.ToHtml(colorTL), I lose the alpha blending value. How do I convert it by taking into consideration the alpha value, assuming the background is always white?

Brian Webster
  • 30,033
  • 48
  • 152
  • 225
ace
  • 2,141
  • 7
  • 29
  • 39

3 Answers3

4

HTML Colors do not have an Alpha component.

Unfortunately it is impossible to convert ARGB to HTML RGB without losing the Alpha component.

If you want to blend your color with white, based upon your alpha value...

  • Convert each Hex component (A, R, G, B) into a value from 0 to 255, where a value of FF equates to 255, 00 equates to 0.
  • We'll name these 0-255 values, A, R, G, B
  • We'll assume that an Alpha value of 255 means "fully transparent" and an Alpha value of 0 means "fully opaque"
  • New_R = CInt((255 - R) * (A / 255.0) + R)
  • New_G = CInt((255 - G) * (A / 255.0) + G)
  • New_B = CInt((255 - G) * (A / 255.0) + B)
  • Your final HTML color string will be: "#" & cstr(New_R) & cstr(New_G) & cstr(New_B)
Brian Webster
  • 30,033
  • 48
  • 152
  • 225
  • I dont want to persist the alpha component, i'm sure there is a way to figure out what the resulting color is when you apply a given alpha value to a color..something like : RGB + Alpha = new RGB – ace Jun 01 '11 at 17:46
  • That is only possible if you take into account the background color – Brian Webster Jun 01 '11 at 17:51
  • Hi- Thanks i tried the formula, however it does not seem to convert correctly...so a color with Alpha=120,R=220,G=230,B=176 should convert into R=239,G=243,B=218 or #EFF3DA but using the suggested formula its a bit off. – ace Jun 01 '11 at 20:48
  • where are your "should convert into" numbers coming from? This is how I code it in my games and it looks fine – Brian Webster Jun 02 '11 at 02:27
  • In photoshop or any other similar program, add a color=220,G=230,B=176..then apply alpha=120 to that color. Use that color on any graphic and then use the color picker over that color. The color picker will show you the "effective" rgb color. Hope that makes sense. – ace Jun 02 '11 at 17:17
  • My formula is a valid alpha blending solution that is used in video games. If you prefer to reverse engineer Photoshop's algorithm, you are free to do so. However, the question did not mention anything about matching a particular propriety alpha blending algorithm. This solution says "Given a 50% Alpha Value, allow exactly half of the background color to shine through and be blended with the top layer". It's a very simple algorithm and works well in many scenarios, though it may not match yours very well. – Brian Webster Jun 02 '11 at 17:43
  • i tried in other graphic programs too not just Photoshop, i don't think it has anything to do with propriety alpha blending algorithm. – ace Jun 02 '11 at 18:13
  • it makes sense what you are saying, but i was just pointing out that it doesn't seem to match 100% for me...i have accepted your answer...thanks for you help – ace Jun 03 '11 at 21:24
  • what would it be, if alpha of 255 is actually fully opaque, and 0 is fully transparent? – android developer Dec 31 '15 at 11:41
2

None of the proposed worked for me, but then used http://en.wikipedia.org/wiki/Alpha_compositing to come up with this:

var useColor = Color.FromArgb(
                (int)((theStructureColor.R) * (theStructureColor.A / 255.0) + 255 - theStructureColor.A),
                (int)((theStructureColor.G) * (theStructureColor.A / 255.0) + 255 - theStructureColor.A),
                (int)((theStructureColor.B) * (theStructureColor.A / 255.0) + 255 - theStructureColor.A));
dusho
  • 56
  • 3
0

So what you are really doing is combining a white background with a semi-transparent foreground color, and calculating the resulting display color. This seems to be a duplicate question of Calculate resulting RGB from 2 colors, one is transparent, where a suitable answer was posted. To apply it to your situation, it would be something like the following (note, I haven't tested this code):

public static Color FromTransparentWithWhiteBG(Color A)
{
    // Assuming Alpha is a value between 0 and 254...
    var aFactor = (A.A/254);
    var bgAFactor = (1-(A.A/254));
    var background = Color.White;
    var R_c = (Int32)(Math.Ceiling((Double)A.R * aFactor) + Math.Ceiling ((Double)background.R * (1 - bgAFactor )));
    var G_c = (Int32)(Math.Ceiling((Double)A.G * aFactor) + Math.Ceiling ((Double)background.G * (1 - bgAFactor )));
    var B_c = (Int32)(Math.Ceiling((Double)A.B * aFactor) + Math.Ceiling ((Double)background.B * (1 - bgAFactor )));
    return Color.FromArgb(1, R_c, G_c, B_c);
}
Community
  • 1
  • 1
Chris Shain
  • 50,833
  • 6
  • 93
  • 125
  • I have updated the code so that it actually compiles this time :-) The variables are the Red, Green, and Blue values of the output color respectively. The hardcoded "1" in the final line specified a non-transparent final output. – Chris Shain Jun 01 '11 at 19:41
  • hmm...thanks..but the formula seems to be giving negative values for R_c, G_c, B_c...i tried it with {Color [A=120, R=220, G=230, B=176]} – ace Jun 01 '11 at 19:59
  • Sorry, was assuming A was indicated as a decimal between 0 and 1. Try (255-A.A)/100. I will edit in a moment. – Chris Shain Jun 01 '11 at 20:03
  • hmm..sorry it seems to be giving all black colors now. does not seem to be working. – ace Jun 01 '11 at 20:38