Color Me FACE1E55
Published 5 years, 8 months past
There’s a long history in computer programming of using hexadecimal strings that look like English words to flag errors. These are referred to, amusingly, as “magic debug values”, and yes, Wikipedia has the lowdown. One of the most (in)famous is DEADBEEF, which was used “on IBM systems such as the RS/6000, also used in the classic Mac OS operating systems, OPENSTEP Enterprise, and the Commodore Amiga”, among others. It’s also become the name of a Gnu/Linux music player, and apparently does not have anything to do with Cult of the Dead Cow, at least not so far as I could determine. Maybe someone with more knowledge can drop a comment.
Anyway, one of the things about these magic debug values is they’re usually eight characters long. Not always, as in the case of BADC0FFEE0DDF00D (from RS/6000, again), but usually. Nintendo used 0D15EA5E in the GameCube and Wii to indicate a normal boot (!), iOS logs DEAD10CC when an application terminates in a specific yet incorrect manner, and FEEDFACE shows up in PowerPC Mach-O binaries , as well as the VLC Player application. Just to pick a few examples.
The eight-character nature of these magic codes has meant that, for a long time, you couldn’t also use them on the sly to define colors in CSS, because it was limited to the #RRGGBB format. Well, those days are over. Long over. Eight-digit hex color values are here, have been here a while, and are widely supported. Here are a few swatches laid over a (fully opaque) white-to-black gradient.
| #abadcafe | |
|---|---|
| #baaaaaaa | |
| #deadbeef | |
| #deadfeed | |
| #defec8ed | |
| #feedbacc |
If you’re using Internet Explorer or Edge, those aren’t going to work for you. At least, not until Edge switches over to Blink; then, they should work just fine.
Thanks to the way they were constructed, by only using the letters A-F, most of the colors above are mostly opaque. The last two digits in #RRGGBBAA set the alpha channel level of the color, just like the last part of the rgba() syntax. Thus, the EF at the end of DEADBEEF sets the alpha value to 0.937; EF is equivalent to decimal 239, and 239 ÷ 255 = 0.937 (approximately). In other words, #DEADBEEF is essentially equivalent to rgba(222,173,190,0.937).
That’s why, of the six swatches, only the sheepish #baaaaaaa and the homophonic #feedbacc let the background gradient show through more than very slightly; their alpha channels are 0.666 and 0.8, respectively. The rest are 0.929 and up.
Being stuck in the A-F range is fairly constraining, but that’s where hexadecimal and English overlap, so that’s how it goes. However, if you’re willing to turn to leetspeak syntax — that is, allowing yourself to use 0 as a substitute for O, 1 for L and occasionally I, 5 for S, 7 for T, and so on — then a lot more possibilities open up. In addition to some of the classic error codes like fee1dead (Linux), I had fun devising other eight-character color words like acc0lade and face1e55, not to mention the very nautical ccccccc5. (Think about it.) Behold!
| #0ff1c1a1 | |
|---|---|
| #1337c0de | |
| #5e1f1e55 | |
| #a114c0de | |
| #acc01ade | |
| #ba5e1e55 | |
| #bada55e5 | |
| #bebada55 | |
| #beefc0de | |
| #b0bafe77 | |
| #b0a710ad | |
| #c010ca7e | |
| #c0de1e55 | |
| #ccccccc5 | |
| #d0d0c0de | |
| #dabbad00 | |
| #dead10ad | |
| #deadd0d0 | |
| #decea5ed | |
| #face1e55 | |
| #fee1dead |
There are still more l33t-compliant number substitutions available, like 6 for G, but I felt like I was already pushing it with the examples I have. One could also use calculator spelling, where 9 is a stand-in for g, and even mix together l33t and calculator syntaxes in the same value. So many possibilities!
You may have noticed one value which creates no color: #DABBAD00, which has 00 for its alpha, so it’s fully, completely transparent. It’s fully transparent #DABBAD, I suppose, but there’s really no difference between one transparent color and another, as far as I’m concerned. I mean, if a color falls transparent, then there’s nobody to see it, so is it really a color at all? I say thee nay.
If you’re familiar with the way #RRGGBB hex values can be represented with the shortened #RGB syntax, then it will probably come as little surprise that #RRGGBBAA has a shortened #RGBA syntax, where each digit is duplicated. This opens the world of four-letter words to us! Here are a few:
| #10ad | |
|---|---|
| #1337 | |
| #b007 | |
| #ba5e | |
| #bead | |
| #beef | |
| #c0de | |
| #cafe | |
| #cede | |
| #dada | |
| #dead | |
| #deed | |
| #f00d | |
| #fade | |
| #f8ed | |
| #feed | |
| #0b0e |
Here, we finally have a fully opaque word-color: #BEEF expands out to #BBEEEEFF, making the alpha value FF, which decimal-translates to 255, which is fully opaque. So we get a nice opaque powdery blue out of BEEF, which is counterintuitive in the best possible way. Also, every time I see BBEEEEFF, either in print or in my head, I hear Mrs. Which ordering dinner.
And okay, yes, #F8ED isn’t a four-letter word, it’s a four-symbol license-plate word. So it’s even cooler.
If you’re thinking about using these in your CSS, you might be concerned about backwards compatibility, since any browser that doesn’t understand four- or eight-digit hexadecimal color values will just drop them on the floor. That might be okay for text coloring, since the text will likely have some color, even if it’s browser-default, which is usually black. For backgrounds, having colors ignored probably less okay, particularly if you set foreground colors that depend on the background colors.
There are a couple of possibilities here. One is to use the cascade and CSS error handling to your advantage, in the time-honored pattern of doing the simpler version first and the more sophisticated version second.
#example {
color: #DEA;
color: #DEAD;
}That works in simple scenarios, but for more complicated situations — say, ones where you have foreground and background depending on each other — feature queries are an option to consider, if for no other reason than cleaner organization and legibility.
#example {
color: red;
background: #EEE;
}
@supports (color: #ABCD) {
#example {
color: #f00d;
background: #feed;
}
}
Naturally and as usual, you’ll have to figure out what makes the most sense for your situation. Maybe the right answer will be to avoid using these sorts of values at all, although I don’t know where the fun is in that.
At any rate, I hope you’ve enjoyed this little tour of magic debug values, l33tspeak, and color words. As always, #feedbacc is more than welcome in the comments!
