How can I reconstruct this Color DCDFE3 using UIColor? To make it display the right color

Question

I currently using this snippet to parse the hex color ref.But I found out that when parse "DCDFE3", the display color is both wrong in the simulator and the machine. I figure that can be caused by the devide process, but I have no idea how to solve this.

#define UIColorFromRGB(rgbValue) [UIColor colorWithRed:((float)((rgbValue & 0xFF0000) >> 16))/255.0 green:((float)((rgbValue & 0xFF00) >> 8))/255.0 blue:((float)(rgbValue & 0xFF))/255.0 alpha:1.0]

The macro is used like this:

self.quickInputBar.backgroundColor = UIColorFromRGB(0xDCDFE3);

The different gray, the goal is to make the upper bar have the same color as the iOS7 keyboard.

enter image description here

Your macro works correctly. Either you have the wrong color value, or iOS transforms the RGB color to the output device color space and that causes the difference. — Martin R, Sep 11 '13 at 11:01
Yeah, I figure out this. In fact, the iOS7 keyboard is not pure one gray, it is mixed up by different grey. Each have a tiny difference, I have no idea why they do that. — Pepsin, Sep 11 '13 at 11:09
Could you solve your problem? Please mark the post which helped you most as answer. — Alex Cio, Mar 04 '15 at 13:21

score 1 · Answer 1 · edited May 23 '17 at 12:13

1

Convert your hex string to integer, and call the macro with the result. It should provide you with the correct colour.

unsigned result = 0;
NSScanner *scanner = [NSScanner scannerWithString:@"#DCDFE3"];

[scanner setScanLocation:1]; // bypass '#' character
[scanner scanHexInt:&result];
UIColor* color = UIColorFromRGB(result);

Using 0x with hex string also works:

UIColorFromRGB(0xDCDFE3);

UIColor I end up with is UIDeviceRGBColorSpace 0.862745 0.87451 0.890196 1

Hex to int conversion code is from Objective-C parse hex string to integer

edited May 23 '17 at 12:13

Community

1
1

answered Sep 11 '13 at 09:58

Dobroćudni Tapir

3,082
20
37

I think the problem is more fundamental. And this solution is not working. Still have the different. – Pepsin Sep 11 '13 at 10:01
Whell the rgb values i got on the UIColor match the rgb value of 0xDCDFE3. I think your hex colour code is wrong. – Dobroćudni Tapir Sep 11 '13 at 10:05
I picked the color in Photoshop. it is 0xd9dce0 – vikingosegundo Sep 11 '13 at 10:19

vikingosegundo · Answer 2 · 2013-09-11T10:18:27.717

instead of a macro I wrote a category for this. It handles RGB(A) value strings with the formats @"#17BAFA(FF)", @"#ABC(F)", @"17BAFA", @"0xABC",…

As it uses message sending, rather than a macro call, it feels more natural in the context of Objective-C.

Use it like UIColor *color = [UIColor colorFromHexString:@"#DCDFE3"];

