Using NSScanner to convert hex value to UIColor object

July 3, 2013

I’ve found that defining a custom UIColor using RGB values is a little counter intuitive compared to the more common hexadecimal notation used in CSS. This is particularly true if you want to define a color value in a file and don’t want to have to split it into three separate values.

For the most part, NSScanner has everything we need to parse data types (int, float, string etc) from a string.


The following is a simple method that will convert a hexadecimal color (e.g. #FFCC88) into an equivalent UIColor object.

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
31
32
33
34
35
36
37
38
39
40
41
42
43

- (UIColor *) colorForHex:(NSString *)hexColor {
	hexColor = [[hexColor stringByTrimmingCharactersInSet:
				 [NSCharacterSet whitespaceAndNewlineCharacterSet]
				] uppercaseString];  
 
    // String should be 6 or 7 characters if it includes '#'  
    if ([hexColor length] < 6) 
		return [UIColor blackColor];  
 
    // strip # if it appears  
    if ([hexColor hasPrefix:@"#"]) 
		hexColor = [cString substringFromIndex:1];  
 
    // if the value isn't 6 characters at this point return 
    // the color black	
    if ([hexColor length] != 6) 
		return [UIColor blackColor];  
 
    // Separate into r, g, b substrings  
    NSRange range;  
    range.location = 0;  
    range.length = 2; 
 
    NSString *rString = [hexColor substringWithRange:range];  
 
    range.location = 2;  
    NSString *gString = [hexColor substringWithRange:range];  
 
    range.location = 4;  
    NSString *bString = [hexColor substringWithRange:range];  
 
    // Scan values  
    unsigned int r, g, b;  
    [[NSScanner scannerWithString:rString] scanHexInt:&r];  
    [[NSScanner scannerWithString:gString] scanHexInt:&g];  
    [[NSScanner scannerWithString:bString] scanHexInt:&b];  
 
    return [UIColor colorWithRed:((float) r / 255.0f)  
                           green:((float) g / 255.0f)  
                            blue:((float) b / 255.0f)  
                           alpha:1.0f];  
 
}

Notice that I had to first separate our the hex values for the red, green, and blue components first as substrings and then apply the NSScanner to those substrings.

12 comments

Rodney,

That’s interesting, but I believe there’s an easier way to provide the same thing with a macro. I blogged about this a few months ago:

http://pessoal.org/blog/2008/11/27/creating-uicolor-objects-from-hex-values/

Hope that’s useful!

–Joao

by Joao Prado Maia on Feb 28, 2009. Reply #

Rodney,

Thanks, this is very helpful.

Cheers,
Ivan

by Ivan on Mar 1, 2009. Reply #

@Joao Prado Maia

Thanks for that tip … it is much more concise. Unfortunately it doesn’t deal with the issue that I was solving. In my case, the hex value was stored in a text file as a string. This file was something that was created by an entirely different application (thus no control over format). Given that the rgbvalue was a string, NSScanner made the most sense. All that said, I will definitely use your approach if I have a hex value in an integer value.

by Rodney Aiglstorfer on Mar 1, 2009. Reply #

Also note that the UIColor convenience constructor used above interprets the RGBA values in the device colorspace. This differs from the hex strings in CSS which are in sRGB.

To use sRGB it looks like one has to go via CGColor.

by AJS on Mar 5, 2009. Reply #

Ok, so I should have finished coding before replying here. It seems that the iPhone doesn’t support sRGB when going via CGColor: kCGColorSpaceSRGB is unavailable.

by AJS on Mar 5, 2009. Reply #

Thank you. This was useful and well presented.

by Ed on May 24, 2009. Reply #

This is good. Should you want something even more complex have a look at this: http://paste.lisp.org/display/74985

by Nick on Jun 30, 2009. Reply #

This is my technique:

#define HEXCOLOR(c) [UIColor colorWithRed:((c)&0xFF)/255.0 \
green:((c>>8)&0xFF)/255.0 \
blue:((c>>16)&0xFF)/255.0 \
alpha:((c>>24)&0xFF)/255.0]
unsigned int colorValue;
[[NSScanner scannerWithString:colorString] scanHexInt:&colorValue];
UIColor *color = HEXCOLOR(colorValue);

A sample hex color string “7fcf0064″ that should come out as light purple. “64″ is red and “7f” is alpha.

by Kevin on Sep 22, 2009. Reply #

Thanks for sharing this. Its a nice compact way of doing the stuff

by Hcan on Jul 26, 2011. Reply #

Here’s an open source UIColor category / extension to make hex color creation from NSString possible:
http://github.com/jonasschnelli/UIColor-i7HexColor

by Jonas Schnelli on Jul 1, 2010. Reply #

Thanks, this is very useful.

by Hcan on Jul 26, 2011. Reply #

This works quite well. Thanks.

by Ace on Aug 30, 2012. Reply #

Leave a Comment