I’ve found a slew of new color tools, thanks to 99designs’ morning tweet about this awesome and very thorough blog post on Different Methods for Choosing Color Schemes in Web Design! In it, web design agency Vandelay Design introduces a great selection of tools and articles to help web designers generate color palettes for their design projects. The post highlights, among other things, online tools for:

• Researching color palettes made by other users or generated by you (I used a bunch of these during my wedding planning daze)
• Generating color schemes from photographs
• (I love the name of and the tool ColorSuckr — check out how it sucked the colors right out of my kisslock change purse!)
  
• Finding color schemes from other websites

The last category is where I found my favorite tool of them all, a simple but useful tool called I Like Your Colors. After last month’s Adora-inspired post on finding color names, I figured this would be a fun way to ring in October’s set of posts.

I’ve already used I Like Your Colors to customize the color palette of my new Artfire shop (er, studio). Artfire allows you to choose from an assortment of preset color schemes or customize your own. There’s not much you can customize, but it’s enough to give me some tie-in between my blog and my Artfire shop. And now for my amusement, I shall demonstrate how.

1) Type in the web address of the site whose color scheme you’re interested in.
Go to I Like Your Colors, scroll to the bottom of the page and type in the URL in question. Click Get colors.

Search field from I Like Your Colors tool

2) Marvel at the display of hex values in use on your site.
I Like Your Colors picks up colors from my website header image as well as from my WordPress theme.

I Like Your Colors search results

I Like Your Colors search results (from WordPress theme)

3) Hop on over to your Artfire studio and customize your colors!
In the Edit My Studio section, choose (1) Colors & Themes. Click on the (2) Custom radio button. Select a (3) color for the top navigation bar. Then, set your colors for (4) Primary Font — see below for details on how to do this, (5) Dark Background and (6) Soft Background. Click (7) the Save Theme! button when you’re done.

Artfire's Colors & Themes page

How to set the hex value for your colors (numbers 4-6 in the image above).
Click on (1) a square to set colors for the primary font and backgrounds. A large color palette will pop up on your screen. It’s not immediately obvious that you can manually enter a hex value here, but you simply scroll down to the bottom of the color palette, highlight any hex value that’s already in the (2) text field and replace it with your desired hex value (you don’t need to type “#” first, but you can). Hit Enter or Return on your keyboard, and your color is set! Note that if you roll your mouse over any of the colors in the color palette, the field will automatically populate with that color. So keep your mouse out of the way.

Color palette

4) Click on My Studio in the left nav, and check your work!

NOTE: I use a backdrop image for my studio banner so you don’t see as much of the color customization as you would if you used a regular sized banner, but I like the backdrop image option a lot better because it gives you more control of the top of the page’s design.

Similar Posts:

• Name that color!

Popularity: 1% [?]