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.

26 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. I’m been playing with Atom and they have a package called “Pigments” that will actually show the true tint of a color. It’s a little more robust than the Sublime version.
    http://jmp.sh/aWcBQR0

  3. Awesome tip, always wondered why they didn’t offer that as a default setting 🙂

    Cheers
    Daryl

  4. Ja-oon Solo says:

    Thanks for the collection of tuts.

  5. Rose says:

    Is there any way to get it to highlight scss variables that are defined in an external file?

  6. Andy Giesler says:

    A thousand thanks. A while ago I tried this as an alternative to Gutter Color but I didn’t realize “always on” was possible.

  7. ethan says:

    does this require ST3?

  8. Lionel Barnabas says:

    Hi Wes, thanks for sharing your knowledge.

    It would be nice if it worked for me as for you.

    I tried it on a simple css file.
    Once I change the hex code and saved the file, the highlight colour changed to white.

    I need to restart Sublime text for the colour to kick in.
    Not even closing the file and reopening it helps.

    Not too sure if other users are having the same issues.

  9. Javier says:

    That it’s awesome Wes!

  10. alexander shekhtman says:

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

  11. Allie says:

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

  12. Shrinivas says:

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

  13. 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.

      • Elangovan Manickam says:

        I also observed this issue a while. But resolved it by disabling “show icon” in tools->color highlighter->highlight style and highlight all style menu.

        I had mistakenly selected show icon option which made the Sublime unresponsive. after hiding it , the ST3 is pretty mch back to its own speed.

    • Omar Habash says:

      true!

  14. Hemant says:

    very nice.

  15. dima says:

    Illumination does not work, can you tell me what’s the matter?
    In settings added
    {
    “ha_style”: “filled”
    }
    But the color showed one time only immediately after adding this line. After restarting Sublime Text color does not seem what didn’t do.

  16. joey says:

    Yeyyy this works! Thank you!

  17. Oscar Gallego says:

    I’ve notice that it does not work in stylus files if the $var is defined in another file. For example:

    If I define this var in a file called colors.styl:

    title_color = #333

    In other file called sidebar.styl I want to use the var title_color, but it does not show the color, only works if the var is defined in the same file. Of course all this file are included together, to use all throught the project.

Leave a Reply

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