2012-03-23

Working with HTML/CSS Colors in Emacs

Perm URL with updates: http://xahlee.org/emacs/emacs_CSS_colors.html

Am quite annoyed that the colors shown by list-colors-display is not compatible with CSS colors. In emacs, you can call list-colors-display. It'll display X11 color names with its hex values, with the text colored. Very convenient if you work with HTML/CSS. However, the color names is not compatible with the 16 basic CSS colors.

For example, in CSS, there's a color named “silver” with hex value #c0c0c0. But in emacs, there's no such name nor such value. Here's a list of CSS colors.

Basic CSS Colors
CSS NameCSS Value
White #FFFFFF
Silver ◇ #C0C0C0
Gray ◇ #808080
Black #000000
Red #FF0000
Maroon ◆ #800000
Yellow ◇ #FFFF00
Olive ◇ #808000
Lime ◇ #00FF00
Green ◆ #008000
Aqua ◇ #00FFFF
Teal ◇ #008080
Blue #0000FF
Navy #000080
Fuchsia ◇ #FF00FF
Purple ◆ #800080
Those with a “◇” means it's NOT in emacs's list-colors-display. Those with “◆” means it's got different value in emacs. (GNU Emacs 24.0.93.1)

Here's a quick workaround. Define abbrev so that you can just type CSS color names and it'll expand to the value. Here's the code:

("8white" "#ffffff" nil 0)
("8silver" "#c0c0c0" nil 0)
("8gray" "#808080" nil 0)
("8black" "#000000" nil 0)
("8red" "#ff0000" nil 0)
("8maroon" "#800000" nil 0)
("8yellow" "#ffff00" nil 0)
("8olive" "#808000" nil 0)
("8lime" "#00ff00" nil 0)
("8green" "#008000" nil 0)
("8aqua" "#00ffff" nil 0)
("8teal" "#008080" nil 0)
("8blue" "#0000ff" nil 0)
("8navy" "#000080" nil 0)
("8fuchsia" "#ff00ff" nil 0)
("8purple" "#800080" nil 0)

If you are not familiar with emacs abbrev feature, see: Using Emacs's Abbrev Mode for Abbreviation.

If you want the hex values colored in your HTML/CSS code, see: Emacs: Working with HTML/CSS/X11 Color Values.