Choosing a Color Scheme
This page goes over various color schemes, and which one you might want to choose.
What are color schemes?
According to Jason Beaird and Alex Walker in The Principles of Beautiful Web Design, there are three main color schemes to choose from: monochromatic, dichromatic, and trichromatic. For minimalist web designs, monochromatic is my go to pick, but I'll try to explain all three as best as I can.
- Implementing a monochromatic color scheme would essentially mean picking as single color, and just using all the tints, shades, and tones of that one color for all your website coloring needs.
- A dichromatic or a complementary color scheme would involve picking two opposite or complimenting colors to use; you're also open to use any of the corresponding shades, tints, and tones.
- As you've probably guessed by now, a trichromatic color scheme involves picking three colors of equal distance on the color wheel. You can click here to learn more about this color scheme.
So which color scheme should you choose? Well if you've already made up your mind, then go for whatever you've decided! I enjoy web design for this very reason, which is simply exploring and trying to make your project look amazing.
If you're not sure, here is my advice...
Simply put, go for a monochromatic color scheme. Remember what I said about trying to get users to feel the minimalism in the web design? In my opinion, using a monochromatic color scheme is already an excellent start on that journey of achieving that goal. We want a color scheme that literally is minimalist.
Now you might be asking, if one goes with a monochromatic color scheme, which color should they choose, and what shades, tints, and tones should they utilize? This is where you should take over, and start exploring on your own. For me, since my website like this one, which involves documentation, and Bluebird Teaching, which involves education, I liked to go with something calming, and relaxing for users' eyes. I thought starting with some shade of blue was perfect for this goal. While this may sound cheesy, I thought that since I'm working with education and documentation, something that should be available to anyone in the world, I thought to use UN blue (#5B92E5) as the base color. From there, I have all the shades and tints at my disposal.
Below is an example page from Bluebird Teaching.
Unlike this very website, you might notice that the shades don't contrast as much as they do here. On this very page, the background of the document portion of the page is white, and the background of the sidebar is a much darker shade of the UN blue (#090e16).
In the page pictured above, the header is #1b2b44; while the background color of the actual page content is #dee9f9. While the choice of shades/tints are a lot less contrasting than in this website, it's still necessary to have quite a bit of contrast, or else your font colors and background colors will start to look too similar. Keep experimenting will shades and tints to get the ultimate pallet. The result is hopefully something that is very aesthetically pleasing and easy on the eyes.
More Guidance on Color Choice
Different colors carry different meaning and feels. You can go on forever talking about what each color could imply for users.
Again, since my websites involve education and documentation, I wanted something especially easy on the eyes; as users might be looking at these pages for a while. This is ultimately why I chose blue. I just felt like blue was naturally calming and friendly. Now that sounds a lot weirder after I've typed it.
However, if my website was something like an online store; maybe something where user action is required, then I might pick a red base color. I still would go with monochromatic, but red to me just seems a lot more vibrant, and a tad bit more energizing than blue.
Overall, color choice can be hard to decide. Start with a color you feel is good for your purpose. After that, you can start getting feedback from others on how that color fits into your website's purpose.
Part of: Minimalist Web Design