65

I recently went through my CSS file and switched all my six-digit hexadecimal codes to simple three-digit codes (for example, my #FDFEFF got shortened to #FFF).

It renders pretty much the exact same color as before, and it seems to me that the in-between parts are fairly useless and removing them saved me an entire 300 bytes in my CSS file.

Does it matter which version you use? I rarely ever run across websites that use only the three-digit codes (or I guess I just never run across ones that do). Is it still perfectly valid to use three-digit codes over six-digit codes, or are we supposed to use the full six-digit codes?

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
animuson
  • 53,861
  • 28
  • 137
  • 147
  • 12
    Saving a few bytes (or even kb) in CSS doesn't really make much sense, since it's something that's requested once and then it's cached. Any many designers would say that FDFEFF is not the same as FFF. And I tend to agree. As a single colour it doesn't make much difference, but in a combination of many it does. – Robert Koritnik Jun 24 '10 at 10:05
  • 2
    I'm also an optimization maniac, but did you think about the fact that 300 bytes is most likely less than even the HTTP headers for the requests of a single page? Also, you might want to look into other places for size optimization. Such as image sprites, but also less manual stuff such as CSS/JS compressors, image optimizers, etc. – Camilo Martin Sep 02 '12 at 00:56
  • 1
    re: saving a few bytes in CSS doesn't really make much sense. It does when working on embedded systems such as Atmel/ESP – Scott Aug 09 '16 at 16:22
  • It matters in some applications... if it's html sent through an email server or viewed in an old browser it can be rendered as a different color than you'd expect. For example, two interpretations of #fff (white) are #0f0f0f (black) or #ffffff (white). – Sandy Simonton May 30 '17 at 22:28

9 Answers9

100

The three-digit codes are a shorthand, and #123 is the same as #112233. In the example you give, you've (effectively) swapped #FDFEFF for #FFFFFF, which is close to the original colour, but obviously not exact.

It doesn't "matter" which version you use, as such, but three-digit colour codes mean you have a little less choice in shades. If you feel that saving 300 bytes is worth that, then go ahead and use the three-digit codes, but unless you're designing for a low-bandwidth situation those 300 bytes won't really save you all that much.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Chris
  • 4,661
  • 1
  • 23
  • 25
  • 3
    I do feel that saving the extra 300 bytes is more important than having more *exact* colors which you can barely tell the difference from anyways. – animuson Jun 24 '10 at 16:57
  • 22
    You say that because your example is #FDFEFF, which is pretty close to #FFFFFF anyway and is barely noticeable when you nudge it that way by using the shorthand. But if you look at #F0F0F0 and #FFF, that *is* noticeable. Or look at #E0F040 and then shorten that to #EF4 - huge difference. Graphic designers would throw fits if you try to tell them those colours are "close enough". – Chris Jun 25 '10 at 07:58
  • 19
    If you shortened #F0F0F0 to #EEE (#EEEEEE), wouldn't that still be fairly close to the same color? – animuson Jul 02 '10 at 23:43
  • 1
    Wouldn't compression (the default?) reduce it to much less than 300 bytes? – Peter Mortensen Sep 05 '20 at 21:36
27

Shorthand sucks! Don't use it. It's harder to maintain and creates unnecessary variation e.g. when searching and replacing a colour value ("oh, now I have to take into consideration #FFFFFF and white and #FFF").

What you save in size is never worth what you lose in maintainability. Use minifaction and compression to save bandwidth.

Pekka
  • 442,112
  • 142
  • 972
  • 1,088
  • 7
    I use shorthands a lot, but today we figured out that it doesn't work in IE10 when you put bgcolor="#fff" on a body tag (ugly html4 stuff is for newsletter emails), it just shows black, bgcolor=#ffffff" works Gmail also has problems with it when you use shorthands in mails. – Michiel Cornille Apr 24 '13 at 16:18
  • 1
    What about using regular expressions for searching? – Alexxus May 22 '15 at 07:10
  • 1
    @MVision: see [Why are 3-digit hex color code values interpreted differently in Internet EXPLORER?](http://stackoverflow.com/a/32153998/588079) for a full explanation regarding that. The only bug/problem/issue is a developer expecting a predictable uniform result when setting an invalid value for `bgcolor` – GitaarLAB Aug 22 '15 at 17:29
  • Searching? I recommend using a regular expression or if you can a css superset like less or sass that lets you use variables – CodeAndCats Oct 28 '16 at 22:34
13

If you want to save bytes then you better use CSS minification techniques

Carlos Muñoz
  • 17,397
  • 7
  • 55
  • 80
5

If you use this in a table in Internet Explorer 7, 8, or 9 (unfortunately, this is relevant as of the date of this response)

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_tables

Six-digit codes work fine, but three-digit codes render as black:

<table border="1" bgcolor="#ff0000">  vs.    <table border="1" bgcolor="#ff0">
Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
user1505432
  • 61
  • 1
  • 1
  • 12
    That issue is specific to the color attributes in HTML. It's not a problem in CSS itself. You shouldn't even be using the `bgcolor` attribute anyways. It's been deprecated for ages. – animuson Jul 06 '12 at 00:19
  • 1
    'black' is actually 'black-ish'.. Shorthand `#ff0` on `bgcolor` becomes `#0f0f00` instead of the expected `#ffff00` (yellow) in all versions of IE(-dependent applications like Outlook). Also, setting 3-digit hex values on `bgcolor` *is* the bug, *not* the undefined (per spec) behavior that can result. See: http://stackoverflow.com/a/32153998/588079 – GitaarLAB Aug 22 '15 at 08:36
  • ` ` becomes `
    ` and not `
    `
     – binrebin Jun 05 '22 at 14:08
4

If the "3 digit" versions produces the colour you need then you can use it as much as you like. It's certainly not wrong.

Jan Hančič
  • 53,269
  • 16
  • 95
  • 99
3

I always use the shorthand. The best advantage is that I can easily remember the codes.

You still have 163 = 4,096 colors to choose from, and it should be enough.

However, if you save 300 bytes in shorthand color codes it means you have 100 colors declared in your CSS. Unless your page is very diverse, or all rainbows and flowers it seems like a lot. You might be good at systematic CSS, but I often see unnecessary CSS rules.

Example: if you're setting the same rule to many child elements that could have been replaced with setting the rule on the grandparent and in one exception element instead.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
agiopnl
  • 1,190
  • 9
  • 18
1

It does not matter whether you use shorthand or normal hex colours, so go ahead and convert them if you desire.

removing them saved me an entire 300 bytes in my CSS file

Wow, a full 300 bytes! :D, sarcasm for the win

The thing is, unless you're going to minify, compress and combine all of your CSS, JavaScript, etc. content, 300 bytes is barely worth bothering with, especially as the average Internet speed is increasing.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Ben Everard
  • 13,652
  • 14
  • 67
  • 96
  • 3
    Actually, I was trying to get my external CSS size below 8K, and I had already been considering doing this anyways so I figured, why not? – animuson Jun 24 '10 at 16:56
1

That is true, but this transformation is not general:

#FFF == #FFFFFF
#CCC == #CCCCCC

So it "doubles" each hexadecimal digit. So it is not the same color. It is however possible that it looks the same because the differences are minute. A calibrated color workflow could help in this case.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
GorillaPatch
  • 5,007
  • 1
  • 39
  • 56
  • Actually it is the same color because the fraction of amount of red is 1/15 in every step. #FFxxxx; is absolutely no red, as is #Fxx;. Same goes for Green and Blue. #111 is one fifteenth of every color, as is #111111, but by a factor of #F – agiopnl Jun 21 '20 at 09:58
0

It is not possible. Please go through how the hexadecimal color code works. For a few color codes, we can reduce it to three digits, however, for the many hexadecimal color codes we cannot turn that down to three digits. Please check the below links for the further clarification.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
JayK
  • 73
  • 1
  • 9