Hex Number Color highlighter


Is there a way to have the Hex number for a color highlight to the specified color in the editor?


like https://atom.io/packages/pigments ?


Yes. But one that would work for the Cloud9 editor


One could build this as a plugin fairly easily…


Being new to coding, this would be out of my league for now.


I would like to see this as well. It’d come in handy.


Eh, I’ll take a whack at it.

edit: Been working on this just a tad, and the easiest way is to just make a hotkey command (ctrl-shift-j) or (cmd-shift-j) to trigger the highlighting.

Got the command added, got ace coming in, now just have to parse the file for color codes eg. #123, #123456, rgb(1,2,3), rgba(1,2,3,4) … Then add markers at their location using their own color code.

update: I have the hex highlighting working on command.

I’ll start working on the rgb and rgba ones as well.

update: I have the rgb and rgba working as well.

I’ll start working on turning off the highlighting

You can disable highlighting by using the command ctrl-shift-alt-c or on mac command-shift-alt-c respectively.


Nice work! Have you put this plugin on Github?


Looks Awesome. It would be great if i could add that to my c9


It is on github and I have published it. However I’m having issues installing it into another workspace.

Here is the github link https://github.com/shadowcodex/c9.ide.pigments


Edit: even though I run the c9 install plugin command the plugin doesn’t show up under the plugin manager.

Double Edit: You have to go into preferences>Experimental>SDK and enable Load Plugins From Workspace and Load Custom Plugins


Thank you sir, I got it working. Appreciate you coming up with a solution so fast


Sure thing! It was fun!

It may be a tad buggy, if you see any issues in usage please submit an issue on github and I’ll maintain the plugin.


Version 1.3.1 update:

I have added a function called reports. To update just install the plugin again with the --force tag. Then reload your c9 ide.

The new function can be accessed with the following commands

  • mac: command-shift-alt-g
  • win: ctrl-shift-alt-g

it will generate a very nice report of all colors in your project and various color palettes for them.

Here is a sample screenshot:


Thanks shadowcodex just what I was looking for!
This is so useful I wish it was built into c9