0,00 USD

No products in the cart.

Monday, April 12, 2021

Sloth Gets Colorful (Choosing Colors for Your Website)

Zip has chosen a theme and created a child theme. Time to start designing! First up? Choosing a color palette for his website.

Home » Historic Recipes » Sloth Gets Colorful (Choosing Colors for Your Website)
0
(0)

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:

old slothverse homepage choosing website colors

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

Clean and minimalist palette
choosing website colors
zen zebu

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.

Slothverse homepage with minimalist colors

Sally Sloth: Pretty Feminine Pastels

Pastel color scheme choosing website colors
sloth on a rainbow

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.

Slothverse homepage with pastel colors

Type-A Tyrannosaur: Loud, Bold Colors that Grab

Loud bold neon color palette choosing website colors
screaming dinosaur

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.

Slothverse header with neon colors

Ummm…no. Just…no.

Practical Possum: An Earthy Green Palette Fit for a Tree-Dweller

Green flat color palette choosing website colors
practical possum reading a book

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.

Slothverse homepage with green tones

Retro Racoon: A Flat, Bold, Color Palette

Bright retro color palette choosing website colors
racoon

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.

bright retro color palette choosing website colors

Realistic Rabbit: “How About Some Real Sloths?

pink rabbit with glasses

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.

Slothverse homepage with real sloth photos

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!

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:

How many hot cups of coffee does this post or page deserve?

Click on an icon to rate it.

Average rating: 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

As you found this post useful...

Care to share?

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?

Coffee Image for Email Subscribe
Get Caffeinated!

OK, we can't send you caffeine--or even coffee-- but we can send you new content. Subscribe to our email list and get new posts delivered to your inbox. If you don't specify preferences, you'll be signed up for a weekly digest of new posts in all categories, as well as occasional promotional emails and surveys. However, if you would like to customize the frequency and type of content you receive, you can sign up here.

Cheryl
Cherylhttps://www.caffeinejournal.com
Cheryl is a former Occupational Therapist and WordPress enthusiast who became a writer in some parallel universe and occasionally, but infrequently, publishes things in this one. She writes two blogs (or is it three) which she won't quit because she knows that blogs, in her case, are like a hydra and if she cuts one off two more will take its place. When she's not doing that, she enjoys hiking, cycling, kayaking (formerly fast, now ebike), messing around with Adobe illustrator, making assorted things, meditating (though she wouldn't call that "like," and reading. She normally doesn't speak about herself in the third person, but she sometimes uses "we" in the royal sense while writing this blog. She lives in Poulsbo, WA with her spouse, her youngest adult daughter, a very old mutt, and a Siamese cat.
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

You may also be interested in:

Recently Popular

Share this
Send this to a friend