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
- Install the Sublime Package Control
- Press Shift-Cmd-P to open the Command Palette
- Type "insta" and select Package Control: Install Package
- Find and install Color Highlighter
Move your cursor on the HEX value and it will be highlighted with the color it represents.
Written by Marko Klemetti
Related protips
14 Responses
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!
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.
what about sublime text 3?
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.
Missing this for Sublime Text 3; Makes me almost want to downgrade..
Hi mrako. Thank you!
https://github.com/Kronuz/ColorHighlighter has ST3 support and live highlighting for the whole file
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.
"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.
Hey, how about adding DATES to posts on this website? I never know if the info I am reading is current.
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. ;)
Thanks guillaumegarcia13 for the information!
Hello, people! The plugin supports ST3 now and many other features, like highlighting all at once and color picker!
Just installed on ST3. Working great on .css files but locks up ST3 when opening .styl files.
