CSS: a weird color issue?

Question

If I try to apply this color to a HTML element:

background-color: #COFFEE; /* Should work, has 6 characters */

The color gets ignored and white (#FFF) is shown instead.

If I do:

background-color: #C0FFEE;

The color changes to something like green.

And:

background-color: #CFE;

Is probably the same color. I tested this in FF only.

Why should the first one work? These are hexadecimal color codes for a reason ---> 0-9 + A-F — The One and Only ChemistryBlob, Sep 17 '14 at 21:08
possible duplicate of [Why does HTML think “chucknorris” is a color?](http://stackoverflow.com/questions/8318911/why-does-html-think-chucknorris-is-a-color) — DA., Sep 17 '14 at 21:10
Another reason why Lucida Console is a terrible programmer's font. — nullability, Sep 17 '14 at 21:15

Arbel · Accepted Answer · 2014-09-17T21:13:21.877

3

Hex color code consists of digits 0 to 9 and letters A to F, representing 10 to 15 in decimal mode.

So O is not a valid hex value, but 0 is.

So #COFFEE; won't work, but #C0FFEE; will.

If you want to use named colors, refer to: http://www.w3.org/TR/css3-color/ and have a look at section 4.3. Extended color keywords

E.g. Choclate which is #d2691e in hex and 210,105,30 in RGB.

edited Sep 17 '14 at 21:13

answered Sep 17 '14 at 21:07

Arbel

30,599
2
28
29

ikegami · Answer 2 · 2014-09-17T21:18:23.357

COFFEE is not a valid hexadecimal number. The sixteen hex digits are 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E and F.

C0FFEE, on the other hand, is.

C0₁₆ = 192₁₀, 192/255 = 75% red
FF₁₆ = 255₁₀, 255/255 = 100% green
EE₁₆ = 238₁₀, 238/255 = 93% blue

CFE means the same as CCFFEE, which is indeed very similar.

CC₁₆ = 204₁₀, 192/255 = 80% red
FF₁₆ = 255₁₀, 255/255 = 100% green
EE₁₆ = 238₁₀, 238/255 = 93% blue

If you were looking for predefined names, you'll find them here plus here.

score 0 · Answer 3 · answered Sep 17 '14 at 21:11

The color #COFFEE doesn't exist. You need to write the color code in hexadecimal after the hashtag (#), it ranges from 0 to 9 and A to F. Read more here

The color #C0FFEE (with a zero) works, but not #COFFEE (with an O).

The color #CFE is not equivalent to #C0FFEE, but to #CCFFEE.

score 0 · Answer 4 · answered Sep 17 '14 at 21:12

#COFFEE

The letter O is not a valid hex value. As such, the browser will attempt to do something to accomdoate the error. That is likely going to be unpredictable.

#C0FFEE

That is a valid hex color.

#CFE;

Also a valid hex color in that it is shorthand for #ccffee

coffee

Not a valid HTML color name. However, if you are looking for a color that looks like coffee, and want to use a name value, you could try chocolate which is a valid color name.

CSS: a weird color issue?

4 Answers4