Effective Color Schemes for Your Content!
Remember that whatever your reason may be to create a website, you are attempting to create some sort of brand. And brands cry out for color to build confidence and authority.
For those that are color-challenged, picking the color scheme for your web layout can be a massive headache, but is crucial to the formation of your content.
And newbies to web design tend to minimize the importance of color choices.
In both instances, it is usually the lack of knowledge or a sense of apprehension that makes owners stay clear of the subject. Color is what can make a website attractive and creates a motivating initial impression.
To help in this respect, we will cover some of the basics that can ease the delving into color.
what is the relationship between color and the psyche?
The connection between color and the mind is impossible to disregard.
In infancy and remaining innate throughout life, the human mind builds a powerful subconscious relationship. While some associations with color are regarded universally as natural, others exist through cultural experience.
For example, green instinctively brings to mind vegetation and growth. That relationship springs from the earliest of human experiences across most cultural subsets.
Still, various colors emote the same or similar emotions depending upon geographic regions or nationalities.
In a study on the issue, the results showed that Germans associated envy and jealousy with the color yellow. Differently, Americans saw the same emotion in red, black, and green, and Russians found black, purple, and yellow to indicate these passions.
The study went on to say that cultural-specific variables determined by literature, mythology, and language contribute profoundly toward such perceptions.
Since an online presence has global exposure, the use of a particular color may have far different implications from what we anticipate.
In short, because a color scheme may look fantastic to us, others in the world, or of other ethnic backgrounds in our own country, can get a different interpretation from it. Therefore, pick your color structures wisely. Even though a particular color may be appropriate for a given region, it still may not be suitable even for both genders.
is an abundance of color better than not enough?
As a general rule, we have to say no.
As outlined later, we proposed a possible single-color approach. The concept is that a single color, with maybe a family color pallet along with white and black, provides the desired impact by its minimalism than the use of numerous colors.
But if the minimalist theme is not your intent, we suggest using color more extensively, but do it wisely.
Here are some wide-ranging guidelines when figuring out your color scheme.
why pick one dominant color?
You need to select one color that is going to be your brand color.
This selection will be the dominant color on the site and should be included in your logo if you have a logo. The anticipated effect is to tie your brand signature, which is the logo, with the color theme for the same reason that we have discussed many times before.
At the same time, be aware that what is trendy now may not be so in a year or two. We have seen it time and time again that a website seized a color and looked edgy and very TODAY! But, having gone back later to see that same site, it now seems dated and out of sync with the current fashion.
What has happened is that your scheme has outlived the trend. It is your online presence that may say that you are no longer credible, or your concepts are outdated. That necessitates a massive redo of the site, which can be very time-consuming or expensive if you hire someone to do it.
A suggestion to the newbies, start with a primary color when picking your dominant.
If you remember from grammar school, primary colors were considered red, yellow, and blue (RYB). The reason is that these three are considered the grandparents of all colors to come.
From a combination of red, yellow, and blue, you can conceivably generate just about every color and hue that you can imagine. But that applies to printed media and paint.
Color theory is a little different for computers and websites.
As stated earlier, the RGB (red, green, blue) system is the preferred format for photos and illustrations for web use. And here is the reason.
Without going through an entire dissertation of gamut and wavelength receptors, simplistically stated, computers emit light, and the primary colors of light are RGB, and not RYB.
To prove the point, if you magnify a yellow square of color on a computer screen, all you will see is a combination of incredibly small red and green pixels. You will not see anything readily distinguishable as yellow.
Here is an example of a field of yellow magnified several hundred times. Notice that the pixels appear as red and green squares, but as you move farther away from the image, it begins to look more discernably like yellow.
what are additive colors?
RGB, or red, green, and blue, are additive colors, that is, the addition of color makes the results brighter. As a result, if you add red, green, and blue together on a device's screen, you get white.
RGB, as additive colors, have these advantages over RYB for these reasons:
- provides a broader range for variations of colors
- provides more accurate screen data
- leads to more vibrant colors
- ease in adjusting for color hue and ranges
- corresponding RYB colors translate better as RGB
To control the screen coloration and color translation, use the RGB system for your primary color rather than RYB. This practice allows for varying hues or tones of RGB.
Nevertheless, you should be mindful that you need to make your dominant color prominent to establish any semblance of a color scheme. We will cover how to use the prominent or dominant color in a later explanation.
how many additional colors to use on a website?
Now that you have picked your dominant or principal color, how many more colors need to be added?
From our experience, it is best just to introduce at most two additional colors beyond the dominant color. Again, white and black are not considered colors.
The reasoning behind limiting the use of color is that a site runs the risk of looking too busy or overly elaborative. Besides, it is challenging to manage a color scheme overrun with a wide choice of colors.
how are additional colors generated from RGB?
We already know what the primary colors are. But how are the related colors, known as secondary and tertiary colors, created?
Secondary colors evolve by mixing two primary colors. Each of the primary colors added in equal proportions formulates the secondary color. For example, a combination of red and green equals yellow, blue together with red results in purple, and blue and green generate teal, as shown in the illustration.
The graphic depicts these relationships and also demonstrates the formula that equal parts of red, green, and blue, or RGB, resulting in white, as seen in the area where all of the colors converge.
With tertiary colors, a primary and a secondary color come together, forming shades of a color. The predominant color is the primary color, along with varying amounts of secondary color, helps to create either shades or hues of the primary color.
In the diagram, we can see how hues and tones occur when mixing the primary RGB colors of red, green, and blue with secondary colors. For example, the combination of the primary color of red and the secondary color yellow form the compound color of orange, or green and yellow create lime.
With these basic concepts, we will now move on to how to use them in the website color scheme.
picking your supplementary colors for your website
Want to make it simpler to pick the supplemental colors for your site?
Try one or more of these color scheming tools to realize the chemistry between primary colors (RGB), secondary, and tertiary colors.
defining a complementary color scheme
The first color scheme to go over is complementary colors.
Complementary colors create the most vibrant and visually arresting color scheme. They are easy to determine since they occur directly opposite each other on the color wheel.
Since the complementary colors stand out so vividly, they work well for a call to action button.
You can also apply complementary colors to highlight noteworthy secondary information. While not being the main focus, you still want these items to be conspicuous on the webpage.
A warning, use them sparingly. Overuse will defeat the purpose and result in too many focal points that will confuse the viewer.
what is an analogous color scheme?
The analogous color scheme also looks at the relationship of colors on the color wheel.
Analogous colors are contiguous to each other, i.e., next to each other.
The diagram shows two bracketed examples of analogous colors.
Analogous colors tend to be harmonious and often emulate how nature presents color, like tree foliage in the fall.
To make sure that they have enough disparity when used to be effective.
Also, corresponding colors are useful in muted color schemes that are low-key, which need a punch to help underwhelming web design.
how to create a triad color scheme?
Triad color schemes are the opposite of the analogous type.
When picking a triad scheme, just emulate a triangle. One of the colors is the dominant color, and the other two will become less prominent colors.
While not necessarily one of the primary colors of red, blue, or green (RBG), the dominant color can be a secondary or tertiary color. The diagram is an illustration of that principle.
The other two colors should be lower in saturation to affect a more harmonious combination with the dominant color.
By implication, the predominant color and remaining colors are not equal but are supportive of each other in their usage.
There is a familiar formula for this, known as the 60-30-10 rule.
what is the 60-30-10 rule?
The rule is a recognized means for proper balance and goes like this.
The dominant color takes 60%, the secondary color is 30%, and 10% for the remaining color is used as an accent. The final 10% is best if it is a color that pops on the page.
As stated many times, have your brand color being one of these colors.
How to apply these proportions should go something like this.
The 60% color is best for backgrounds and large text areas. For headlines, sidebars, and highlighting, use the 30% shade. And exploit your accent color 10% of the time for calling the viewer's attention to essential items that require a response or action.
To quickly recap, the 60% color sets the tone. The 30% adds contrast to the dominant color, and the 10% complements either the dominant or secondary color.
