Unlimited PS Actions, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
  1. Design & Illustration
  2. Tools & Tips

Import Swatches From CSS to Photoshop

Read Time:1 minLanguages:
This post is part of a series called Introduction to Photoshop CS6.
Adobe Adds Retina Support for Photoshop CS6
Quickly Convert Objects to CSS Using Photoshop CS6.1

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 SwatchesLoad SwatchesLoad 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 SwatchesLoaded SwatchesLoaded 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.

One subscription.
Unlimited Downloads.
Get unlimited downloads