What does the color green bring to your mind?
I think of the word “green” and begin to picture driving up to Yosemite with my dad and brother when I was on the verge of becoming a teenager. There was a miles-long stretch of road bordered on both sides by an incredible expanse of shimmering green grass as far as I could see.
Every time I think of the green grass on that trip I’m filled with a warm feeling of pleasant happiness in my chest.
What do you think of when you imagine the color red?
I think of a trip I took to the beach in the middle of 2017. It was a classic Southern California summer day. Despite the pleasant water, the sun beat down on my body. I missed some spots when applying sunscreen and ended up with a sunburn around the bottom of my shins that discolored my skin for several months.
“Red” makes me imagine burning, intensity, and ferocity.
When you picture purple what fills your head?
I’m imagining a rainy weekend afternoon. The sky is filled with sticky clouds of different gray shades, all of them dropping heavy rain. I’ve turned on a familiar Netflix show, crawled under my thick blanket, and am warming my hands on a cup of herbal tea.
A feeling of luxury and comfort builds in my mind when I think of the word “purple.”
How can you use color?
Color is evocative. It inspires immediate activity in our minds. Seeing purple can make us think of pleasure. Red can remind you about the fiery emotions you felt at work last week. Blue can ease your stress and bring a smile to your face.
It’s clear that mood is closely tied to color.
Knowing how a person can be affected by certain colors allows designers to tailor their work to evoke specific emotions from their audience. Using color to your advantage is a major pillar of any kind of creation. Ignoring its power is a good way to create a mess.
(I wrote about affecting emotion with the use of color in my two part “Understanding Color” series. If you haven’t seen them yet, then read part one and part two.)
But how do you use color in a specific, intentional way? Where do you start if you want to use certain colors in your websites (or other work) and make your visitors feel a particular way about what they’re looking at?
A color palette, that’s how.
A color palette is a collection of colors chosen to be used in a work of design and grouped together for inspiration and reference.
It should also be one of the first things you create when you start in on a new website.
I understand the desire to get working on actually creating a website without having to do a bunch of extra work that doesn’t quite feel like you’re building anything. Why spend a bunch of time sticking different shades of color together when you could be watching a whole website take shape?
I promise that the extra work you do before creating a website is going to make the website building process a hell of a lot easier. Instead of screeching to a halt in the middle of a build to figure out what color your header text should be, spend a little time at the beginning figuring all that stuff out.
It'll save you a lot of time.
Making your own palette
Creating one is easier than it may seem. It takes a little bit of thought, but once you get going with one, you just need to trust your finely tuned artistic eye.
Let’s say we’re creating a website for a company that’s about ready to unveil their new hot sauce brand, JalapeYES. The company wants to get the message out that their new sauce is going to set mouths ablaze around the world.
Ablaze... Fire... Hot... Red!
Jalapeños are also green in color, so throwing some in green amongst the red would be a nice way to add some contrast to the site.
Red and green then, eh? Sounds like a spicy combination.
There’s a site I love going to when starting in on new color palettes. Colormind.io is a tool that makes creating and visualizing a pleasing color palette suitable for websites incredibly simple.
I’m going to start with a good red as the main color, add in some green, and see what Colormind comes up with.
Quickly choosing a few colors can result in a randomly generated palette that not only looks good on a website, but also helps get a message across. If I saw those colors on a hot sauce website, it wouldn’t take me any time at all to know that the sauce is going to have a kick.
I’ve now got my hot sauce color palette. It’s one step that I won’t have to try and puzzle over later when I’d much rather be kicking butt building a great looking website.
Again, understand what the product or service you’re building the website for is all about. Choose a main color that represents it well. Pick a nice contrasting color for some visual variety. Pick varying shades of those colors that will complement your main colors.
Consider also that not all color palettes need to have “color.” Try experimenting with black and white or various shades of gray to create a stunning monochrome look. Sometimes the most effective solution isn’t the most flashy.
Creating anything shouldn’t be a mindless act. There’s emotion in everything. Ignoring that fact will only create problems for you in the future. Make sure you don’t just know how to create something, know why.
I'm including some free Affinity Designer and Photoshop templates that you can use to present your future color palettes in a beautiful way. You can get yours by using the form just below. There’s no reason why simple colors can’t also look good together.
Feel free to download and use them to your heart’s content. I hope they help with visualizing how a website can eventually look. Maybe even use them to present to clients or included in a retrospective blog post after you’ve finished creating your latest stellar website.
Work in Technicolor, cats.