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.

How useful was this tip?

Average rating 3.1 / 5. Vote count: 597

No votes so far! Be the first to rate this tip.

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post?

Written by

Colin Bartlett

105 Posts

Vim enthusiast and software developer for more than 20 years.
View all posts