Using a Hex value for a Color object

We use Hex color codes in our design all the time, we're used to them and it's just easier to apply #333333 than RGB 51, 51, 51. I wanted to share a method that I use in all my coding that let's you use a hex color code to a Color object.

Use Case

Let's build this scenario - I've created a Windows Phone application that will change the color of the status bar.
WP Status Bar Demo
At the moment it's been set as a pretty nice red color, but I would like to change the color to a green upon clicking on a button. I've got my current method that will allow me to change the status bar color

public void ShowStatusBar(Color bg, Color fg)
 {
 StatusBar WinStatusBar;
 WinStatusBar = StatusBar.GetForCurrentView();
 WinStatusBar.BackgroundColor = bg;
 WinStatusBar.ForegroundColor = fg;
 WinStatusBar.BackgroundOpacity = 1;
 WinStatusBar.ProgressIndicator.ProgressValue = 0;
 WinStatusBar.ProgressIndicator.ShowAsync();
 }

In order to change the status bar color I would have to create a couple of resources in my App.xaml - one for the background color and another for the foreground.

<SolidColorBrush x:Key="statusBarBg" Color="#D32F2F" />

<SolidColorBrush x:Key="statusBarForeground" Color="#FFFFFF" />

And then target them when I want to change the color

ShowStatusBar((SolidColorBrush)Application.Current.Resources["statusBarBg"]).Color, ((SolidColorBrush)Application.Current.Resources["statusBarForeground"]).Color);

Wouldn't it be easier if I could just hard code the hex value directly without needing to create multiple resources?

Implementation

I'm using two methods to allow me to pass in hex value color codes without needing to refer to a resource or create a SolidColorBrush object.
  • TryParseHex

private bool TryParseHex(string hexString, out byte hexByte)
 {
 return byte.TryParse(
 hexString,
 System.Globalization.NumberStyles.AllowHexSpecifier,
 null,
 out hexByte);
 }

This method is the whole brains of the operation, it takes in a 2 character code hex value i.e. FF and throws out an RGB code for us to use.
  • ColorFromHex

public SolidColorBrush ColorFromHex(string color)
 {
 //Use hex value if passed
 if (color.StartsWith("#")) color = color.Substring(1);

 Byte red, green, blue;
 if (color.Length == 6
 && TryParseHex(color.Substring(0, 2), out red)
 && TryParseHex(color.Substring(2, 2), out green)
 && TryParseHex(color.Substring(4, 2), out blue))
 {
 return new SolidColorBrush(Color.FromArgb(255, red, green, blue));
 }

 //if no hex value, map to colors in Assets/Styles.xaml
 return ColorFromHex("#606060");
 }
This is what we're going to use in our new updated ShowStatusBar call. We pass in a hex value i.e. #FFFFFF and it will first check to see if we've included the hashtag (and will remove it) then it will go through the process of converting the string in to RGB values that are returned as a SolidColorBrush object to be used in our application. So our existing ShowStatusBar call that references App.xaml resources can be converted to the following simple piece of code that can be used multiple times to change the color of the status bar.

ShowStatusBar(ColorFromHex("#D32F2F").Color,
 ColorFromHex("#FFFFFF").Color);

Wrapping Up

So here we have it, a way to use a 6 character hex code in a WPF application that requires a SolidColorBrush RGB value.

Sandeep Bansal is a Software Engineer focusing on Microsoft and Web technologies. He looks to develop both well designed and functional desktop/phone applications.

Comments