Emacs: Working with CSS Color Values

Xah Lee, 2006-09-30, …, 2012-12-06

In CSS, is there a way to have color values colored by themselves?

You can install rainbow-mode. 〔☛ A Guide on Emacs 24 Package System〕

Or, put the following code in your emacs init file:

(defvar hexcolour-keywords
  '(("#[abcdef[:digit:]]\\{6\\}"
     (0 (put-text-property
         (match-beginning 0)
         (match-end 0)
         'face (list :background
                     (match-string-no-properties 0)))))))
(defun hexcolour-add-to-font-lock ()
  (font-lock-add-keywords nil hexcolour-keywords))

(add-hook 'css-mode-hook 'hexcolour-add-to-font-lock)
(add-hook 'php-mode-hook 'hexcolour-add-to-font-lock)
(add-hook 'html-mode-hook 'hexcolour-add-to-font-lock)

With the above code, when you open a CSS file, any text of color spec in hex form will be colored with its value, as the background color. Here's a sample screenshot:

The code above only works with color of the form #rrggbb, not CSS3's HSL hsl(0,100%,50%). 〔☛ CSS3 HSL (Hue, Saturation, Lightness) Color Samples〕

How to show a color palette and their RGB hex values?

Use the menu 〖Edit ▸ Text Properties ▸ Display Colors〗 or call list-colors-display.

How to insert a random CSS color?

Here's a example:

(defun insert-random-color-hsl ()
  "Insert a random color string of CSS HSL format.
Example output: hsl(100,24%,82%)"
  (interactive)
  (insert (format "hsl(%d,%d%%,%d%%)" (random 360) (random 100) (random 100))) )

You can modify the code to insert a random color in #rrggbb format. 〔☛ CSS3 HSL (Hue, Saturation, Lightness) Color Samples〕

HTML/CSS Colors is Not Compatible with Emacs/X11 Colors

The color names from list-colors-display is based on X11 colors, and is not compatible with 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 Name	CSS 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` ◇

Basic CSS Colors

CSS Name

CSS 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 ◇

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") ("8silver" "#c0c0c0") ("8gray" "#808080") ("8black" "#000000") ("8red" "#ff0000") ("8maroon" "#800000") ("8yellow" "#ffff00") ("8olive" "#808000") ("8lime" "#00ff00") ("8green" "#008000") ("8aqua" "#00ffff") ("8teal" "#008080") ("8blue" "#0000ff") ("8navy" "#000080") ("8fuchsia" "#ff00ff") ("8purple" "#800080")