How can I automatically determine colors similar to white?

Question

I'm looking for either a list of colors in hex code format or certain patterns of hex codes that are whitish colors/shades of white.

I've been using the Wikipedia Shades of White list but I don't think it's complete and ideally I would like some sort of regex pattern of whitish colors.

I'm not very clued up on colors so excuse me if this is an ignorant question.

https://coveloping.com/tools/colour-shades-generator?colour=FFFFFF — Praveen Kumar Purushothaman, Aug 19 '15 at 11:08
It'd be easier to just set lower bounds for each colour channel and then for any given colour you check whether any of the channels dips below the threshold you've set. At least, that's what I think you need: to check whether or not any given colour is a shade of white. If this assumption is wrong, please add the correct wish or reqiurement in your post. Just saying that you try to do something but not explaining why makes it rather difficult for us to help. — klaar, Aug 19 '15 at 11:14

score 1 · Accepted Answer · edited May 23 '17 at 11:44

Maybe this function can be of help to you?

What it does is test if the value is white(above r/g/b value 200) or not. If any of the supplied rgb values in #FFBBEE calculates to a number lower than 200 it will fail the test.

This is a very very crude test, but as you kinda lack details on what you exactly want, this might be a good starting the point. At least the function gives you the method to convert it into integer values, which you could use again to calculate in a nicer format like HSL which will allow you to do better brightness checks. See this answer if you want to go that direction

The other answers explain what RGB is and how this is all combined in the colour code you use, especially the answer by user1203738

function isWhite(str) {
    // fiddle this value to set stricter rules for what is white.
    var whiteLimit = 200, 
        r,g,b;
    
    r = parseInt("0x"+str.substring(1,3));
    g = parseInt("0x"+str.substring(3,5));
    b = parseInt("0x"+str.substring(5,7));
    if(r < whiteLimit || b < whiteLimit || g < whiteLimit) {
        return false;
    } 
    return true;    
}
// use this function like this. supply it a colour code with a # in front of it
isWhite("#FFFFFF");

<input type="text" value="#FFFFFF" id="colorcode">
<input type="button" value="test if this is white" onclick="document.getElementById('showcolor').style.backgroundColor = document.getElementById('colorcode').value;document.getElementById('showcolor').innerText='Shade of white:'+isWhite(document.getElementById('colorcode').value);">
<div id="showcolor" style="display:block;width:200px;height:200px;margin:50px;border 1px solid black;background-color:#AAA"></div>

score 0 · Answer 2 · edited May 23 '17 at 11:51

This won't be perfect, but it might get you close:

Step 1: Convert the color name to RGB hex.

Step 2: Check if the first character of each of the Red, Green and Blue hex values is e or f. This could be done as a regular expression, e.g.:

/^#([ef][a-f0-9]){3}$/i

For more examples of what are considered shades of white, see See also Encycolorpedia. This question is more relevant to the Graphic Design community.

Lars · Answer 3 · 2015-08-19T12:18:54.890

The hexcodes represent a mixture Red, Green and Blue light. #FFFFFF translates to white, with FF red, FF green and FF blue. you can convert the hex FF value back to 255,

Think of it as if you've got 3 coloured lamps; Red, Green and Blue. You're gonna mix these lights together. The hex values determine the intensity of each lamp.

#000000 would be black. No lights are turned on.
#FF0000 would be full red. Only the red light is turned on.
#FFFF00 would give you yellow. The Red and Green light are turned on (and combined to make yellow)
#FFFFFF would give you a white. All the lights turned on,
#AAAAAA would give you a gray color, All the light are on but dimmed a little.
#FFFFF0 Would give you yellow-white color, All light a on, but the Blue lacks some intensity.

I advice you to try out a color picker and see what it means to change these values.

whitish colors/shades of white is very broad, as klaar mentioned in the comments, you should define what is white.

In general, Red, Green and Blue values which are close to each other and above 200 'intensity' will appear whitish.

It might be easier for you to convert the RGB value to HSL, (which is out of the scope of this question). since the H(ue) value is irrelevant, The S(aturation) should be low (to be void of color). And the L(ight/brightness) value should be high in order to appear white.

How can I automatically determine colors similar to white?

3 Answers3