Finding the Perfect Fit : Color Matching Using Adobe Kuler

I know that sometimes it can be hard finding the right color scheme for your website, but with Adobe Kuler it can be super easy.

Tutorial for making your own color scheme!

Step 1: Go to

Now that you are here you can see that there are thousands of themes made by other people. If you would like to go that route, this is a quick way to get a cool group of colors. However, it is more fun making your own!

Step 2: Click create and it should bring you to this screen.


Step 3  Pick your base color !

For me I’m going to pick a nice shade of blue, by toggling with the color wheel.


Step 4  Decide how you want to use your colors.

One the side in the left hand corner you will see a menu labeled select a rule. Since we want to color match we are going to select Complementary.


After clicking complementary you will see all the shades that compliment your base color.


Step 5: Find your code

Now that you know what color will blend well for your website, find the code and paste it into your  CSS style sheet. The code will in a box labelled “Hex” and don’t forget when you put it in you CSS to add the # sign. So your code will look something like this. #text { font-color: #123AFF;}


Now you are all done! Don’t be afraid to fool around and see other ways to combine colors.

Nikki Abban

~ by catchmeonfifth on February 10, 2013.

%d bloggers like this: