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 →

View CSS Colours in Sublime Text with GutterColor

At my jQueryTO talk I showed a new Sublime Text Package called GutterColor that allows you to view your CSS colours in your gutter.

Amazing! It works with plain CSS, SASS, Stylus or LESS. If you are any sort of front end developer, you probably want this right away! Unfortunately the install process is a little klunky as it relies on a lower-level program called ImageMagick to be installed on your computer. It’s easy to do, just requires a handful of steps to get up and running.

TL;DR: brew or port install ImageMagick and set the path of your convert script in your GutterColor prefs.

Installing ImageMagick on OSX

So, we need ImageMagic to be installed on our computer. The easiest way to do this is with a package manager for your mac. If you already have homebrew or macports installed, you can simply type one of the following into your terminal:

brew install imagemagick

or

sudo port install ImageMagick

No idea what brew or macports is? You’ll need to install that first before you can install ImageMagick. I recommend using HomeBrew. Simply open your terminal window (found in applications → Utilities → Terminal) and paste the following code in and hit enter:

ruby -e “$(curl -fsSL https://raw.github.com/Homebrew/homebrew/go/install)”

That will ask you for your computer’s password and then take a few minutes to install homebrew.

Once that is complete, copy and paste this into your terminal as well:

brew install imagemagick

This will also take a few minutes to install, grab a coffee!

Finally, type the following into your terminal

which convert

This will return the location of your imagemagick convert script. Remember this. Skip the windows part and jump down to Setting up Sublime Text

Installing on Windows

Head on over to the ImageMagick website and download/install the option that works with your computer. If you download the wrong version, no worries, just try another version.

When installing, take note on the install path. You will need it later.

Once you have that installed, check if it worked by opening up the command prompt (start->cmd) and type convert. You should see a few hundred lines scroll across your screen.

Now, you need to find the path that it was installed to. Open windows exporer and find where it was installed to. This is probably something like c:/Program Files/ImageMagick-6.x.x.x We want to find the convert.exe file as below:

Setting up Sublime Text

First we need to go ahead and install the GutterColor package. You can do this via Package Control (Tools → Command Palette → Type install → Search for GutterColor and hit enter).

As of right now, this package requires you to tell SublimeText where the convert script lives on your computer. Go to Sublime TextPreferencesPackage SettingsGutterColorPreferences - User and paste the following code in there. Make sure to swap out the path if your which convert command returned something different.

{
“convert_path” : “/usr/local/bin/convert”
}

In my experience, sublime required a few restarts before it started to work totally. If you see red squares in your gutter, it’s helpful to look in the Sublime Console (view → Show Console) to see if you can make sense of the errors.

This entry was posted in Sublime Text. Bookmark the permalink.

62 Responses to View CSS Colours in Sublime Text with GutterColor

  1. Aaron Ladage says:

    Thanks for the post — it really helped me with the configuration. However, I’m still getting the orangish-red squares instead of the correct colors. In the console, I’m getting “Unable to decode Cache/GutterColor/000000.png” (one error for each color in the file). I’ve restarted ST3 several times. Any ideas?

    • vongoh says:

      Same issue here – Win 8.1 64bit

    • SGT. MAC says:

      For anyone getting orange-red squares, this is the fix:

      1) Install ImageMagick anywhere you like

      2) Ensure that at the *beginning* of your system path, you have a path to the folder containing convert.exe (e.g C:\Program Files (x86)\ImageMagick;%SystemRoot%\system32;…..)

      Ignore the config file’s “convert_path” setting, it does nothing.

      Alternatively, if that doesn’t fix your problem, try typing “convert” into the commandline. If you don’t see the help text for the convert program, try reinstalling ImageMagick and ensuring that the system path is configured correctly.

      If it’s still not working, try removing/installing GutterColor through the package manager in ST again.

  2. Laurent says:

    Hi,

    I really can’t get this to work for some reason. I installed ImageMagick on my Win7 x64 machine, and updated my ST3 user settings for GutterColor to “convert_path” : “C:/Program Files/ImageMagick-6.8.8-Q16/”.

    Rebooted ST3 for a dozens of times, but keep seeing some red squares. The console learns me the following “Unable to decode Cache/GutterColor/eeeeee.png”.

    Any idea what could be the problem?

    Thanks

  3. Uri says:

    Anyone else finding the GutterColor package?

  4. Uri says:

    Think I found my answer. I’m using stable latest release V2. I think I just that this plugin is for V3.

  5. Pingback: GutterColor für Sublime 3: Geniales Plugin zeigt dir CSS-Farben direkt im Quelltext an » t3n

  6. syd says:

    we would like to see rbga colors too, not only rgba

    thank you, good job

  7. Sergey says:

    Thank you for the post.
    I installed imagemagick with brew and typed correct “convert_path” in User Preferences as you described in the post. Unfortunately it doesn’t work for me: no errors in console and also no effect in editor.
    The answer of “which convert” command is: /usr/local/bin/convert
    What did i do wrong?

  8. I’m on Windows 8 Pro 64-bit, I installed ‘ImageMagick-6.8.8-9-Q16-x64-dll.exe’ successfully, ran the test (as advised in the installation wizard), and then added the full path to GutterColor.sublime-settings, and restarted Sublime Text 3 a few times.

    However, that just showed me an orange-red box in the gutter. Until, I changed the path to simply:

    {
    “convert_path” : “convert”
    }

    and now I am seeing coloured dots in the gutter. I hope that helps folk.

    • Luis says:

      I´m on Win7 64bits and this solution works fine for me. Many thanks.

    • grapholutionary says:

      Gareth’s solution worked for me, too. I run Mac OS Mavericks.

      I wrote:

      {
      “convert_path” : “convert”
      }

      instead of:

      {
      “convert_path” : “/usr/local/bin/convert”
      }

  9. Laurent says:

    As Yura stated above:
    “This woked for me: {“convert_path” : “convert.exe”}”

    Just made this change and it finally started working now!
    Awesome.

  10. Marques says:

    From Gareth J M Saunders :

    {
    “convert_path” : “convert”
    }

    This worked for me as well. I’m on Mac running Mavericks and ST3. Thanks for the tip 🙂

  11. A says:

    Hey, thanks for the tutorial. It’s worth mentioning at the beginning of the tutorial that this is for Sublime Text 3 and not compatible with Sublime Text 2

  12. Mick says:

    Windows 7 64bit and ST3, using:

    {
    “convert_path” : “convert”
    }

    Works perfectly.
    Can I just say oh my god, this plugin is brilliant! As I’m always working with SASS colour arrays this is perfect, such a time saver for me! Love it!

  13. fab says:

    try different themes if you just see every dot in the same color

  14. Preston says:

    Hey i’ve installed imagemagik just fine on my Mac but Gutter Color doesn’t show up in Sublime?

  15. S says:

    I just downloaded the latest beta build of st3 but I cannot find the “Package Settings” in my preferences. all there is is “browse packages” (I’m on mac os 10.9) any help?

    • wesbos says:

      Make sure you have installed Package Control first – https://sublime.wbond.net/installation#st3

    • S says:

      sorry. I over-read some lines but now I’m hanging here:
      “First we need to go ahead and install the GutterColor package. You can do this via Package Control (Tools → Command Palette → Type install → Search for GutterColor and hit enter).”
      I can get to command Palette but what am I supposed to do then? type “install” or type “Type install”? both don’t do anything….

      • wesbos says:

        Just type “Install”, once you have the above package control installed. If you don’t see anything, you haven’t installed package control.

      • S says:

        yes. that could/should be mentioned somewhere in the steps though…
        thanks!

  16. Wallace says:

    Hi,
    on windows 7 64bits this following code works:

    {
    “convert_path” : “C:\\Program Files\\ImageMagick-6.8.9-Q16\\”
    }

    thanks!

  17. Brian says:

    Could only get orange-red squares to appear. Setting the convert_path value to ‘convert.exe’ didn’t help. I’m on Windows 8.1.

  18. Clack Ng says:

    Help me plz, I almost install package control but when i type GutterColor after that I can not find it to install, I using sublime text 2, windows 7 64 bit

  19. Aterr says:

    border-bottom: -1px solid black

    wtf is this one ? 😀

  20. Marco Kaiser says:

    Hello,

    I use a light Theme for Sublime Text (The IDLE Theme) and in this case I get only black circles. If I switch to an darker theme all is okay, but this is not the Color Scheme, I can work with. Has anyone figured out, how to get Gutter Color work properly, if I use an brighter theme?

    • Mitko Georgiev says:

      I think this is caused by using a non-default theme.

      – open the default package settings (in Preferences -> Package settings -> GutterColor)
      – find the “fix_color_schemes” option and change it to true

      Hope this helps, that’s what worked for me.

  21. greg says:

    How did you make your .gif?

  22. Clack Ng says:

    Help me!
    I can use gutter color now but some hex color i can not view like #fafafa or #fff. What happened ?

  23. zac says:

    could not install ImageMagick!

    this is what i’ve got:

    ⚡ brew install imagemagick

    ==> Installing dependencies for imagemagick: libtool, jpeg, libpng, freetype
    ==> Installing imagemagick dependency: libtool
    ==> Downloading https://downloads.sf.net/project/machomebrew/Bottles/libtool-2.4.2.mavericks.bottle.2.tar.gz
    ######################################################################## 100.0%
    ==> Pouring libtool-2.4.2.mavericks.bottle.2.tar.gz
    ==> Caveats
    In order to prevent conflicts with Apple’s own libtool we have prepended a “g”
    so, you have instead: glibtool and glibtoolize.
    ==> Summary

  24. zac says:

    (writing again cause my previous reply got cut in half)
    I could not install ImageMagick! this is what i’ve got after using “brew install imagemagick” (I’m on Mavericks):

    ==> Installing dependencies for imagemagick: libtool, jpeg, libpng, freetype
    ==> Installing imagemagick dependency: libtool
    […]
    In order to prevent conflicts with Apple’s own libtool we have prepended a “g”
    so, you have instead: glibtool and glibtoolize.
    […]
    ==> Pouring libpng-1.5.17.mavericks.bottle.1.tar.gz
    Warning: Could not link libpng. Unlinking…
    Error: The `brew link` step did not complete successfully
    The formula built, but is not symlinked into /usr/local
    You can try again using `brew link libpng’
    Possible conflicting files are:
    ==> Summary

  25. zac says:

    by the way, I don’t see the GutterColor package on the Install Package panel on ST2…

  26. For those of you running OS X Yosemite, be sure to append a trailing slash after the full convert_path. When I tried the previous fix (replacing the path with “convert”), I was seeing half orange squares and half colored dots.

    My working User Settings file:

    {
    “convert_path” : “/usr/local/bin/convert/”
    }

  27. Vladimir says:

    Hey guys! How I can fix this problem? The circles with color are too small.

    Here is the screenshot:

    https://onedrive.live.com/redir?resid=422A0D63EC9CE25D!1144&authkey=!AJ7msvqE37ASX70&v=3&ithint=photo%2cjpg

  28. Neha says:

    Thank you so much, that was very helpful. As suggested by @Gareth J M Saunders
    this worked for me
    {
    “convert_path” : “convert”
    }
    I greatly appreciate for help

  29. Pingback: Week of 3/21/14 – TDAS Creative Wiki

  30. Artak says:

    it all depends on what color scheme you have chosen

  31. Artak says:

    in my case, if you choose a dark color scheme while working

  32. Sany says:

    hi,
    a really dump question; how to I get to install the GutterColor?
    I did everything right from ImageMagick to type in terminal convert. As I open the sublime text and search for GutterColor I don’t find it! I downloaded the GitHub file (GutterColor) but I don’t know how to get it work or how to install it -.-
    can you please help me out?
    thank you

  33. Mark says:

    Worked first time (on OSX) – thanks, Wes!

Leave a Reply

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