Using NSScanner to convert Hex to RGB Color

February 28, 2009

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 we 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.