Bringing colors together and forming a bigger picture is one of the tasks I love most about designing websites.
It’s a process where I often digress in the beauty of choice and creation. The result of this process is a color palette which rules the appearance of each element on the targeted website.
To recap the initial website creation process:
- Define your website’s color palette
- Define your website’s fonts
- Define your website’s layout
- Define your website’s user flow
- Define your website’s elements
- Define your website’s animation flow
If you are just about to create your first website I highly recommend reading my beginners guide so you know the pro tricks right from the start.
Sometimes one or two colors may be already defined before you even start to create your color palette. A typical case is when your client already has a logo ready. You will then want to use colors that match the ones used in the logo.
How to use color schemes
A rule of dumb is to use the most prominent color as action color for your buttons, call to actions, important links and more. Use the second most prominent color for your less important call to actions or even as accent color on your backgrounds. The other more subtle colors are used to fill your background sections.
However if you are striving for a minimalist design you can just pick one to three colors of a palette and skip the rest.
You will also notice the difference in color saturation on some palettes and how we relate different colors and saturation to different themes in our mind.
A couple of things to recap before you start:
- Colors appear differently depended on which colors are around them
- Colors appear differently depended on which monitor you use (and the settings of your monitor)
- Colors appear differently depended on which form they are used (e.g. a color appears differently on small button than on a big background area)