Color Picking Logo

カラーサプライ

デザイナーとイラストレーターのためのカラーピッカー

COPY THE HEX CODE

Use the color wheel to select what you like, then copy the html color codes.

Kyle Miller
Kyle Miller
#ed5740
#a6d7df
Steve Scott
Steve Scott
#f8d14c
#2c9fd1
Mei Tan
Mei Tan
#3d9cdf
#cd6136

COOL COLORS FROM THE PROS

Each selected artist is great at picking colors that work well together. Here are some featured artists:

HOW TO PICK COLORS

Use the color app as a starting point, then push yourself further.

Color is an underrated design tool. When you select the right palette, it can make a website sing. When I was a beginner, I often used too many colors in my designs. My choices weren’t based on much - either trends at the time or whatever mood I was in. Eventually, I would fumble my way to create something nice, but it often took a while.

There’s a better way!

There are three ideas you can use that will make it easier to pick colors. They are: The concept of the site, the brand, and your personal preferences. If you can figure out these three things, choosing colors will be much easier. Let's explore each of them.

The Concept

Does your site have a concept? It probably should. Here are some handpicked examples of sites with concepts: Preserve, Legwork, Si Le Soleil. Look at each example and try to figure out what the concept is (hint: answers at the bottom).

Having a concept can greatly narrow down your color options. If your concept is water-related, using lots of red probably won’t work well. Water & the color red live in different worlds.

Your colors should support your concept. Or at the very least, not conflict.

The Brand

Let's say you’re doing a site for the Vietnam Veteran’s Memorial in Washington DC. That’s a very serious subject matter. The tone (or brand) of any war memorial is respectful and serious, so your color choices should be as well. Bright and happy colors would feel out of place, in the same way that someone selling balloons near the memorial would feel tacky. Blacks, whites, dark, and muted colors would be a better fit for a war memorial site, these colors would be "on brand".

Or maybe you're doing a site for a big company. In that case, they'll have a well-defined brand which will make picking colors easier. If you’re doing a site for Target, you would likely use a combination of red and white, because red is a large part of their brand. Or a site for Ikea would use their signature blue and yellow. There are some instances when the site experience you're creating will be so far removed from the brand that you can use other unrelated colors. But before doing this, make sure you clear it with your creative director or the client.

Doing a site for a small client? In this case, the brand won’t be well defined in a style guide. For small businesses, it’s much more important to find out what the owners like. Get examples of websites they admire and ask what they like about them.

Your instinct will be to push for colors you really like, but small businesses the owners live and breath the business so it’s just going to be a matter of what they like.

Your Tastes

This is the last step. If you’ve chosen a concept and know what the brand represents, now it's time to figure out what you like and measure it against your concept and the brand. You want things you like that ALSO work with your website's concept and brand. I like to find inspiration from sites like Mind Sparkle Mag. Or sometimes I'll use the random color generator. Say your concept is “handmade" like in the Preserve example above. What are some other sites that embody handmade? What colors do they use? Do they use a complimentary color scheme? Analogous? My guess is many of them will use a red aesthetic with warm colors because the concept of "handmade" is a very human notion.