22

I use the excellent rainbow-mode to highlight colors in CSS files.

css with rainbow-mode

However, this assumes I know what color I want. Are there any color pickers that I can use for CSS editing inside Emacs? Ideally, I'd really like something where I can make colors slightly darker/brighter/redder/greener, like the Firefox color picker:

firefox color picker

Alternatively, I've noticed customize-face offers a color picker from a set of 548 colors. Can I use this for CSS?

customize-face color picker

2
  • 3
    I can't resist quoting an exchange that dates back to the early days of Emacs: "Master, does Emacs have buddha-nature?" "... I can't see why not; it has everything else."
    – keshlam
    Commented Dec 20, 2014 at 22:24
  • 1
    Thanks for bringing up rainbow-mode! I was looking for just this feature and couldn't remember which package it was in.
    – wdkrnls
    Commented Jan 11, 2015 at 20:11

4 Answers 4

20

Have a look at helm-colors. It presents the colors exactly as in your screenshot and seems to be using a similar or even the same palette.

To insert a color name into the current buffer, press C-c n (runs the action Insert Name).

To insert the hex value of a color, press C-c r (run the action Insert RGB).

4
  • 3
    I second helm-colors. Here is a demo for anyone interests in how it looks like. You can select a color and insert it right into your editing buffers.
    – Tu Do
    Commented Dec 20, 2014 at 15:27
  • 2
    helm-colors is excellent, but it doesn't seem to replace the at point, nor even insert in the buffer. Ideally I'd like something that supported arbitrary colors. Commented Dec 20, 2014 at 16:26
  • 1
    @WilfredHughes It does have. You need to look at the action menu, by pressing TAB (the default key binding, use yours if you bind to something else). See my helm-colors section in my guide.
    – Tu Do
    Commented Dec 20, 2014 at 16:40
  • 2
    If you want to insert a color with its hex value, press C-c r.
    – Tu Do
    Commented Dec 20, 2014 at 16:46
16
  • Library Palette (palette.el) gives you a general WYSIWYG color editor/picker, which lets you explore and modify colors using RGB and HSV values, including incrementally. It looks like what you show in your second image.

  • Library Do Re Mi (doremi.el, doremi-cmd.el, doremi-frm.el) lets you modify colors used in Emacs incrementally: "direct manipulation".

  • Library Facemenu+ (facemenu+.el) lets you use the color palette (#1) to change colors used in Emacs. It enhances standard library facemenu.el, things like list-colors-display and list-faces-display (which look similar to your 3rd image).

  • Library Icicles lets you choose and manipulate colors and faces incrementally, manipulating RGB, HSV, etc. and sorting possible choices in many ways (e.g. combining color-component strengths).

(You can get the libraries mentioned here from MELPA, and the Lisp files contain the full documentation (but without images).)

7

How about:

(defun my-insert-color-hex (&optional arg)
  "Select a color and insert its 24-bit hexadecimal RGB format.

With prefix argument \\[universal-argument] insert the 48-bit value."
  (interactive "*P")
  (let ((buf (current-buffer)))
    (list-colors-display
     nil nil `(lambda (name)
                (interactive)
                (quit-window)
                (with-current-buffer ,buf
                  (insert (apply #'color-rgb-to-hex
                                 (nconc (color-name-to-rgb name)
                                        (unless (consp ',arg)
                                          (list (or ,arg 2)))))))))))
0

Have a look at emacsfodder/kurecolor.

  • convert colors between different formats
    • #RRGGBB(AA) hex colors to/from CSS rgb()/rgba()
    • XCode colorLiteral to/from hex colors
    • rgb to/from hsv
  • interactive incremental step adjust hue,sat,brightness on a single color at point
  • adjust or set hue,sat,brightness on all colors found in a region/buffer (from point)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.