design basics: color theory
Grayscale • Monochromatic
1. Learn current color trends from popular blogging websites.
2. Determine what colors will be best for your own websites.
a study of color
Skill Space performed our own study looking at 70 of the top blogging websites according to Bloglovin’ and Google.
The Nielson Normal group study referenced to the left looked at websites regardless of a blog element; we looked at websites whose primary focus was a blog.
We looked at all categories: lifestyle, business, design, parenting, DIY, home, food, etc. Our sole requirements were that the blog was run by one person or persons in which their main income was blogging. All of the bloggers have either a high following on Bloglovin’ (most of them had more than 100,000 followers) or reported at least 5 digit incomes per quarter. Though 46 of these blogs were run by females, the majority of the higher income-generating blogs were run by either men (13 blogs) or multiple collaborators (most often in the form of an in-house publishing team).
The two most common color schemes used is grayscale or monochromatic.
Grayscale is when the colors used are combinations of whites, grays, and black — with the exception of in-post pictures and graphics. Grayscale is used in 31.4% of the blogs.
Monochromatic is the use of one primary color and utilizing all the shades and uses in that range. 33 blogs, or roughly 47%, chose a monochromatic color scheme using a single accent color (red, blue, yellow, etc plus a variation of grayscale).
14 blogs, or 20%, used two or more accent colors in addition to whites, grays, or black.
18 blogs total used some variation of blue as an accent color. 17 blogs used pink as an accent color, 13 used green, 12 used yellow, 11 used red, 2 blogs used purple, and 2 blogs used orange.
Your Color Scheme
As we stated in our own study of 70 blogs, monochromatic or grayscale is used as the only color scheme in 80% of the blogs.
What message and feeling do you want to evoke when a reader visits your website?
White space also plays into this: the more or less white space you have will stimulate different emotions (refer to Design Basics, Part 1's section on white space).
Most people usually do two things when choosing an accent color: pick their favorite color and then compare it with color psychology to determine what feeling or emotion they want to convey with their website.
If you are stuck deciding complementary colors palettes, here are few websites to help:
case study: skill space
Skill Space strives to be an all-in-one hub for creatives, blogs, and small businesses offering many tools to help our visitors grow. We offer both paid and free resources, have a blog, have a forum, send out newsletters, are on social media, and list services of people so they can make connections.
With that said, we wanted to choose a gender-neutral color to appeal to both males and females. We also used color psychology to determine that green is associated with terms we wanted our brand to be associated with: growth, trust, prosperity, good judgment, money or wealth. Green tends to create a feel-good positive user experience. Sound like green was a good color choice? We thought so!
Having a moderate to maximum amount of white space with white backgrounds, we are trying to use white to convey clean, simplicity, ease-of-use.
Having gray as a second accent color simply was because we though green and black would be too harsh together and we wanted a softer secondary accent color when paired with green.