Emacs: Working with CSS Color Values

Master emacs+lisp, benefit for life. Testimonials. Thank you for support.
, , …,

How to syntax color CSS hex color string?

emacs hexcode highlight
colored hex color spec.

Put the following code in your emacs init file:

(defun xah-syntax-color-hex ()
"Syntax color hex color spec such as 「#ff1100」 in current buffer."
  (interactive)
  (font-lock-add-keywords
   nil
   '(("#[abcdef[: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.

How to syntax color CSS HSL syntax?

emacs xah css mode 2014-04-22
emacs xah css mode

put the following code in your emacs init.

(defun xah-syntax-color-hsl ()
  "Syntax color hex color spec such as 「hsl(0,90%,41%)」 in current buffer."
  (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.

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

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

emacs colors

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 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
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 name or value in emacs. (GNU Emacs 24.0.93.1)

〔☛ 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:

("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")

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

Like what you read?
Buy Xah Emacs Tutorial
or share some
blog comments powered by Disqus