We believe that there is nobody on Earth who would dare to assert that colors are inessential in web design. Both professional and amateur web designers study color theory in order to choose only the most efficient hues and their combinations for the projects they accomplish.
This theme is too vast, so it’s impossible to cover it completely in one single blog post. However, we can enumerate the basic principles of color theory, list the top tools for choosing the right color scheme as well as name some of the trendiest tints of the year. And of course, we are going to finish our entry with a compilation of websites where the authors managed to match the colors that seem absolutely incompatible at first sight. This is our plan. If you are all eyes, we’ll start with the first point.
Playing with Color – The Theory and Examples
What is color theory?
Color theory is a kind of guidance to color mixing and the visual effects of a specific color combination. According to it, colors are divided into primary, secondary and tertiary.
Color theory has a long history. Its principles firstly appeared in the writings of Leone Battista Alberti (c.1435) and the notebooks of Leonardo da Vinci (c.1490). Thus, a tradition of “color theory” began in the 18th century, initially within a partisan controversy around Isaac Newton’s theory of color (Opticks, 1704) and the nature of so-called primary colors. Since then, it developed as an independent artistic tradition with superficial reference to colorimetry and vision science.
Complementary colors
Isaac Newton’s color wheel is often used to describe complementary colors. Complementary colors are those which cancel each other’s hue to produce an achromatic (white, gray or black) light mixture. Newton supposed that colors exactly opposite one another on the hue circle cancel out each other’s hue.
A key assumption in Newton’s hue circle was that the maximum saturated hues are located on the outer circumference of the circle, while achromatic white is at the center. The saturation of the mixture of two spectral hues was predicted by the straight line between them; the mixture of three colors was predicted by the “center of gravity” or centroid of three triangle points, and so on.
According to the traditional color theory based on subtractive primary colors and the RYB color model, yellow mixed with violet, orange mixed with blue, or red mixed with green produces an equivalent gray and are the painter’s complementary colors. Taking into account the above, it is possible to form the basis of Chevreul’s law of color contrast: colors that appear together will be altered as if mixed with the complementary color of the other color. For instance: yellow on a blue background will appear tinted orange, because orange is the complementary color to blue.
An interesting fact is that when complementary colors are chosen based on definition by light mixture they are not the same as the artists’ primary colors. This discrepancy steps into the foreground when color theory is applied across media. Digital color management uses a hue circle defined around the additive primary colors – the RGB color model because the colors in a computer monitor are additive mixtures of light, not subtractive mixtures of paints.
Warm and cool colors
The distinction between ‘warm’ and ‘cool’ is generally not remarked in modern color science in reference to painting, but is still used in design practices today. The contrast between two color types is observed in landscape light, where the “warm” colors are associated with daylight or sunset and the “cool” colors associated with a gray or overcast day. Warm colors are often said to be hues from red through yellow, browns and tans included; cool colors are often said to be the hues from blue green through blue violet, most grays included. The 19th-century sources put the peak contrast between red orange and greenish blue, although there is historical disagreement about the colors that anchor the polarity.
Why is the division to ‘warm’ and ‘cold’ colors so important to web designers? Because they are perceived differently and make the opposite psychological effect on viewers. Warm colors appear more active, they stimulate the viewer, while cool colors tend to recede, calm and relax. Thus, there is an exception in this rule – brown is a dark, unsaturated warm color that very few people think of as visually active or psychologically arousing.
Achromatic colors
What colors are called achromatic? An achromatic color is any color that lacks strong chromatic content, is unsaturated, or near neutral. Pure achromatic colors include black, white and all grays; near neutrals include browns, tans, pastels and darker colors. Near neutrals can be of any hue or lightness.
How are neutral colors obtained? Neutrals are obtained by mixing pure colors with white, black or grey, or by mixing two complementary colors. In color theory, neutral colors are colors easily modified by adjacent more saturated colors and they appear to take on the hue complementary to the saturated color. For example: next to a bright red, gray will appear distinctly greenish.
Black and white colors have long been known as the friendliest ones. That is, they combine well with almost any other colors. Black decreases the apparent saturation or brightness of colors paired with it and white shows off all hues to equal effect.
Tints and shades
When mixing additive color models, the achromatic mixture of spectrally balanced RGB is always white. Mixing colorants, pigments in paint mixtures, we produce a color which is always darker and lower in chroma or saturation than the parent colors. This moves the mixed color closer toward a neutral color — a gray or near-black. Lights are made brighter or dimmer by adjusting their brightness, or energy level. In painting, lightness is adjusted through mixing with white, black or a color’s complement.
Do you know the difference between a shade and a tint? When painters darken a paint color by adding black paint, they produce shades. When they lighten a color by adding white, they produce tints. However, you should be cautious with the technique as an unfortunate result in the form of colors shift in hue may occur. For instance, darkening a color by adding black can cause colors such as yellows, reds and oranges to shift towards the greenish or bluish part of the spectrum. Lightening a color by adding white can cause a shift towards blue when mixed with reds and oranges. There is another practice of darkening a color – using its opposite, or complementary, color in order to neutralize it without a shift in hue, and darken it if the additive color is darker than the parent color. When lightening a color this hue shift can be corrected with the addition of a small amount of an adjacent color to bring the hue of the mixture back in line with the parent color.
Split primary colors
In painting and other visual arts, two-dimensional color wheels or three-dimensional color solids are used as tools to teach beginners the essential relationships between colors. The organization of colors in a particular color model depends on the purpose of that model. Some models show relationships based on human color perception, whereas others are based on the color mixing properties of a particular medium such as a computer screen or set of paints.
This system is still popular among contemporary painters. Actually it is basically a simplified version of Newton’s geometrical rule that colors closer together on the hue circle will produce more vibrant mixtures. However, with the range of contemporary paints available, many artists add more paints to their palette for a variety of practical reasons. For example, they may add a scarlet, purple and/or green paint to expand the mixable gamut; and they include one or more dark colors (especially “earth” colors such as yellow ochre or burnt sienna) simply because they are convenient to have premixed. Printers commonly augment a CYMK palette with spot ink colors.
Color harmony
Everybody knows that to produce an appealing affect, color combinations are to be in harmony. However, color harmony is a complex concept because human responses to color are both affective and cognitive, involving emotional response and judgment. Hence, our reaction to color and its harmony is influenced by a range of different factors. These factors include individual differences (such as age, gender, personal preference, affective state, etc.) as well as cultural, sub-cultural and socially-based differences which allows conditioning and learning responses about color. In addition, the context always affects color responses and the notion of color harmony. This concept is also influenced by temporal factors (such as changing trends) and perceptual factors (such as simultaneous contrast) which may impinge on human response to color.
Humans can perceive over 2.8 million different hues. It’s easy to suggest that the number of possible color combinations is virtually infinite, thereby implying that predictive color harmony formulae is fundamentally unsound. Color wheel models have often been used as a basis for color combination principles or guidelines and for defining relationships between colors. Some theorists and artists believe that matching of complementary color will produce strong contrast, a sense of visual tension as well as “color harmony”; while others believe that combining of analogous colors will elicit positive aesthetic response. According to color combination guidelines, colors next to each other on the color wheel model (analogous colors) tend to produce a single-hued or monochromatic color experience, called “simple harmonies” by some theorists. Split complementary color schemes usually depict a modified complimentary pair, with instead of the “true” second color being chosen, a range of analogous hues around it being chosen (i.e. the split compliments of red are blue-green and yellow-green). A triadic color scheme adopts any three colors approximately equidistant around a color wheel model.
Neither color combination formulae (\text{Color harmony} = f(\text{Col} 1, 2, 3, \dots, n) \cdot (ID + CE + CX + P + T – wherein color harmony is a function (f) of the interaction between color/s (Col 1, 2, 3, …, n) and the factors that influence positive aesthetic response to color: individual differences (ID) such as age, gender, personality and affective state; cultural experiences (CE), the prevailing context (CX) which includes setting and ambient lighting; intervening perceptual effects (P) and the effects of time (T) in terms of prevailing social trends) nor its principles can provide accurate guidance for practical application. This happens because of the influence of contextual, perceptual and temporal factors which will influence color/s perception in any given situation, setting or context. This formula together with all the above mentioned principles may be useful in fashion, interior and graphic design, but you should clearly understand that very much depends on the tastes, lifestyle and cultural norms of the viewer or consumer.
Since the times of ancient Greek philosophers, many theorists have devised color associations and linked particular connotative meanings to specific colors. However, connotative color associations and color symbolism tends to be culture-bound and may also vary across different contexts and circumstances. For example, red has many different connotative and symbolic meanings from exciting, arousing, sensual, romantic and feminine; to a symbol of good luck or a signal of danger.
Summing up everything said about the color theory, we can conclude that it has not developed an explicit explanation of how specific media affect color appearance. Colors have always been defined in the abstract, and whether the colors were inks or paints, oils or watercolors, transparencies or reflecting prints, computer displays or movie theaters, was not considered especially relevant.
Best tools for choosing a color scheme
If you are not a professional colorist, you can’t be 100% confident in your perfect taste and skills when it comes to choosing eye-feasting color combinations for your designs. Cheer up! Below you will find a list of best tools that will do the complicated job instead of you.
Color Scheme Designer
Adobe Kuler
Udcube
CheckMyColours
Color Hunter
SpyColor
ColorExplorer
Hex Color Scheme Generator
COPASO: Color Palette Software
Colourmod
ColorZilla
Colormunki
Colr.org
ColorBlender
GrayBit
Stripe Generator
Colors on the Web
Pictaculous
Contrast-A
Colorotate
Having finished with little designers’ helpers, we can proceed to the next point of our article. At the very beginning we promised to tell you about the trendiest colors and combinations of the current year. It’s time to give you the information you were patiently waiting for.
The most fashionable color combinations and color schemes of the current year
Skillful designers know that it’s not only the design concept or selection of colors taken separately that make the project successful. To create something really worthy, you should perfectly combine typography, layout and, of course, color schemes. If you are able to put these aspects together and make them work – you can think of yourself as an expert designer capable of producing quality products. It’s difficult to argue that color schemes play a vital role in designing any interactive website. There is an opinion that they can also serve as means of communication. Undoubtedly, whenever visitors enter any website, color schemes are one of the first things they notice.
There are many reasons why color schemes are utterly important and play such a big role in any design process. One of the reasons is that you can deliver your message with the help of colors. What’s more, the color scheme you use will necessarily affect the mood of your visitors. Effective and eye-candy color schemes will influence your visitors in many ways. The fact that multi-national corporations are ready to invest millions of dollars these days to find a perfect color scheme for their brand, packaging and, of course, websites proves how important it is for business success.
Some of the main latest trends in color schemes
Trendy color schemes for mobile designing:
Earlier, designers were rather cautious with color schemes for mobile websites. However, today, users and developers are open to experiments, so the latter are not afraid to use some interesting and cool color schemes. Since mobile screens offer a limited space, you need to be very picky with what you display. A mobile user is way too distracted and your app will only draw attention if your color scheme is attractive. Want your color scheme work? Make sure it is well executed.
- Color as accent:
Accent colors are very popular and are being used everywhere. Their main goal is to guide users’ eyes through the page. Doing this in mobile, you’d better go with big, bold and beautiful colors because they catch attention easily. - Color as a statement:
Making a statement is not difficult at all, but it’s difficult to be heard. So, do something wild. Grab attention with attractive color scheme enhanced by bold typography. - Color and emotions:
We have already mentioned that colors play an important role in stirring emotions. Every color defines something and they can be very powerful. That’s why use colors relevant to your product.
Trendy ‘Retro’ color schemes:
It may sound strange, but what was once old can become new again. Yes, retro color palettes are in vogue. We can observe the comeback of mostly all retro colors i.e., from yellows to browns to blues. Maybe the secret of retro colors popularity is that they are not saturated and have a little bit of flat look.
- Characteristics of Retro schemes:
One can recognize a retro color scheme by the fact that it doesn’t contain any bright colors. Designers purposely manipulate colors in order to come up with a retro color palette. - Retro fonts and textures:
As we have already stated earlier, typography plays a very important role in highlighting color schemes. It’s recommended to go with period lettering as they will also give a retro look.
Flat design color trend:
There has been much ado about flat design recently. When it comes to flat designing, you can go with variety of colors. However, the trend suggests setting before the bright ones. The best thing about flat style is that designers experiment and expand color palettes. They may dare to use four or even more colors. Flat design can have the following color palettes:
- Bright colors;
- Retro colors;
- Monotone colors.
In a nutshell, flat design is a perfect mixture of all trends.
Of course each web designer can have their own sense of style and trendiness. Even so, one rule should stay solid. No matter what color schemes you use, they should provide perfect readability of the content. Colors should not distract the user, on the contrary, they are aimed to emphasize website’s messages and ideas.
One popular and effective new trend is a full-screen, grayscale background with pops of two or three bright accent colors. Such type of design greatly highlights important information and interactive elements, making them accessible, friendly and unsophisticated for the users. It is a simple, direct presentation that gets the job done. The message is clean and uncomplicated.
Muted pastels are also popular. Mixing soft neutral tones and a variety of light pastels creates a friendly, inviting screen. Because none of the color tones are too bold or overwhelming, a larger number of muted shades can be added. This color palette tends to invite hand-drawn, organic typefaces and charming, folksy illustrations.
Partial revival of the 1980s color schemes includes bright neon colors. This isn’t really a new trend, but it definitely remains popular today and may be around for some time to come. Neon colors speak of excitement and energy. They suit the websites that want to actively promote their products. There are so many possible neon combinations that the choices always remain fresh and interesting. They seem to practically shout “come on and have some fun” to visitors of the website. Designers are not going to limit themselves to just the primary colors. They are playing with trendy shades like “web green,” “peachy red” and “lilac purple.”
Color blocking is a trend that came right off the runway of famous fashion designers. Website designers love the versatility and functionality of this color scheme. Specific colors are used to define categories, single elements and entire sections by creating clean, crisp fields. Color blocking tends to draw on powerful colors that can stand in where busy, graphic presentations might otherwise be needed. Minimalists love the straightforward look of vibrant color blocks filling their website screen.
A smart use of monotone website color scheme can also make a powerful impact. By adding white or black to a single color, designers can create a unified but interesting color palette. A variation of this principle occurs by taking any single base color and varying it slightly by adding another color. While blue remains the most popular website color, adding a green tint can totally change the visual effect.
The introduction of flat UI design has also affected website color schemes. Without the extra 3-D effects, shadowing, feathering and flourishes, the result is a clean screen that looks good and makes sense to visitors. By using only flat lines and colors to separate limited content, designers have greater freedom to focus on four or five bright color choices rather than the usual two or three shades.
In short, current color trends can be defined as “diverse.” That’s why staying trendy and relevant in website design might be easier now than ever before. However, please bear in mind, that a dominant color should convey the main site message and reflect the intrinsic value that your company’s product or service promotes.
To view more latest color combos, please follow this link.
Now that the theoretical part is more or less clear to us, let’s pass to the impressive ending of our blog post. We invite you to browse websites with the oddest color mixtures that look really great. Want to create something of the kind? Click here
Websites with the oddest color mixtures that look great
Ondo
Have you ever seen anything similar? This website will be remembered for sure.
Vet
It’s strange, it’s unusual, but so appealing, don’t you agree?
Keezy
Even such mixture of colors looks great over the black background.
Names for change
Creasy paper in the background and faded colors create a unique retro feel.
One iota
Just agree that beige and violet can hardly be called a perfect match, however, the website encourages further exploration.
Image of the studio
They are so freaking awesome!
Ole soiree
Maybe the designer is crazy, but the design works!
Marseille
A strange color choice, but it grabs the attention really well.
Work 4 rich
Don’t you find these rainbow stripes charming?
Mobee
An impressive division of the home page, isn’t it?
Texas Beards
Here the author combines cool blue-grey stormy waters with warm, cozy earth tones and wooden texture. The visitor will be at least interested.
Social playground
Pink, blue, green, orange – the author created a real playground for adult people.
Your site
Colored background, colored bags, colored everything makes a colored impression on the user.
Havoc inspired
A combination of beige, orange and green colors creates a cool retro environment onsite.
Ox
A crazy mixture of color, but how original it is.
Conclusion
We hope that our blog post was substantial enough and maybe you even discovered something new on the topic. Actually, the issue with trendy, pleasant, combinatory, current color schemes is always urgent to any web designer. If you have your own viewpoint on one of the matters covered above, we will be happy to see your feedback in the comments section.
Speak up! As truth is born only in the dispute. So, how do you personally choose the right color schemes for your websites? Do you make it intuitively or with the help of the available tools? Did you try out the ones listed in our article? Do you find them helpful and are you going to use them in future?
What colors do you consider the most fashionable this year? Do you bother about color trends at all? How do you like our small but inspiring website collection? Do you like such experiments? If you have your own successful experience with the oddest color combinations, please share them with the community.
