I Recently came across a code review where the color of an HTML element was set to:

view plain print about
1color: #fffff

A standard hex value is six characters, not five characters. It worked unexpectedly, and turned the element white, but I was wondering why it worked, and decided to do some experiments around this. This is a writeup of those experiments.

The Setup

I'm just gonna use a simple DIV with some text inside it; and some generic styling:

view plain print about
1<style>
2 .layout {
3 width: 200px;
4 height: 50px;
5 align-items: center;
6 display: flex;
7 justify-content: center;
8 margin-bottom: 10px;
9 }
10</script>

The divs will be boxes, 200pixels by 50 pixels. I use FlexBox to center text inside the div.

I can create a simple div like this:

view plain print about
1<div class="layout">
2 Just Layout, no Colors
3</div>

And see it in a browser:

Fairly boring, and my cropping is probably imperfect, but it works great.

Now let's add a new CSS class to the style block:

view plain print about
1.fullRGBColor {
2 background: #000000;
3 color: #ffffff;
4 }

And add in a new div, with the new style:

view plain print about
1<div class="layout fullRGBColor">
2 Full Colors
3 </div>

See what this is:

I gave the div a black background with white text. I used full six string HEX values. This is normal and what I would normally expect and if you're dealing with this stuff you probably see this all the time.

Five Character Hex Code Colors

Now, let's go revisit what I saw in the PR, just five HEX character to make a color. First, the CSS:

view plain print about
1.fiveRGBColor {
2 background: #00000;
3 color: #fffff;
4 }

It is worth noting, IntelliJ didn't like this at all:

It was giving me a "Mismatched property value" error.

Then add in the HTML:

view plain print about
1<div class="layout fiveRGBColor">
2 Five Letter Colors
3</div>

And reload your template. This did not turn out the way I would expected:

The background was not black, and the text color was not white. This doesn't work at all. I suspect the only reason it worked in the original PR review was because the value we were explicitly setting to white was going to be white anyway; and our override style was ignored.

One String Hex Code Colors

Since I'm going down this route, what happens if we shorten the hex color code to a single character? In a 6 character hex code, two characters are supposed to represent the red, green, and blue shades into the final color. A single character doesn't give us enough info to create a color. I thought that, perhaps, the browser may extrapolate the color by repeating the single character we give it..

view plain print about
1.oneRGBColor {
2 background: #0;
3 color: #f;
4 }

IntelliJ doesn't like this either:

The HTML:

view plain print about
1<div class="layout oneRGBColor">
2 Single character Color
3</div>

Pop open a browser:

Nope, no background color and no foreground color. That didn't do anything for us.

Three String Hex Code Colors

Three string hex colors do work. Let's do a black and white sample. first:

view plain print about
1.halfRGBColor {
2 background: #000;
3 color: #fff;
4 }

I'm only specifying the first three characters of the color for a black background and a white foreground. The HTML:

view plain print about
1<div class="layout halfRGBColor">
2 Half Colors
3</div>

Reload your browser sample:

Yep, that worked! How come three characters work, but 1 or five character hex strings are ignored? With only three characters, the browser decides to double each section.

So, a single f in the red would become FF. A single F in the green would become FF, and a single f in the blue, would become FF giving us #FFFFFF as the final color.

This may show better with a sample not as black and white. My programmer eye played around and found a few colors that didn't make me scream:

view plain print about
1.halfAltColor {
2 background: #1ca;
3 color: #216;
4 }

The HTML again:

view plain print about
1<div class="layout halfAltColor">
2 Half alternate Color
3</div>

And in the browser:

A turquoise type background with a darker blue text. It works.

We know enough to expand this into our full colors, just by doubling each character in the hex color string:

view plain print about
1.fullAltColor {
2 background: #11ccaa;
3 color: #221166;
4 }

And, the updated HTML:

view plain print about
1<div class="layout fullAltColor">
2 Full Alternate Color
3</div>

And finally:

Final Thoughts

I'm not a designer, but rather a programmer. Since I really enjoy the challenges of front end engineering, Sometimes I have to deal with CSS. This blog post was a great way for me to jump into things I don't always touch on in the normal day to day.

I hope you learned something. I did!