How to Create a UIColor Object From A Hex Value

In this post I’ll demonstrate how to create a category of the UIColor class to add a method for creating a UIColor object from a hex value. That’s a mouthful – if you need to create a UIColor object from a hex string, read on…

Assume you have the value @”0A5CEA” (an NSString object that holds a hex value) and need a UIColor object that represents the value of the string. With the code below, creating the UIColor object is as easy as:

UIColor *color = [UIColor colorwithHexString:@"0A5CEA" alpha:.9];

Notice that I’ve also provided a parameter to set the alpha value.

UIColor Category

Let’s create a category with the UIColor class which will define and implement the method used in the example above.

Here is the category definition:

@interface UIColor (fromHex)
+ (UIColor *)colorwithHexString:(NSString *)hexStr alpha:(CGFloat)alpha;
@end

The implementation follows:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

@implementation UIColor (fromHex)
 
+ (UIColor *)colorwithHexString:(NSString *)hexStr alpha:(CGFloat)alpha;
{
  //-----------------------------------------
  // Convert hex string to an integer
  //-----------------------------------------
  unsigned int hexint = 0;
 
  // Create scanner
  NSScanner *scanner = [NSScanner scannerWithString:hexStr];
 
  // Tell scanner to skip the # character
  [scanner setCharactersToBeSkipped:[NSCharacterSet 
    characterSetWithCharactersInString:@"#"]];
  [scanner scanHexInt:&hexint];
 
  //-----------------------------------------
  // Create color object, specifying alpha
  //-----------------------------------------
  UIColor *color =
    [UIColor colorWithRed:((CGFloat) ((hexint & 0xFF0000) >> 16))/255
    green:((CGFloat) ((hexint & 0xFF00) >> 8))/255
    blue:((CGFloat) (hexint & 0xFF))/255
    alpha:alpha];
 
  return color;
}
 
@end

Save the files as UIColor+fromHex.h and UIColor+fromHex.m in your Xcode project.

Lines 8-15 I convert the hex value into an unsigned integer. Lines 20-24 create a UIColor object by doing a bitwise ‘&’ operation to isolate the various color attributes and divide each by 255 to get the float value for the same.

The code below shows a few iterations, including hex values in the format @”0x0A5CEA” and @”#0A5CEA” (where the later is commonly used in web development):

NSString *hexStr1 = @"123ABC";
NSString *hexStr2 = @"#123ABC";
NSString *hexStr3 = @"0x123ABC";
 
UIColor *color1 = [UIColor colorwithHexString:hexStr1 alpha:.9];
NSLog(@"UIColor: %@", color1);
 
UIColor *color2 = [UIColor colorwithHexString:hexStr2 alpha:.9];
NSLog(@"UIColor: %@", color2);
 
UIColor *color3 = [UIColor colorwithHexString:hexStr3 alpha:.9];
NSLog(@"UIColor: %@", color3);

As expected, the output for each hex string is the same:

UIColor: UIDeviceRGBColorSpace 0.0705882 0.227451 0.737255 0.9
UIColor: UIDeviceRGBColorSpace 0.0705882 0.227451 0.737255 0.9
UIColor: UIDeviceRGBColorSpace 0.0705882 0.227451 0.737255 0.9

Additional Reading