Emacs: Working with CSS Color Values

By Xah Lee. Date: . Last updated: .

How to syntax color CSS hex color string?

emacs hexcode highlight 32718
colored hex color spec.

Put the following code in your emacs init file:

(defun xah-syntax-color-hex ()
  "Syntax color text of the form 「#ff1100」 and 「#abc」 in current buffer.
URL `http://ergoemacs.org/emacs/emacs_CSS_colors.html'
Version 2016-07-04"
  (interactive)
  (font-lock-add-keywords
   nil
   '(("#[ABCDEFabcdef[:digit:]]\\{3\\}"
      (0 (put-text-property
          (match-beginning 0)
          (match-end 0)
          'face (list :background
                      (let* (
                       (ms (match-string-no-properties 0))
                       (r (substring ms 1 2))
                       (g (substring ms 2 3))
                       (b (substring ms 3 4)))
                  (concat "#" r r g g b b))))))
     ("#[ABCDEFabcdef[:digit:]]\\{6\\}"
      (0 (put-text-property
          (match-beginning 0)
          (match-end 0)
          'face (list :background (match-string-no-properties 0)))))))
  (font-lock-fontify-buffer))
(add-hook 'css-mode-hook 'xah-syntax-color-hex)
(add-hook 'php-mode-hook 'xah-syntax-color-hex)
(add-hook 'html-mode-hook 'xah-syntax-color-hex)

For any file, you can call the command to color.

Or, use Emacs Xah CSS Mode.

How to syntax color CSS HSL syntax?

put the following code in your emacs init.

(require 'color)

(defun xah-syntax-color-hsl ()
  "Syntax color CSS's HSL color spec ➢ for example: 「hsl(0,90%,41%)」 in current buffer.
URL `http://ergoemacs.org/emacs/emacs_CSS_colors.html'
Version 2015-06-11"
  (interactive)
  (font-lock-add-keywords
   nil
   '(("hsl( *\\([0-9]\\{1,3\\}\\) *, *\\([0-9]\\{1,3\\}\\)% *, *\\([0-9]\\{1,3\\}\\)% *)"
      (0 (put-text-property
          (+ (match-beginning 0) 3)
          (match-end 0)
          'face
          (list
           :background
           (concat
            "#"
            (mapconcat
             'identity
             (mapcar
              (lambda (x) (format "%02x" (round (* x 255))))
              (color-hsl-to-rgb
               (/ (string-to-number (match-string-no-properties 1)) 360.0)
               (/ (string-to-number (match-string-no-properties 2)) 100.0)
               (/ (string-to-number (match-string-no-properties 3)) 100.0)))
             "" )) ;  "#00aa00"
           ))))))
  (font-lock-fontify-buffer))
(add-hook 'css-mode-hook 'xah-syntax-color-hsl)
(add-hook 'php-mode-hook 'xah-syntax-color-hsl)
(add-hook 'html-mode-hook 'xah-syntax-color-hsl)

For any file, you can call the command to color.

Or, use Emacs Xah CSS Mode.

How to list colors?

Call list-colors-display.

emacs colors
emacs list-colors-display output.

How to insert a random CSS color?

Here's a example:

(defun xah-css-insert-random-color-hsl ()
  "Insert a random color string of CSS HSL format.
Sample output: hsl(100,24%,82%);
URL `http://ergoemacs.org/emacs/emacs_CSS_colors.html'
Version 2015-06-11"
  (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. 〔➤see CSS3 HSL (Hue, Saturation, Lightness) Color Samples

CSS Color Naming is Not Compatible with Emacs

The color names from list-colors-display is based on unix GUI system X11's colors, and is not compatible with CSS color names.

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's basic colors.

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

〔➤see Complete List of CSS Color Names

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:

(define-abbrev-table
  'global-abbrev-table
  '(
    ("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")
    ))

For how to define abbrev, see: Emacs: Abbrev Mode Tutorial.

Like it? Buy Xah Emacs Tutorial. Thanks.

or, buy something from Best Keyboard for Emacs