Displaying Color Codes

Here’s a trick for all of you doing web development in Vim. Did you ever wish the a hex color code could be highlighted in its actual color? It’s easy with the CSS Color plugin. Have a look:

With CSS Color installed, color code references are all highlighted in their own color. The plugin handles making the text itself either white or black depending on the shade of the color itself.

And, don’t worry it is FAST, incredibly fast, and very lightweight. The plugin itself is only 283 lines. And it’s so fast that the colors change as you type them. There are several similar plugins, but this one was rebuilt with performance in mind and is the fastest one we found with zero external dependencies.

In the screencast below, we enter a few colors in the file. You can see that the plugin recognizes all the many varied named colors, plus any of the standard color code formats. As you type, the highlight color changes to match the code:

CSS Color recognizes 29 different file formats, an applies the color coding appropriately in each of them.