25841

Converting ARBG to RGB with alpha blending with a White Background

Question:

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?

Answer1:

HTML Colors do not have an Alpha component.

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

<strong>If you want to blend your color with white, based upon your alpha value...</strong>

<ul><li>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.</li> <li>We'll name these 0-255 values, A, R, G, B</li> <li>We'll assume that an Alpha value of 255 means "fully transparent" and an Alpha value of 0 means "fully opaque"</li> <li>New_R = CInt((255 - R) * (A / 255.0) + R)</li> <li>New_G = CInt((255 - G) * (A / 255.0) + G)</li> <li>New_B = CInt((255 - G) * (A / 255.0) + B)</li> <li>Your final HTML color string will be: "#" & cstr(New_R) & cstr(New_G) & cstr(New_B)</li> </ul>

Answer2:

None of the proposed worked for me, but then used <a href="http://en.wikipedia.org/wiki/Alpha_compositing" rel="nofollow">http://en.wikipedia.org/wiki/Alpha_compositing</a> 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));

Answer3:

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 <a href="https://stackoverflow.com/questions/3506117/calculate-resulting-rgb-from-2-colors-one-is-transparent" rel="nofollow">Calculate resulting RGB from 2 colors, one is transparent</a>, 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); }

Recommend

  • Blending languages - Python and Objective-C
  • How to bottom align text in WPF RichTextBox
  • How to set a Gtk2::Button's text colour?
  • Correct use of Realloc
  • How to prevent LDM/STM instructions expansion in ARM Compiler 5 armcc inline assembler?
  • Twitter Bootstrap Scrollspy highlighting last item only
  • OpenGL filled polygon color “bleeding”
  • What is the ClojureScript analogue of delete from JavaScript?
  • inserting hex value into mysql
  • How do I write to registers in hardware using Python?
  • Matplotlib: Custom colormap with three colors [duplicate]
  • Unknown C# type
  • Quickly or concisely determine the longest string per column in a row-based data collection
  • MonadTransControl instance for ProxyFast/ProxyCorrect
  • Android Lock Screen C# .NET Replica
  • remove unicode characters but keep all special and English characters with preg_replace
  • Using MouseListener to select a range of cells in a grid
  • How to split circle in to the sectors in google maps?
  • Detecting null parameter in preprocessor macro
  • How to explicitly/implicitly implemented interface members in C++/CLI?
  • Django model inheritance, filtering models
  • Java color detection
  • How can I speed up CURL tasks?
  • How can I enlarge video fullscreen without the affected interface project in as3?
  • OOP Javascript - Is “get property” method necessary?
  • Use of this Javascript
  • Typescript - Unable to get 'import' statement to function
  • Cancel a live stream “fast motion” catch-up in Flash
  • Google Custom Search with transparent background
  • Android fill_parent issue
  • C++ Partial template specialization - design simplification
  • Algorithm for a smudge tool?
  • Repeat a vertical line on every page in Report Builder / SSRS
  • Disabling Alt-F4 on a Win Forms NotifyIcon
  • PHP - How to update data to MySQL when click a radio button
  • How to draw moving and Running sine wave chart using JFree chart in java?
  • Updating server-side rendering client-side
  • How to apply VCL Styles to DLL-based forms in Inno Setup?
  • How to get next/previous record number?
  • Python: how to group similar lists together in a list of lists?