Zip’s ready to do some design. Choosing website colors can be a difficult decision (at least it is for me.) While you can just go ahead and use whatever color you want, intentionally choosing some colors can give your website a more consistent appearance and will be part of your website’s “brand.”
My advice: put some thought into choosing a color scheme, do a few quick demos to see what works, but then stick with it. If you genuinely think something isn’t working, you can eventually run an A/B test, but if you keep tweaking things, it will take your precious time up that you could be spending on writing, promoting, or…living.
If you’re genuinely not sure what colors you want, go web surfing. Look at some different websites and see how you feel about them. Think about what the colors say about the site. Natural? Fun? Nostalgic? Classy?
If you already have a business with brand colors, the decision’s easier: use those.
And when you do choose a color palette for your website, find a way to keep those colors in a handly place as you’ll be referring to them often. I find Canva’s “Brand Kit” feature is handy for keeping track of website color palettes.
But Zip doesn’t have a color scheme. What he has right now is a collection of sloth-in-space images that I put together in Canva.
At the moment, the front page of Slothverse.com looks like this:
I ask him, “Should we not do something that represents the natural habitat of the sloth? Something more…green, perhaps?” I remind him that, whatever his fantasies may be, sloths don’t live in space.
Zip initially says, “Leave it as-is. Get some rest. Take a nap.” But then, seeing my concern, he goes to ask his friends for their opinion. Should you ask your friends? It depends on your friends. Are your friends designers? Do they know what works any better than you do?
Still, let’s see what Zip’s friends have to say (and look at some color palettes in the process, trying each on for size, along with some corresponding header images.)
Zen Zebu: Clean and Minimalist
Zip asks Zeb for his opinion. He recommends a minimalist design with few distractions on the page. “It should be all about your writing,” he says.
Zip tries out a black and white design with just a hint of green but finds it too basic for his liking.
Sally Sloth: Pretty Feminine Pastels
Sally Sloth advises Zip that soft, pastel colors are comforting, inviting, and “in.” She says that he needs to get in touch with his feminine side.
Zip’s not sure about that, but decides to give her palette and test run. It’s a possibility, though he thinks it might be better to use this scheme for either a crafty or baby blog.
Type-A Tyrannosaur: Loud, Bold Colors that Grab
Type A T-Rex tells Zip, “You need to use colors that SCREAM FOR ATTENTION. If you want them to stay on your website, you must GRAB THEM BY THE…center of attention.”
Zip’s not sure these colors do it. He could see them working on some websites, possibly with a black background and pops of color, but not what he wants for his website.
Still, he decides to give it a try.
Practical Possum: An Earthy Green Palette Fit for a Tree-Dweller
Zip asks Practical Possum for her opinion. She points out that, while sloths are, indeed, part of the universe, they live in tropical forests, not outer space.
She suggests this palette in shades of green. Still, that doesn’t stop Zip from adding some (green) planets into the mix. She suggests he change them to plants, instead.
Retro Racoon: A Flat, Bold, Color Palette
Retro Racoon advises Zip to consider a bold, flat color palette. Hmmm. It doesn’t really say “sloth,” but I LOVE flat colors like this.
It’s one to consider.
Realistic Rabbit: “How About Some Real Sloths?
Realistic Rabbit advises Zip to simply choose the one primary and the one secondary color that his theme allows and then fill in any image areas with real sloths. None of those so-called “vector graphic” thingies. No cute sloth holding rainbows or floating in space! “Get real,” she says. It’s about sloths and sloths don’t ride scooters. Zip’s not sure about that. He terribly misses the Vespa I used to own.
Zip finds that he likes the banner with a real sloth — but the photo background is too busy and the hero block seems a bit too much — he could change that later, though. His other colors are a simple dark green and black (though it looks like he left the grey footer here.
But Zip finds that what he likes most is the retro colors. He tries them with the real sloth header at the top and it just doesn’t work. He’ll have other places to put sloth photos on his website, anyway.
And only part of his website is about real sloths. He might also post book reviews, sloth art and crafts…
So he decides to go to work.
Adding Your Website Colors in the Customizer
As I mentioned in a previous post, your customizer will have different features depending on your theme. However, most will have color settings there. Go through it and find all of the areas that affect color and change them to the colors you choose.
Zip’s Hueman theme has settings for a primary color that will show as an accent as well as the link color, and a secondary color. He can also choose colors for the tops of his sidebars, his footer, the top bar of his header, and the background of his website. He can also choose a background image, but I’d recommend he be careful with that and choose something subtle if he uses an image there.
If your theme allows you to use a header image, find what the dimensions of that image needs to be — most will allow you to crop when you upload it, but it works better to create an image of the correct dimensions for your theme.
The good news is that you can change colors that aren’t set in the customizer by using custom CSS. We’ll get into that as we go.
But What About Web-Safe Colors?
I still see some checkboxes for web-safe colors in graphics programs I use. Old monitors could only show so many colors, so years ago, you wanted to make sure that the colors you chose could be shown on any screen. Not so with the new computers of today. If you’re concerned, you can look at your website on older devices and see how it shows, but most visitors will not be looking at your website on obsolete computers.
What about accessibility?
If you’re going through the customizer and you see a choice of font colors, what do you choose? For some themes, the default is a light grey. If you are concerned about serving an older adult population (or anyone with visual deficits) you want to consider contrast, at least in your fonts. I prefer black for the font color.
I know an older gentleman that uses a screen reader. Having the text black helps considerably when he enlarges it.
On one of my websites I underlined links with yellow on hover, but realized that my yellow accent color had accidentlally colored some links yellow. Even I can’t see that very well!
A few good links to color palettes
I love posts with color palettes! Eventually I may make a few more on this blog. But here are a few posts that might inspire you when you’re choosing colors for your website:
- Visme: 50 Gorgeous Color Schemes From Award-Winning Websites
- Canva’s Website Color Schemes
- Hook Agency’s Website Color Schemes and Hex Codes
- GraphicMama’s Website Color Schemes
We are sorry that you found this post to be like a weak cup of decaf.
Let us improve this post!
Tell us how we can improve this post?