a1qqiw
Last Updated: February 25, 2016
·
28.27K
· mrako

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.

14 Responses
Add your response

3945

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

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

what about sublime text 3?

over 1 year ago ·
9525

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

Hi mrako. Thank you!

over 1 year ago ·
9974

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

over 1 year ago ·
9986

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

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

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

Thanks guillaumegarcia13 for the information!

over 1 year ago ·
14007

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

over 1 year ago ·
16348

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

over 1 year ago ·