Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I use 3-digit color codes rather than 6-digit color codes in CSS?

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?

like image 654
animuson Avatar asked Jun 24 '10 09:06

animuson


People also ask

Can hex be 3 digits?

3 Digit HEX ValueThe 3-digit hex code is a shorthand for some 6-digit hex codes. Where r, g, and b represents the red, green, and blue components with values between 0 and f. The 3-digit hex code can only be used when both the values (RR, GG, and BB) are the same for each components.

Are hex codes always 6 digits?

Hex Codes Represent Red, Green and Blue In fact, equal levels of red, green and blue, whatever that level may be, will always produce a shade of gray. The six digits of a hex code are in fact three two-digit numbers, each representing the level of red, green and blue.

What is the 6 digit code for colors?

Hex triplet. A hex triplet is a six-digit, three-byte hexadecimal number used in HTML, CSS, SVG, and other computing applications to represent colors. The bytes represent the red, green, and blue components of the color.

How many digits is a color code?

The most popular are Hex color codes; three byte hexadecimal numbers (meaning they consist of six digits), with each byte, or pair of characters in the Hex code, representing the intensity of red, green and blue in the color respectively.


1 Answers

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.

like image 148
Chris Avatar answered Sep 21 '22 07:09

Chris