Last Updated: August 12, 2019
·
33K
· Marko Klemetti

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

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 ·

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 ·

what about sublime text 3?

over 1 year ago ·

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 ·

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

over 1 year ago ·

Hi mrako. Thank you!

over 1 year ago ·

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

over 1 year ago ·

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 ·

"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 ·

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 ·

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 ·

Thanks guillaumegarcia13 for the information!

over 1 year ago ·

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

over 1 year ago ·

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

over 1 year ago ·