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
![](https://coderwall-assets-0.s3.amazonaws.com/uploads/user/avatar/55430/kong.jpg)
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!
![](https://coderwall-assets-0.s3.amazonaws.com/uploads/user/avatar/53650/97205e729bfa694358461342b97b7f14.png)
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.
![](https://coderwall-assets-0.s3.amazonaws.com/uploads/user/avatar/81194/817151833a588fb986e75a26f6eff328.jpg)
what about sublime text 3?
![](https://coderwall-assets-0.s3.amazonaws.com/uploads/user/avatar/46572/4fe949ea9ee7c0bc5eb4bf3e17b09d75.jpeg)
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..
![](https://coderwall-assets-0.s3.amazonaws.com/uploads/user/avatar/81194/817151833a588fb986e75a26f6eff328.jpg)
Hi mrako. Thank you!
![](https://coderwall-assets-0.s3.amazonaws.com/uploads/user/avatar/84222/9ef96c29b1e9b25907052a29f125c553.jpeg)
https://github.com/Kronuz/ColorHighlighter has ST3 support and live highlighting for the whole file
![](https://coderwall-assets-0.s3.amazonaws.com/uploads/user/avatar/46572/4fe949ea9ee7c0bc5eb4bf3e17b09d75.jpeg)
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.
![](https://coderwall-assets-0.s3.amazonaws.com/uploads/user/avatar/93428/e0ae9ea9a1155e88c3b39637d496cded.jpg)
Hey, how about adding DATES to posts on this website? I never know if the info I am reading is current.
![](https://coderwall-assets-0.s3.amazonaws.com/uploads/user/avatar/95511/f4dbd9bc13b9b5a5a6f29b944d0a5108.png)
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. ;)
![](https://coderwall-assets-0.s3.amazonaws.com/uploads/user/avatar/46572/4fe949ea9ee7c0bc5eb4bf3e17b09d75.jpeg)
Thanks guillaumegarcia13 for the information!
![](https://coderwall-assets-0.s3.amazonaws.com/uploads/user/avatar/105004/394d6a3e56f7f52c0888d3570cc71561.jpeg)
Hello, people! The plugin supports ST3 now and many other features, like highlighting all at once and color picker!
![](https://coderwall-assets-0.s3.amazonaws.com/uploads/user/avatar/116813/6a2df51ad9a675338414f823cd5b3e1a.jpeg)
Just installed on ST3. Working great on .css files but locks up ST3 when opening .styl files.