I just launched a new course on ES6! Use the code WESBOS for $10 off.

Strengthen your core JavaScript skills and master all that ES6 has to offer. Start Now →

Highlight CSS colours in Sublime Text

In What The Flexbox, one of the biggest questions I’ve received is “how do you get your colours to show up in Sublime Text like that”?

I’ve answered it maybe 20 times now. The trick is getting them to show up all the time, instead of just when you click a color. This is one of my favourite packages because it works in CSS, Stylus, Sass and Less! Here is a quick 101. Watch the video or read the text below:

First, install the Color Highlighter package from Package Control

Next, restart Sublime Text.

Then, in Preferences → Package Settings → Color Highlighter → Settings – User

Use the “filled” setting to make them show all the time.

"ha_style": "filled"

Enjoy! You can also grab my Sublime Text Book and use WESBOS for $10 off.

This entry was posted in CSS, Sublime Text, Workflow + Tooling. Bookmark the permalink.

9 Responses to Highlight CSS colours in Sublime Text

  1. Sang says:

    I wish it worked with variables that have hyphens (‐). Screenshot: https://cldup.com/TC-865QJNM-3000×3000.png.

  2. alexander shekhtman says:

    i did everything like you said, but it doesnt work for me on my .scss files.

  3. Allie says:

    This is AWESOME! I love learning new tricks for Sublime Text. Thanks Wes!

  4. Shrinivas says:

    It’s a nice plugin for Sublime, here is for Atom https://github.com/abe33/atom-color-highlight

  5. Mike Kormendy says:

    Unfortunately I’ve seen this plugin slow sublime down to a crawl when attempting to read rgba values.

    • Asaf Agranat says:

      2nd that. Also, documents with many color variables (like _variables.scss) make sublime painfully slow to respond.

Leave a Reply

Your email address will not be published. Required fields are marked *