a1qqiw
Last Updated: February 25, 2016
·
26.45K
· mrako
4fe949ea9ee7c0bc5eb4bf3e17b09d75

Highlight CSS Colors in Sublime

Hello! As you can see in the comments, this plugin has been updated and it supports Sublime Text 3.

I usually create my layouts in Photoshop, but often when I'm implementing the layout (in Sublime) it would help me to immediately know what color the HEX values actually are.

I tried using Sublime ColorPicker, but it starts a separate application and I have to close the Colorpicker Window before continuing. Thus it was blocking my workflow.

Luckily I found the ColorHighlighter plugin, which highlights the HEX value with its respective color.

Installation

  1. Install the Sublime Package Control
  2. Press Shift-Cmd-P to open the Command Palette
  3. Type "insta" and select Package Control: Install Package
  4. Find and install Color Highlighter

Move your cursor on the HEX value and it will be highlighted with the color it represents.

Say Thanks
Respond

14 Responses
Add your response

3945
Kong

Thats a good find, thanks! I have to say i run OSX and i use color picker http://goo.gl/6V90f I believe the one you mention but it only opens a shell window for me and lets me change the selected color pretty quickly and i dont have to close anything. Either way you found a nice gem thanks for sharing again, cheers!

over 1 year ago ·
5406
97205e729bfa694358461342b97b7f14

This is pretty great.

I find it's easiest for me when I'm starting a new project is to just make a variable for my key palette. And if I ever need to to adjust the shade I just use the SASS lighten($blue, 10%) etc.

But that is if your working in SASS obviously, what's great about the 'Color Highlighter' is that it's unobtrusive which I appreciate.

over 1 year ago ·
9361
817151833a588fb986e75a26f6eff328

what about sublime text 3?

over 1 year ago ·
9525
4fe949ea9ee7c0bc5eb4bf3e17b09d75

Hi omar-g, sorry for the late answer.

Color Highlighter does not yet support Sublime Text 3. I'll see what I can do and be back to you.

over 1 year ago ·
9602

Missing this for Sublime Text 3; Makes me almost want to downgrade..

over 1 year ago ·
9701
817151833a588fb986e75a26f6eff328

Hi mrako. Thank you!

over 1 year ago ·
9974
9ef96c29b1e9b25907052a29f125c553

https://github.com/Kronuz/ColorHighlighter has ST3 support and live highlighting for the whole file

over 1 year ago ·
9986
4fe949ea9ee7c0bc5eb4bf3e17b09d75

Hi Kronuz, thanks!

Unfortunately I couldn't make it work, not even with cloning it straight from Github. Please drop me an email and let's sort it out so I can update the tip.

over 1 year ago ·
10056

"Move your cursor on the HEX value and it will be highlighted with the color it represents."

I installed the plugin and restarted ST2.

However I don't see the color overlays when hovering, only see them upon clicks.

over 1 year ago ·
12006
E0ae9ea9a1155e88c3b39637d496cded

Hey, how about adding DATES to posts on this website? I never know if the info I am reading is current.

over 1 year ago ·
13468
F4dbd9bc13b9b5a5a6f29b944d0a5108

Thx Kronuz!
I used the Add repository feature from Package Control with the GitHub URL and then Install Package, restarted ST3 and that was it. ;)

over 1 year ago ·
13469
4fe949ea9ee7c0bc5eb4bf3e17b09d75

Thanks guillaumegarcia13 for the information!

over 1 year ago ·
14007
394d6a3e56f7f52c0888d3570cc71561

Hello, people! The plugin supports ST3 now and many other features, like highlighting all at once and color picker!

over 1 year ago ·
16348
6a2df51ad9a675338414f823cd5b3e1a

Just installed on ST3. Working great on .css files but locks up ST3 when opening .styl files.

over 1 year ago ·