Let's look closely at a crucial and time-saving product for designers called Adobe Kuler. We’ll learn to explore, create and share color themes using the Kuler website and the built in extension of Kuler in Photoshop CS4. What’s Adobe Kuler? It’s a web-hosted application, providing free color themes that can be used by anybody, in any project you are working on. Let's jump into this article and learn more about Adobe Kuler and how to use it with Photoshop!
Introduction
How does Adobe Kuler work? What do I need? The only requirements, for using Kuler, are a Web browser with an enabled Flash Player 9 or higher, since it is Flash based. Additionally, you can access the Kuler extension from any Creative Suite 4 product or use the Desktop Air Kuler application.
Flash Player required
Kuler Website
Desktop Air Widget
Kuler Extension
Kuler - Creating, Sharing, and Using Color Themes!
Whether you are a design professional or a beginner, there will always be a situation, where it’s hard to find the right color theme for a project. This is where Kuler comes in. Kuler not only provides a huge number of color themes, it’s also build on an active community, which creates and publishes the color palettes we are talking about. Let's learn how to set up an Adobe ID, to log in to the Adobe Kuler website, to browse, save, create and publish your own color variations.
Setting up an Adobe ID account for access to Kuler
Well, you can use Kuler to experiment with colors and copy & paste the color values, but after signing in, you'll get access to download the Adobe Swatch Exchange files, which contain the color themes. It's always stressful setting up all these different accounts on different websites and keeping everything in mind, but Adobe did a good job on this one.
If you already have an Adobe ID, then you can easily login, using the Sign In button located at the top-right corner. You can also click on Register. Adobe will redirect you to their website and guide you through the registering process. After creating an account, come back to continue and login to Adobe Kuler.
Login
Go to the top-right-corner. Click on Sign In and insert your AdobeID and password, then click Go.
Register
Go to the top-right corner and click on Register. You'll be redirected to the Adobe.com website. Click on Create an Adobe account. Fill out the required information and come back to Kuler to Sign In the way described above.
Different Menus and Sections on kuler.adobe.com
Adobe Kuler is split into different sections. These sections allow you to add or retrieve certain information. Below you can see the single sections with short descriptions, accompanied by images.
Explore
- Menu
Explore color themes by either browsing or searching the Kuler database. You can sort listed themes by Newest, Most Popular, Highest Rated or other random options. By setting a time frame for your results, Kuler will only list themes, uploaded in that time span.
- Search
You can narrow down your search results by using the Search bar. You can search by tags, titles, creators or colors. To make it easier for everybody to find the themes you create, you should always choose proper tags.
Community
- Details
Color themes, found on Kuler, are submitted by the Community. By creating, saving and publishing your themes on Kuler you make them accessible to everybody. In this section other users can retrieve information about the creator, title, different tags and more.
- Comments
To give or get some feedback for your themes, add comments. Like on many other websites, you can read comments, but posting comments is only available after Log-In.
MyKuler
- MyKuler
The MyKuler section in this image is empty, that's because I've set up a new account, but after creating the first themes, you'll be able store, view, and retrieve all your saved and favorite themes here. You can save themes as favorites, while you are browsing through the database by clicking on the proper button in the details section. You can later import your saved themes to Photoshop.
Extras
- News and Features
This section lists information about the current products using or featuring Kuler.
Kuler - Features
Download a color theme as an Adobe Swatch Exchange file
After signing in, you can download the themes you like by clicking on the download Adobe Swatch Exchange file in the details section.
.ASE Files
This is how the downloaded files will look like. All Creative Suite 4 products support the exchange of colors via ASE files. For example, you can easily exchange single colors or themes you've created in Illustrator to a Photoshop project. In our case we want to import the files we've downloaded from Kuler.
Load Swatches
Go to your Swatches Panel, click on the little triangle in the top-right corner. Next Choose Load Swatches, then Select the proper File type and import it. That's it!
Post Comments
As mentioned above, being a member of the community not only gives you access to the color themes, but also provides commenting and rating which will later help Adobe organize the themes. To leave a comment, go to Add comment. Type in your text, then click submit.
Rate Themes
The five-star rating system shows you what the community thinks about the theme. High ranked themes will be listed and ordered when choosing Sort by Highest rated/Most Popular and will be featured on the home page.
Edit/Create Themes
So far, we've learned how to browse and download themes, but now we want to create our own color theme. Either click on the button you can see below to edit the current theme or click on Create in the menu to create a theme from scratch. Both will redirect you to the Create page. You can then choose between creating a theme from colors or an image.
Create theme from a Color
Create theme from an Image
Creating Your Own Theme
Kuler provides very efficient tools to quickly create new color themes. You can choose different harmony rules, use the interactive color wheel and different sliders for brightness and angle, extract colors from an image or simply input color values.
Base Color and Related Colors
Like the name says, you can choose a Base color and build the color theme around it. After setting the Base color, four other colors are available to choose. Harmony rules will apply to the base color and affect the colors around it. By dragging and dropping on the color wheel, you can adjust the base color. The other colors will then move simultaneously.
Color Rules
The color rules are based on color theory. If you are interested in the theory behind Kuler, check out the links provided below. After selecting the base color, select one of the following rules to quickly create harmonious themes. I think the best way to understand what any single rules does is to experiment with each of them. By selecting Custom, Kuler gives you the freedom to select colors individually.
Color Wheel
Move the markers on the interactive color wheel to choose the colors in your theme. Do this by either using a color rule or individually selecting colors. Below the color wheel is another Slider, which adjusts the brightness of the colors.
Color Values
If the color wheel is imprecise, you can additionally adjust the colors in your theme by inputting numeric values for the HSB, RGB, CMYK, LAB, or HEX color models. If you only want to change a single color, make sure Custom is selected, since entering a new value will adjust all the other colors in the theme. If you want to experiment with the theme, use the color sliders under each color swatch. For those of you who are not logged in, you can easily create themes and copy & paste the values to Photoshop or any other Software.
Color from an Image
A very neat feature of Kuler is the extraction tool which generates themes from an image. You can upload images from your desktop or use images from Flickr. Just as the harmony rules, Kuler provides different Moods: Colorful, Bright, Muted, Deep, Dark, and Custom. The moods you can choose from, will automatically generate appropriate colors. By moving the markers around, Kuler picks the color of the current position and displays it, below the image, in the color theme preview. Kuler supports TIFF, JPEG, GIF, PNG, and BMP image formats.
Saving and Publishing
Before saving your themes, you should always give it a proper title and tags to make it easier for other users to find. You can choose to save your themes in private mode to your MyKuler section or share them with other members, who can rate them and add comments. Tags and comments are displayed in the details section. Popular tags are displayed in a certain text size. The larger the size, the more popular the tag word. Creator's can set an avatar or personal color swatch as their default picture. Other members can click on avatars to view all the themes created by that member.
Using the Kuler Extension in Photoshop
Downloaded Adobe Swatch Exchange files can be used as color swatches in all Adobe CS4, CS3 and CS2 products. We'll take a look at Photoshop CS4.
Find and Open the Kuler Extension
With the new CS4 version, Adobe integrated Kuler right into Photoshop. You can find it by going to Window > Extensions > Kuler. The Kuler Panel will appear. In case you still don't know what Kuler is or how it works you can read the information, by clicking on the About tab. You can additionally read the Terms of Use and Privacy Policy if you are interested.
This extension provides access to Kuler via RSS feed's. The extension loads the themes directly from the online database. You can also log in to your Adobe account by clicking Window > Extensions > Connections, which will create a connection to Adobe services, while you are using Photoshop or any other Creative Suite 4 product.
Features: Browse and Create
Browse
The Browse tab reveals a list of currently uploaded and available color themes. To use this feature an Internet connection is required, since the extension uses a RSS Feed to read and list the color themes in Photoshop. You can browse, search and sort themes the way we did on the Kuler website. At the bottom of this section, you can see the arrows pointing up and down. These help you to view the previous or next sets of themes.
Create
The create tab reveals a smaller version of the Create Page on kuler.adobe.com. As you can see, these are the same functions like choosing a harmony rule, adjusting the single colors or brightness, setting the base and related colors and retrieving the values. At the bottom of this section there are additional buttons, which let you upload your theme directly to your account or download/save the current theme.
Swatch Panel
This is how the standard Swatch Panel looks like in Photoshop. You can open it via Window > Swatches. In a previous step we've learned how to import ASE files to our Swatch Panel. The extension makes it a lot easier for us. We can easily browse and directly add themes to our Swatch Panel though without downloading and importing ASE files from the Kuler website.
Directly Add Themes to Swatches
The button on the bottom-right-corner, adds the theme directly into your Swatches Panel. You can now select single colors as your Foreground or Background color and apply them to your project. You can reset or delete the colors by clicking on the little triangle in the top-left corner.
Using the Adobe Air Kuler Application
Download and Installation
So far, we've used the website and extension in Photoshop CS4, but as I mentioned before, there's a cool Air application which runs on your desktop. The only requirements for using it is having Adobe Air installed on your computer.
You can start the installation by double-clicking the Installer. The setup will guide you through the single steps. After you've successfully installed the widget, open it. You should see something similar to the widget in the following image. This Air application works exactly the same way the extension does, providing some extra features. Themes downloaded via the application will be directly added to your Swatch Panel.
Features
You can now browse, search, and save themes directly from your desktop. You can drag individual themes to your desktop, where you can scale them to any size you want, copy swatch values directly from the application or visit the selected theme at kuler.adobe.com to retrieve additional information or comments. I recommend playing with it to get to know the application. It's a really helpful tool to have on your desktop when working with any Adobe Product.
Additional information
Kuler Links
Other websites which provide color themes and palettes
Conclusion
I use Kuler to on my projects and take advantage of it's desktop features. Now that you know how Kuler works, search, save and use the themes you find on Kuler. Also, use them as an inspiration for creating your own and unique color themes. I often create themes which I later don't use. Instead of deleting them, go to Kuler and upload them. In case I’ve missed something, feel free to let me know in the comments so the other readers can learn it too.
Subscribe to the Psd.tuts+ RSS Feed for the best Photoshop tuts and articles on the web.
Related Posts
Keep reading with more great tutorials and articles!
Enjoy this Post?
We'd love your vote!
Plus Members
Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.
User Comments
( ADD YOURS )loswl March 10th
Extremely powerful tool Adobe has created!!…I love the new features they have added, especially their automatic color picker from photos
) Thanks showing us all the features.
( )Lawrence77 March 10th
yeah! most powerful tool!
( )jonny March 10th
I LOVE kuler… one of the best applications out there
( )Ben Debnam March 10th
Agree with @loswl – Adobe have created a very powerful tool and I love using it! Thanks for writing this article there were a couple of things I had missed!
Thank you!
( )Dullface March 10th
Excellent tutorial of an excellent tool. Thank you very much for this one!
( )T. March 10th
Why don’t they just make a program where you have to type whatever you want to create, and then the program creates it!
this kills creativity
( )loswl March 10th
Still requires a knowledge of design and some talent to be creative, but it is great to have some good tools
) no?
( )Kajik March 10th
That’s right. It’s important not to copy the styles from Kuler. Use the themes as an inspiration for creating your own and unique color themes.
Vilen March 10th
It allows for a better decision making. Only promotes creative exploration.
( )Jarod Taylor March 10th
It doesn’t “kill creativity”. It just makes it easier for color inspiration. Very useful for people (like myself) who tend to design very monochromatically due to finding color to be challenging at times. I absolutely love Kuler.
( )TheDoc March 10th
I disagree. I’ve found I’ve been given inspiration simply by checking out some of the swatches. It’s a great service. If looking at colors kills creativity, I can’t imagine what type of work flow you have.
( )zakkap March 10th
What a dumb comment.
( )Saro March 11th
Why is a point of view dumb, even though i don’t agree with him. In my eye’s it’s evolution.
writersbloc March 10th
Wow. I had no idea! Wonderfully useful tool. Thank you so much for this walk-through.
( )Diego SA March 10th
I’ve already seen this Kuler, but not like you have done here Kajik.
( )Excellent work. Well, I’ll have to explore the Kuler further. Thanks!
ahmicro March 10th
what a wonderful color tool thank you so much and thanks to adobe
( )RUGRLN March 10th
I like to use it but its so darn slow in loading…gets annoying at times!
( )Lawrence77 March 10th
Rugrln is back with the new gravator??
( )Dainis Graveris March 10th
Wow, very useful article – I didn’t know either how to use Kuler so efficient – thank You!
Really digging this one!
( )Ryan March 10th
Good Post on how to use the tool.
I get somewhat confused behind colour theory (not my background, but trying to learn). I find i get really confused on how to pick colour schemes.
Are there golden rules to follow when picking colour schemes. I find many of the more attractive one’s i find on Kuler are custom.
I guess I understand the colour concepts, but not exactly sure about how I take those concepts and apply them to creating a palette.
( )Marshall March 11th
There isn’t really a ‘golden rule’ to color theory, but there are practices that one can go off of. I’ve always felt that color evokes mood and should be taken into consideration for a design. With that, start with one or two dominant colors and then work out your options from there (ie, complimentary, split complimentary, tertiary, monochromatic, etc). Color Harmony 2 is a great resource for finding color schemes to fit one’s designs.
( )Martin March 10th
what’s wrong with good old colorblender.com ?
( )Dullface March 10th
Kuler has the Adobe stamp, and looks quite fancy.
( )Drumline18 March 11th
Can you have it directly into photoshop, or a program that you can start up?
I dont think so…
Plus, like Dullface said, this is Adobe… lol
( )Wuiqed March 10th
By god, I love Kuler but had no idea that there’s a PS extension. Thanks for enlightening me!
( )Jarod Taylor March 10th
I’ve been using color for some time now. I didn’t know they added the extension to CS4 though. That’s awesome. Thanks!
( )MK Owens March 10th
So . . . what you’re saying is that Kuler is Colourlovers.com that can import directly into Photoshop.
Still not worth the CS4 upgrade. I really wish the Adobe would either reduce the upgrade cost or stop releasing a new CS every year or two. I can’t justify going from CS3 to CS4 (just like I couldn’t justify going from CS to CS2).
The tutorial on the tool is quite nice, though.
( )jm March 11th
“So . . . what you’re saying is that Kuler is Colourlovers.com that can import directly into Photoshop.”
Hahaha, QFT.
I prefer colourlovers myself, but I guess importing directly into PS could be handy..
( )Razster March 10th
Seems pretty interesting, though I don’t think I will be using it as much as I already use http://www.colourlovers.com/
( )But it does look rather interesting
Leland Clemmons March 10th
Glad this got featured. I lurve Kuler – I use it in almost all of my web design projects.
( )ProjectCenter March 10th
Oh man! I had no idea that Kuler could do this. Thanks!
( )Kevin March 10th
Thanks for turning me onto this powerful tool, very cool!
( )Renzo March 10th
yes, I have been using colourlovers.com for a long time, but kuler integration with cs4 is really a good point.
( )Mr. Dies March 11th
Very enlightening. Thanks for the resource. It’s officially been added to my repertoire
( )Jamie Allsop March 11th
This is a very good tool to use and has come in handy a couple of times when I have found it difficult to choose a colour scheme for a design. I have not used it lately as I had forgotten about it, but this tutorial has reminded me of it and I am going to start using it again and also give those other websites ago that you have suggested.
( )Lolka March 11th
I have an important question
What kind of colour wheel does kuler use? It definitely differs from standard ones like in this website: http://color-wheel-pro.com/color-wheel-types.html
Can somebody explain it, please?
When you take in HSV mode H=0 it is red okay but when you place H=180 (half the value) it is cyan okay BUT cyan is not placed opposite the red and it lies several degrees lower!
On the Kuler support forum no one answers….
((
( )Kajik March 11th
Hi Lolka,
Interesting question which I honestly can’t answer. Please take a look at the Additional Information section above, where you can find links to the Kuler Help, Kuler Forum and Kuler Developer Resources. They should be able to answer your questions about the color wheel. Sry.
Bye
( )Lolka March 12th
Thanks for the reply
It is really important because all the color composition are strongly affected. Complementary colors are no longer complementary!
Loveleen March 11th
I didnt know that kuler could do so much…
( )thanks for sharing the info…
geir b nystad March 11th
so this is only for CS4? i have CS3, it is a Kuler for it?
( )Kajik March 11th
Hi geir b nystad,
The Kuler Extension is CS4 only. You can browse, create and save color themes using the Kuler website: kuler.adobe.com or the Kuler Desktop Air Application. You should be able to use .ASE files in CS3.
Bye
( )Weer Vergelijker March 12th
Wow great tips here. Thanks man!
( )Roberto Blake March 12th
Kuler is a great tool for your Photoshop and Illustrator work flows. However I honestly prefer http://www.colourlovers.com/ I also like that I can copy and paste the image directly onto a layer in Photoshop and use the eyedropper tool to color sample as needed.
( )ec March 12th
aviary.com has a tool for color swatches – very nice tool
( )Bibleluv March 14th
Kuler..WOW!!..I love kuler!!..must go check it out now!!
( )THC1138 March 15th
Or just use colourlover.com. Its a much more efficient site and exports swatch libraries to PS, AI, and more. Also it is not Flash 10 dependent.
( )SOS Media Web Design March 16th
I knew a bit about Kuler, but this was a great, detailed description of all the aspects of it. Thanks for putting in the time for us.
( )Skywolfer March 16th
Excellent tool！ I love it！
( )Adrian Rodriguez March 18th
Thanks for the tips. Sometimes I have a very hard time finding some color themes for my projects. This will be a great help. I think I have strayed too far from design and have lost my head when it comes to color. Thanks again for the help. I have CS4 and didn’t even know I had the Kuler extension.
( )cagwait March 20th
Thanks for posting this, and showing the features kuler has for working with colours
( )daspaint March 31st
Excellent
( )TwenStudio April 3rd
Wow Work Amazing
( )wallpapers April 25th
excellent piece – very comprehensive. colour themes arew certainly something i need help with
( )photo retouching May 7th
A really useful resource which can really speed up your workflow!
( )Jack May 10th
Great resource about Kuler. I didn’t have an idea about the power of Kuler. Thanks
( )Imran May 11th
Thanks for the tips dude ..
( )Margaret June 4th
I’m sad you did not explain the “Pulse” feature, that thing just confuses me, I love the rest of Kuler, perfect for what I do (designing POP display graphics) Helps picking colours that don’t clash with the product THAT much easier!
( )James Ballard July 14th
Sweet! Have seen it around and always wanted to look into it. This post motivated me to sign up and it now magically resides in my CS4 apps.
Thank you PSD Tuts!
( )Andrew August 19th
You could also use ColorSchemer Studio, does the same thing but offline. Have a look!
( )Linda Walton aka bobbysgirlforever August 22nd
Adobe Kuler is MY favorite color design tool! You have covered it extensively and I’ve learned a few new things that I can do with PSCS 4 – thank you!
( )