Import Swatches From CSS to Photoshop
videos

Import Swatches From CSS to Photoshop

Tutorial Details
  • Estimated Completion Time: 1 Minute
  • Difficulty: Beginner
  • Apps Used: Adobe Photoshop CS6.1

Final Product What You'll Be Creating

This entry is part 23 of 29 in the Introduction to Photoshop CS6 Session
« PreviousNext »

Photoshop CS6.1 now lets you import color information directly from CSS files as a swatch in Photoshop. In this article, we will explain how this is done. Let’s take a look!



Import Swatches from CSS

If you’ve ever gone back and forth between Photoshop and CSS for a given design, then you know it can be a bit of a pain to make sure all your colors are perfectly matched between the two.

To ease this process along, Photoshop now allows you to directly import all of the colors from your CSS file. Let’s see how this works.

Load Swatches
Simply select “Load Swatches” and choose a CSS file.

To start, make sure that you have a CSS file that contains colors anywhere in the code. To get these into Photoshop, all you have to do is go to your swatches palette, select “Load Swatches” from the drop down menu, then choose a CSS file. That’s it! Photoshop will automatically comb through that file and pull out any colors that you used.

Loaded Swatches
These swatches were grabbed right out of a CSS file.

How to Get This Update

To get this update, customers can follow the following instructions.

  1. In Photoshop, choose Help > Updates
  2. The Adobe Application Manager will launch. Select Adobe Photoshop or and choose “Update.”

Upgrade to Creative Cloud

Not using the Creative Cloud? You can subscribe to the Creative Cloud and get access to all these updates, as well as the rest of the Creative Suite for just $49.99/month.

Tags: CS6Videos
  • http://rommelxcastro.com/ Rommel Castro A.

    awesome!!!

    • screw.nail

      agree…

  • Lisa

    hmmm this didn’t work for me for some reason. I did the update. I can’t select my css file when I browse. It shows as greyed out.

  • Lisa

    Is this only for Photoshop 6.1? I am on Photoshop 6. Is that why it doesn’t work?

  • FerdiCildiz

    For those who using Photoshop CS5 or older versions, type “*.*” without quotes into browse window. Then select .css file and you will get the swatches! Done in CS5.1