Tech Tip: Shorthand Hex Colors in CSS

PRODUCT: 4D Web 2.0 Pack | VERSION: 12.1 | PLATFORM: Mac & Win

Published On: March 17, 2011

Shorthand CSS hex color notation reduces the CSS color length by half by truncating 2 repeated digits to one. For example: 00 becomes 0, 11 becomes 1, etc.

Only colors that have all three components (red, green, and blue) in repeated digit form can be trucated, like in these examples:

Red long:

.red { color: #ff0000; }

Becomes red short:

.red { color: #f00; }

Orange long:

.orange { background-color: #ff6600; }

Becomes orange short:

.orange { background-color: #f60; }