Elisp: Convert Color Formats: RGB, HSL, HSV

By Xah Lee. Date: . Last updated: .

The color package color.el, in emacs 24.1, lets you convert colors from various models and formats. For example: RGB, HSL, HSV, named color values, and things like finding the color complement.

This page shows you:

Convert RGB to HSL

;; convert RGB color to HSL.
;; all input and output are in the range {0, 1}

(require 'color )

(color-rgb-to-hsl 1 0 0) ; ⇒  (0.0 1 0.5) red

(color-rgb-to-hsl 0 1 0) ; ⇒ (0.3333333333333333 1 0.5) green

(color-rgb-to-hsl 0 0 1) ; ⇒ (0.6666666666666666 1 0.5) blue

(color-rgb-to-hsl 1 1 1) ; ⇒ (0.0 0.0 1.0) white

(color-rgb-to-hsl 0 0 0) ; ⇒ (0.0 0.0 0.0) black

Note that if you are converting from hex valued RGB format such as #aabbcc, you must first convert the hex to integer, then re-scale from {0 to 255} based range to {0 to 1} based range, then feed that to color-rgb-to-hsl.

For explanation of the HSL color model, see: CSS: HSL Color

Convert HSL to RGB

;; convert HSL color to RGB.
;; all input and output are in the range {0 to 1}

(require 'color )

(color-hsl-to-rgb 0 1 .5) ; (1.0 0.0 0.0) red

(color-hsl-to-rgb .3 1 .5) ; ⇒ (0.19999999999999996 1.0 0.0) greenish

(color-hsl-to-rgb .6 1 .5) ; ⇒ (0.0 0.3999999999999999 1.0) blueish

(color-hsl-to-rgb 0 0 1) ; ⇒ (1 1 1) white

(color-hsl-to-rgb 0 0 0) ; ⇒ (0 0 0) black

Convert RGB Hexadecimal Format to Emacs Lisp Vector Format

(defun xah-css-convert-color-hex-to-vec (@rrggbb)
  "Convert color *rrggbb from “\"rrggbb\"” string to a elisp vector [r g b], where the values are from 0 to 1.
Example:
 (xah-css-convert-color-hex-to-vec \"00ffcc\") ⇒ [0.0 1.0 0.8]

Note: The input string must NOT start with “#”.
URL `http://ergoemacs.org/emacs/emacs_CSS_colors.html'
Version 2016-07-19"
  (vector
   (xah-css-normalize-number-scale (string-to-number (substring @rrggbb 0 2) 16) 255)
   (xah-css-normalize-number-scale (string-to-number (substring @rrggbb 2 4) 16) 255)
   (xah-css-normalize-number-scale (string-to-number (substring @rrggbb 4) 16) 255)))
(defun xah-css-normalize-number-scale (@val @range-max)
  "Scale *val from range [0, *range-max] to [0, 1]
The arguments can be int or float.
Return value is float.
URL `http://ergoemacs.org/emacs/emacs_CSS_colors.html'
Version 2016-07-19"
  (/ (float @val) (float @range-max)))

Command to Convert RGB Color to HSL

Here's a command that convert between CSS's RGB hexadecimal format to HSL format. For example, #ffefd5hsl(37,100%,91%)

It works on the word under cursor.

(defun xah-css-hex-color-to-hsl ()
  "Convert color spec under cursor from “#rrggbb” to CSS HSL format.
 e.g. #ffefd5 ⇒ hsl(37,100%,91%)
URL `http://ergoemacs.org/emacs/elisp_convert_rgb_hsl_color.html'
Version 2016-07-19"
  (interactive)
  (let* (
         ($bds (bounds-of-thing-at-point 'word))
         ($p1 (car $bds))
         ($p2 (cdr $bds))
         ($currentWord (buffer-substring-no-properties $p1 $p2)))
    (if (string-match "[a-fA-F0-9]\\{6\\}" $currentWord)
        (progn
          (delete-region $p1 $p2 )
          (when (equal (char-before) 35) ; 35 is #
            (delete-char -1))
          (insert (xah-css-hex-to-hsl-color $currentWord )))
      (progn
        (user-error "The current word 「%s」 is not of the form #rrggbb." $currentWord)))))
(defun xah-css-hex-to-hsl-color (@hex-str)
  "Convert *hex-str color to CSS HSL format.
Return a string. Example:  \"ffefd5\" ⇒ \"hsl(37,100%,91%)\"
Note: The input string must NOT start with “#”.
URL `http://ergoemacs.org/emacs/emacs_CSS_colors.html'
Version 2016-07-19"
  (let* (
         ($colorVec (xah-css-convert-color-hex-to-vec @hex-str))
         ($R (elt $colorVec 0))
         ($G (elt $colorVec 1))
         ($B (elt $colorVec 2))
         ($hsl (color-rgb-to-hsl $R $G $B))
         ($H (elt $hsl 0))
         ($S (elt $hsl 1))
         ($L (elt $hsl 2)))
    (format "hsl(%d,%d%%,%d%%)" (* $H 360) (* $S 100) (* $L 100))))

The code is from Emacs: Xah CSS Mode.

color.el is written by Julien Danjou [https://julien.danjou.info/blog/ ] , Drew Adams [http://www.emacswiki.org/emacs/DrewAdams ] Thanks guys.

Emacs Text Transform Under Cursor

  1. Toggle Letter Case
  2. Title Case
  3. Upcase Sentences
  4. Cycle Space Hyphen Underscore
  5. Escape Quotes
  6. Quote Lines
  7. Spaces to New Lines
  8. Change Brackets/Quotes
  9. Remove Accent Marks
  10. Convert Straight/Curly Quotes
  11. Convert English/Chinese Punctuations
  12. Color Conversion (RGB, HSL, HSV)
  13. Decimal to Hexadecimal
  14. Replace Greek Letter Names to Unicode
  15. Twitterfy Text
  16. Toggle line wrap
  17. Clean White Space

If you have a question, put $5 at patreon and message me.
Or Buy Xah Emacs Tutorial
Or buy a nice keyboard: Best Keyboards for Emacs

Emacs

Emacs Lisp

Misc