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!