Display the hex color under your cursor in vim

Let's say you are editing a markup file such as an html file or maybe a CSS file and its full of hex values representing the colors. One nice thing that some GUI web editors do is show you the actual color represented by the numbers. Below is a solution for those who prefer to use powerful editors such as vim that typically only displays information in the terminal window.

First you'll need the ImageMagick package, which provides a command called 'display'. This allows you to display a specific color with a command like this:

display -size 300x300 xc:'#8080FF'

This will display a 300 x 300 square image made up of just the color #8080FF, which is a bluish color. To incorporate this into vim, we will need to make a function that can run this command and also one that can pull the word under the cursor and then call the function using that hex value.

function XDisplayColor(color)
    let displaycommand = "display -size 300x300 xc:'" . a:color . "'"
    execute "silent !" . displaycommand . " 2>&1 >/dev/null &"
    :redraw!
    return 1
endfunction

function ShowHexColorUnderCursor()
    let wordundercursor = expand("<cword>")
    :call XDisplayColor('\#' . wordundercursor)
    return 1
endfunction

map <F6> :call ShowHexColorUnderCursor()<CR>

Usually when calling an external command from vim, you want to use the text output from the command, but in this case we don't. In fact, it would be nicest in this case if vim just ran the command in the background and then we can close the window ourselves with the mouse or by pressing ESC in the display window.

You can just put the above configuration into your .vimrc file. This will map this function to the F6 key on your keyboard, you can of course change this to whatever you like. Note that this functionality is only going to work on vim running locally or where you are running it on a server where you have exported the X display.

As is, this will only work with hex values, but there isn't anything stopping you from writing a more sophisticated parser that would handle any type of color input value such as just a word like 'blue' or 'rgb(128,128,255)'. Its also possible to go the other way as well. If you used a graphical color picking program in X, you could process the output from that application and insert into the vim buffer. The problem seems to be, finding such an application that outputs the text value of the color you pick. Unfortunately gcolor2 doesn't do this.

--Deltaray

Created: 2014-01-03

Updated: 2015-09-25

Go to climagic homepage