Emacs Feature Show Off: Rainbow Mode

There are a few ways of describing colors in web design – from using the 140 HTML color names modern browsers support like AliceBlue and GhostWhite, to HEX values such as #FFFFFF and #000000, to RGBA and HSLA.

THe trouble with coding colors in regular editors, though, is that you usually don’t know which code to type to represent a certain color, beside the easier and more memorable ones like white (#FFF or rgba(255, 255, 255, 1) or hsla(0, 100%, 100%, 1)) and black (#000 or rgba(0, 0, 0, 1) or hsla(0, 0, 0, 1)).  Even with CSS preprocessors like SCSS and LESS, there can come a time when you want to use your existing palette of 3 to 4 shades of grey/black, and you’re (obviously) not sure which is the right one among them, even when provided with the variable names. Here’s an SCSS file opened up in Sublime Text:

Screenshot of an SCSS file containing all the variables pointing to different colors used in a site - non of which indicates visually the actual color
Somebody explain to me the difference between $darkgrey, $gray, $lightblack, and $grey?

With Rainbow Mode on Emacs, though, this problem is solved way too easily – we’re just gonna show the colors together with the code that represent them. Imagine me trying to add a new grey line, and I want to know which of the existing array of greys I have in my palette I should be using. Here’s how it’s done with Emacs’ Rainbow Mode:

Screencast highlighting how easy it is to pick a color from within Emacs when the color is visually shown with the code
With the colors presented to me visually, how can I not know which HEX or RGBA code to use?

Piece of cake, really.

(Disclaimer: I’m not saying Rainbow Mode is unique to Emacs – I know for a fact that Sublime Text has a ColorHighlighter plugin too.)