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:
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:
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.)