In the upcoming month I’m going to share a number of ways of compressing CSS. And one of the most basic is to reduce the various colour values down.

Usually, hex values are used and, sometimes, the colour names. And choosing the right one can save up to 13 characters per reference. Let’s explore how…

First of all, I’m going to assume here that any hex values have been reduced down – so, for example, `#111111`

would now be `#111`

and `#AABBCC`

would be `#ABC`

. There are 4096 examples of where this can be applied (out of the 16m+ ranges that are available).

## Hex to Names

Hex Value | Colour Name | Character Reduction |
---|---|---|

#000080 | Navy | 3 |

#008000 | Green | 2 |

#008080 | Teal | 3 |

#00FF00 | Lime | 3 |

#4B0082 | Indigo | 1 |

#800000 | Maroon | 1 |

#800080 | Purple | 1 |

#808000 | Olive | 2 |

#808080 | Gray | 3 |

#A0522D | Sienna | 1 |

#A52A2A | Brown | 2 |

#C0C0C0 | Silver | 1 |

#CD853F | Peru | 3 |

#D2B48C | Tan | 4 |

#DA70D6 | Orchid | 1 |

#DDA0DD | Plum | 3 |

#EE82EE | Violet | 1 |

#F0E68C | Khaki | 2 |

#F00 | Red | 1 |

#F0FFFF | Azure | 2 |

#F5DEB3 | Wheat | 2 |

#F5F5DC | Beige | 2 |

#FA8072 | Salmon | 1 |

#FAF0E6 | Linen | 2 |

#FF6347 | Tomato | 1 |

#FF7F50 | Coral | 2 |

#FFA500 | Orange | 1 |

#FFC0CB | Pink | 3 |

#FFD700 | Gold | 3 |

#FFE4C4 | Bisque | 1 |

#FFFAFA | Snow | 3 |

#FFFFF0 | Ivory | 2 |

#808080 | Grey | 3 |

Here’s an array that can be used in your code of the above values…

## Names to Hex

Colour Name | Hex Value | Character Reduction |
---|---|---|

Black | #000 | 1 |

DarkBlue | #00008B | 1 |

MediumBlue | #0000CD | 3 |

DarkGreen | #006400 | 2 |

DarkCyan | #008B8B | 1 |

DeepSkyBlue | #00BFFF | 4 |

DarkTurquoise | #00CED1 | 6 |

MediumSpringGreen | #00FA9A | 10 |

SpringGreen | #00FF7F | 4 |

MidnightBlue | #191970 | 5 |

DodgerBlue | #1E90FF | 3 |

LightSeaGreen | #20B2AA | 6 |

ForestGreen | #228B22 | 4 |

SeaGreen | #2E8B57 | 1 |

DarkSlateGray | #2F4F4F | 6 |

LimeGreen | #32CD32 | 2 |

MediumSeaGreen | #3CB371 | 7 |

Turquoise | #40E0D0 | 2 |

RoyalBlue | #4169E1 | 2 |

SteelBlue | #4682B4 | 2 |

DarkSlateBlue | #483D8B | 6 |

MediumTurquoise | #48D1CC | 8 |

DarkOliveGreen | #556B2F | 7 |

CadetBlue | #5F9EA0 | 2 |

CornFlowerBlue | #6495ED | 7 |

MediumAquaMarine | #66CDAA | 9 |

SlateBlue | #6A5ACD | 2 |

OliveDrab | #6B8E23 | 2 |

SlateGray | #708090 | 2 |

LightSlateGray | #778899 | 7 |

MediumSlateBlue | #7B68EE | 8 |

LawnGreen | #7CFC00 | 2 |

Chartreuse | #7FFF00 | 3 |

AquaMarine | #7FFFD4 | 3 |

LightSkyBlue | #87CEFA | 5 |

BlueViolet | #8A2BE2 | 3 |

DarkMagenta | #8B008B | 4 |

SaddleBrown | #8B4513 | 4 |

DarkSeaGreen | #8FBC8F | 5 |

LightGreen | #90EE90 | 3 |

MediumPurple | #9370DB | 5 |

DarkViolet | #9400D3 | 3 |

PaleGreen | #98FB98 | 2 |

DarkOrchid | #9932CC | 3 |

YellowGreen | #9ACD32 | 4 |

DarkGray | #A9A9A9 | 1 |

DarkGrey | #A9A9A9 | 1 |

LightBlue | #ADD8E6 | 2 |

GreenYellow | #ADFF2F | 4 |

PaleTurquoise | #AFEEEE | 6 |

LightSteelBlue | #B0C4DE | 7 |

PowderBlue | #B0E0E6 | 3 |

Firebrick | #B22222 | 2 |

DarkGoldenRod | #B8860B | 6 |

MediumOrchid | #BA55D3 | 5 |

RosyBrown | #BC8F8F | 2 |

DarkKhaki | #BDB76B | 2 |

MediumVioletRed | #C71585 | 8 |

IndianRed | #CD5C5C | 2 |

Chocolate | #D2691E | 2 |

LightGray | #D3D3D3 | 2 |

LightGrey | #D3D3D3 | 2 |

GoldenRod | #DAA520 | 2 |

PaleVioletRed | #DB7093 | 6 |

Gainsboro | #DCDCDC | 2 |

BurlyWood | #DEB887 | 2 |

LightCyan | #E0FFFF | 2 |

Lavender | #E6E6FA | 1 |

DarkSalmon | #E9967A | 3 |

PaleGoldenRod | #EEE8AA | 6 |

LightCoral | #F08080 | 3 |

AliceBlue | #F0F8FF | 2 |

Honeydew | #F0FFF0 | 1 |

SandyBrown | #F4A460 | 3 |

WhiteSmoke | #F5F5F5 | 3 |

MintCream | #F5FFFA | 2 |

GhostWhite | #F8F8FF | 3 |

AntiqueWhite | #FAEBD7 | 5 |

LightGoldenRodYellow | #FAFAD2 | 13 |

Magenta | #F0F | 3 |

Fuchsia | #F0F | 3 |

DeepPink | #FF1493 | 1 |

OrangeRed | #FF4500 | 2 |

DarkOrange | #FF8C00 | 3 |

LightSalmon | #FFA07A | 4 |

LightPink | #FFB6C1 | 2 |

PeachPuff | #FFDAB9 | 2 |

NavajoWhite | #FFDEAD | 4 |

Moccasin | #FFE4B5 | 1 |

MistyRose | #FFE4E1 | 2 |

BlanchedAlmond | #FFEBCD | 7 |

PapayaWhip | #FFEFD5 | 3 |

LavenderBlush | #FFF0F5 | 6 |

SeaShell | #FFF5EE | 1 |

CornSilk | #FFF8DC | 1 |

LemonChiffon | #FFFACD | 5 |

FloralWhite | #FFFAF0 | 4 |

Yellow | #FF0 | 2 |

LightYellow | #FFFFE0 | 4 |

White | #FFF | 1 |

And here’s an array of this…

## RGB Colours

In CSS you can also specify colours in decimal RGB format, where you use 0-255 for each of the three colours.

For example, where red is `#ff0000`

in hex, in RGB it’s listed as `rgb(255, 0, 0)`

. In all cases, even when you strip out the un-needed spaves, converting away from RGB is better.

My recommendation would be to do this first and convert to hex first before sweeping for any hex to colour name improvement.

## Talk to me!