afterwards you can check if(!color) { // must be an invalid format

@implementation UIColor (Creation)

+(UIColor *)_colorFromHex:(NSUInteger)hexInt
{
    int r,g,b,a;

    r = (hexInt >> 030) & 0xFF;
    g = (hexInt >> 020) & 0xFF;
    b = (hexInt >> 010) & 0xFF;
    a = hexInt & 0xFF;

    return [UIColor colorWithRed:r / 255.0f
                           green:g / 255.0f
                            blue:b / 255.0f
                           alpha:a / 255.0f];
}

+(UIColor *)colorFromHexString:(NSString *)hexString
{
    hexString = [hexString stringByTrimmingCharactersInSet:[NSCharacterSet whitespaceCharacterSet]];
    if ([hexString hasPrefix:@"#"]) 
        hexString = [hexString substringFromIndex:1];
    else if([hexString hasPrefix:@"0x"])
        hexString = [hexString substringFromIndex:2];

    int l = [hexString length];
    if ((l!=3) && (l!=4) && (l!=6) && (l!=8))
        return nil;

    if ([hexString length] > 2 && [hexString length]< 5) {        
        NSMutableString *newHexString = [[NSMutableString alloc] initWithCapacity:[hexString length]*2];
        [hexString enumerateSubstringsInRange:NSMakeRange(0, [hexString length]) 
                                      options:NSStringEnumerationByComposedCharacterSequences 
                                   usingBlock:^(NSString *substring, 
                                                NSRange substringRange, 
                                                NSRange enclosingRange, 
                                                BOOL *stop) 
        {
            [newHexString appendFormat:@"%@%@", substring, substring];
        }];
        hexString = newHexString;
    }

    if ([hexString length] == 6)
        hexString = [hexString stringByAppendingString:@"ff"];    

    NSScanner *scanner = [NSScanner scannerWithString:hexString];
    unsigned hexNum;
    if (![scanner scanHexInt:&hexNum]) 
        return nil;    
    return [self _colorFromHex:hexNum];
}

@end

When I pick the keyboards background color with Photoshop, the value is "0xD9DCE0", not "0xDCDFE3".

score 1 · Answer 3 · answered Mar 04 '15 at 13:21

I found this snippet where you can pass your hex value through and a UIColor will be returned:

// Assumes input like "#00FF00" (#RRGGBB).
+ (UIColor *)colorFromHexString:(NSString *)hexString{
    if(hexString.length){
        unsigned rgbValue = 0;
        NSScanner *scanner = [NSScanner scannerWithString:hexString];
        [scanner setScanLocation:1]; // bypass '#' character
        [scanner scanHexInt:&rgbValue];
        return [UIColor colorWithRed:((rgbValue & 0xFF0000) >> 16)/255.0 
                               green:((rgbValue & 0xFF00) >> 8)/255.0  
                                blue:(rgbValue & 0xFF)/255.0 
                               alpha:1.0];
    }
    return 0;
}

score 0 · Answer 4 · answered Apr 22 '14 at 19:58

All these solutions are fine, but there's a different problem here.

The keyboard in iOS 7 is translucent — you won't be able to color match it. I don't recall if the toolbar blur is the same as the keyboard, but I'd recommend trying to take the blurred layer from a toolbar and applying it to your UIView.

Try this and see what happens:

self.quickInputBar.backgroundColor = [UIColor clearColor];
UIToolbar *blurToolbar = [[UIToolbar alloc] initWithFrame:self.quickInputBar.frame];
blurToolbar.barStyle = UIBarStyleDefault;
[self.quickInputBar.superview insertSubview:blurToolbar belowSubview:self.quickInputBar];

score 0 · Answer 5 · answered Feb 27 '15 at 22:09

The keyboard is slightly transparent, so it is not so easy to match it.

However, if you put a solid view behind the keyboard when it is raised, you can match it consistently.

I have used a color of #DADCE3. That matches the light keyboard on iOS 8.

What I did was make a UIView with backgroundColor of #DADCE3 and put it behind the keyboard. When the keyboard is split (on an iPad), it is not possible to discern the block behind the keyboard from the actual keyboard. That would indicate that it is the same color.

score -1 · Answer 6 · edited Aug 12 '15 at 07:15

-1

You can use a convert like this one to convert your hex color into rgb.

Then use this code to create a UIColor :

float greenColor = ???/255;
float blueColor = ???/255;
float redColor = ???/255;

UIColor* color = [UIColor colorWithRed:redColor 
                                 green:greenColor 
                                  blue:blueColor 
                                 alpha:1];

edited Aug 12 '15 at 07:15

Alex Cio

6,014
5
44
74

answered Sep 11 '13 at 10:11

zbMax

2,756
3
21
42

the link I've mentioned give you each value for blue green and red on a 255 scale. `colorWithRed:green:blue:alpha` accept parameters from 0 to 1 (thats why you have to divide it by 255) – zbMax Sep 11 '13 at 10:27
I understand what you do. but OP has one value for all RGB values. A gigantic number. you dont show, how to deal with it. so your answer is not helpful. And why should I manually convert a value when a computer is just perfect to do that? – vikingosegundo Sep 11 '13 at 12:23

How can I reconstruct this Color DCDFE3 using UIColor? To make it display the right color

6 Answers6