Emacs: Working with CSS Color Values

By Xah Lee. Date: . Last updated: .

How to syntax color CSS hexadecimal color string?

emacs hexcode highlight 32718
colored hexadecimal 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://xahlee.info/emacs/emacs/emacs_CSS_colors.html'
Version 2017-03-12"
  (interactive)
  (font-lock-add-keywords
   nil
   '(("#[[:xdigit:]]\\{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))))))
     ("#[[:xdigit:]]\\{6\\}"
      (0 (put-text-property
          (match-beginning 0)
          (match-end 0)
          'face (list :background (match-string-no-properties 0)))))))
  (font-lock-flush))
(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.

(defun xah-syntax-color-hsl ()
  "Syntax color CSS's HSL color spec eg γ€Œhsl(0,90%,41%)」 in current buffer.
URL `http://xahlee.info/emacs/emacs/emacs_CSS_colors.html'
Version 2017-02-02"
  (interactive)
  (require 'color)
  (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-flush))
(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?

Alt+x list-colors-display.

emacs list-colors-display 2021-07-19
emacs list-colors-display 2021-07-19

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://xahlee.info/emacs/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 CSS: HSL Color]

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 hexadecimal value #c0c0c0. But in emacs, there is 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 by Lisp Code.

HTML