Convert Hexcodes to Color

Converting a color code string, e.g. "#FFB4DA55" to a Windows.UI.Color proved to be not that simple. Atleast there isn't any buildin way of doing so, so I decided to create a little helper class to do so.

The HelperClass both converts ARBG (colors with alpha values included and RGB colors to Windows.UI.Color.


 public class ColorConverterHelper
 public Color HexToColor(String hexString)
 Color outputColor;

 if ((hexString.StartsWith("#")) && (hexString.Length == 9))
 byte a = Byte.Parse(hexString.Substring(1, 2), System.Globalization.NumberStyles.HexNumber);
 byte r = Byte.Parse(hexString.Substring(3, 2), System.Globalization.NumberStyles.HexNumber);
 byte g = Byte.Parse(hexString.Substring(5, 2), System.Globalization.NumberStyles.HexNumber);
 byte b = Byte.Parse(hexString.Substring(7, 2), System.Globalization.NumberStyles.HexNumber);
 outputColor = Color.FromArgb(a, r, g, b);
 else if ((hexString.StartsWith("#")) && (hexString.Length == 7))
 byte r = Byte.Parse(hexString.Substring(1, 2), System.Globalization.NumberStyles.HexNumber);
 byte g = Byte.Parse(hexString.Substring(3, 2), System.Globalization.NumberStyles.HexNumber);
 byte b = Byte.Parse(hexString.Substring(5, 2), System.Globalization.NumberStyles.HexNumber);
 outputColor = Color.FromArgb(255, r, g, b);
 outputColor = Colors.White;

 return outputColor;

I hope the source helps you solving problems like it did for me. Feel free to reach out to me if you have any questions or problems with the implementation.

P.S Make sure you follow me on twitter @deanihansen for more news, design tips, articles and how-to's.

Working with RGB, HLS, HSB & CMYK in Blend and Visual Studio

A very nice feature in Blend is the fact that it supports multiple color systems. Per standard it's using RGB, which you can see in the properties view of any element containing some kind of ColorBrush. But actually Blend gives you the option of putting in CMYK, HLS and HSB too!

The way you can change between the different color modes is by clicking the underlined letters next to the colorpicker.

Note: If you choose CMYK, HLS or HSB colors, they get converted to a RGB color.

Remember to reuse the same color through out your app – do this by creating the color as a resource and then just reference it.

The easiest way to create a color as a resource is to click the tiny square next to the property and choose Convert to New Resource

Feel free to reach out to me if you need additional help or insight in working with RGB, HLS, HSB & CMYK in Blend or Visual Studio.

P.S Make sure you follow me on twitter @deanihansen for more news, design tips, articles and how-to's.

Create a Resource in Expression Blend

Heres a small guide to how you get started creating resources inside Expression Blend and place it any given resource dictionary.

1.  Select a given Framework Element in the Objects and Timeline tab. In this example we will Select a TextBlock.



2. Select the Foreground property and change the color in the Color Editor inside the the Property tab.





3. Click the white square and choose: Convert to new resource.

Tip: The white square means the property have a value set locally on the page or in the control and that it's different from the default template. 

Tip: You can reset to the default template anytime by clicking the square and then click Reset.

4. Name (unique key) the resource, choose in what resource dictionary you want to define the new resource in and then click OK.



5. DONE! You have now created a new resource and applied it to your textblock.

You can see it has been added to your TextBlock by the white square you clicked before, is now green.

If you look in the XAML - the resource is now created, and your TextBlock is actually already using it by referencing it using the StaticResource.

Pro tip:
In Blend you have a tab called resources - check it out. It gives you a complete overview of all the defined resources inside your project. You can copy, delete, edit and move the resources as you like. Most people don't know about it but it offers a great overview that I use offen when ever I work with resources.. 

Pro tip 2:
The tutorial above actually works in Visual Studio's properties panel when using the designer as well.


Feel free to reach out to me if you have any comments or difficulties with resource creation.

P.S Make sure you follow me on twitter @deanihansen for more news, design tips, articles and how-to's.