Colors can soothe, energize, uplift or attract the user. They can convey style, glamor or excitement.
Sir Isaac Newton developed the first circular diagram of colors in 1666. Since then, scientists and artists have developed many variations of this very useful tool – the color wheel of 12 colors. The web uses an RGB (red, green, blue) color model which is an additive color model because the web is a medium that lights up, rather than an RYB – red, yellow, blue (artistic) color model which is a subtractive color model. The three secondary colors are made by mixing the three primary colors. Mixing the primary and secondary colors gives us six more tertiary colors. Besides the basic color wheel, digital tools like Adobe Kuler, Colors on the Web, and ColoRotate among others can help you explore hundreds of themes.
Hue is the technical term for what we call color. Saturation is the intensity of a color – when you desaturate a color it comes closer to grey. Colors with lower saturation are more muted and dreamy – those with higher saturation are more playful and high-energy in feeling. Brightness is how close a color comes to white.
On the web, colors are expressed in their hexadecimal or hex values. Web-safe colors are the standard on the web today and ensure that colors look the same on all monitors, browsers and computer systems.
Adding white to a color gives you a tint of that color. Adding black to a color gives you a shade of that color. Adding grey to that color gives you a tone.
Color harmony delivers visual interest and a sense of order. It is a balance between the blandness of under-stimulation and the visual overwhelm that results from overdoing it with too much contrast and jarring colors. Harmony is a dynamic equilibrium.
Color palettes (combinations of colors) develop from color harmonies. Understanding how to use them effectively will go a great way to enhancing your website design. Here are some of the popular color palettes traditionally used in design:
Monochromatic colors are all the colors (tints, tones, and shades) of a single hue. Although this color palette looks balanced and visually appealing, it may lack contrast. This can be achieved by using tints and shades of the color to enhance the theme. Shades of a single color convey a psychological or emotional message, while the accent color draws attention to important page elements.
Analogous palettes use colors that are close to each other on the color wheel. This communicates consistency while variations of the dominant shade are used to create richer nuances than the monochromatic color scheme.
Complementary colors are on opposite sides of each other on the color wheel, for example red and green, blue and orange, yellow and purple. This color scheme at its most basic is just two colors and the contrast can appear harsh, but can be softened
with tints of the hue or by leaving white space between the two colors.
Split-complementary color scheme adds on two more colors neighbouring the complement of the base color – yellow with red-violet and blue-violet, for example. This scheme also offers the visual contrast of complementary colors without the intensity.
Triads
Triads are any three colors equally spaced around the color wheel. They offer contrast while retaining balance and harmony. Using one color in larger amounts than the others places the visual accent on that color and draws the eye to important elements. The pure hues have similar saturation levels and can become overwhelming. Using tints, tones and shades of the pure hues can help you create a more sophisticated design.
Tetrads
Tetradic color schemes using four colors arranged into two complementary pairs are generally more challenging to work with, but offer richer variety. Let one color be dominant and see that there is a balance between warm and cool colors in your design.
Adding neutrals
Adding neutrals like black, white, brown, tan and off-white adds balance to the design and softens jarring elements. Although white or black go well with any color scheme, think of using a very light grey or dark grey to add more visual interest than white or black.
Let’s take a look at some examples of website templates that use monochromatic color palettes. Teamed with white, grey, beige or black, they produce a single-minded focus on a thought, emotion or feeling, keep things simple and stay clear of clutter.
Construction – Joomla 4 Template With Prebuilt Websites
Zoom Express – Delivery MotoCMS Landing Page Template
Red is striking, energetic, confident and bold and we’re seeing it used in different ways in web design these days. Keep in mind that the viewer’s eyes will first be drawn to red in the design. Make sure you balance red with neutrals like white, black or grey, so that it does not hurt the viewer’s eyes.
Medina – Diagnostic Center Multipage HTML Website Template
Look out for more articles on color palettes in web design. The next in our series is analogous color palettes.
Color Design Resources:
