- This topic has 0 replies, 1 voice, and was last updated 5 months, 1 week ago by Chinomnso.
- February 7, 2020 at 11:39 pm #85415Participant@chinomnso
Colors can affect our mood, emotions and thoughts. Colors are also associated with certain brands, festivals and professions or causes. Research conducted by the Institute for Color Research suggests that people make a subconscious judgement about a product within 90 seconds of seeing it. It also suggests that 62 – 90 per cent of people’s judgement of products within that time frame is based on color alone.
User interface and user experience (UI/UX) designers face the task of making use of colors in their designs in a way that profoundly communicates the visual identity of the brands for which they work. Although some may think that a website’s or app’s color palette is completely based on a client’s taste, UI/UX designers depend on what is referred to as color theory. This is a set of guidelines that guide designers in the use of color in their designs.
Here, I’ll walk you through the basics of colour theory. You will get to learn the basics of color variants and a little about color models and palettes. Without much ado, let’s get started.
What Is Color Theory?
Color theory is a framework that guides the use of color in art and design and the creation of color palettes, driving the effective communication of a visual message in a way that enhances visual appeal and aesthetics, and communicates with viewers on a psychological level.
Color theory is based on Isaac Newton’s color wheel which he created in 1666. His original color wheel comprises of three categories of color: primary, secondary and tertiary colors. You may remember studying this in art class back in primary or high school.
Primary colors are colors that cannot be created by combining two or more colors. They are red, blue and yellow.
Secondary colors are colors that can be created by combining any two of the primary colors. They are orange, green and purple.
Tertiary colors can be created by mixing a primary color with a secondary color. Examples of these are magenta, vermillion, teal, amber, chartreuse and violet.
The Color Wheel
Although there are only 12 colors depicted in the tertiary color wheel above, you know that there are much more than 12 colours. A more advanced version of the color wheel is depicted below, and it contains far more colours than are depicted above.
Rather than charting each primary, secondary and tertiary color, it displays their hues, tones, shades and tints. By displaying a visual map of how each color relates to the one that follows on a rainbow color scale, the color wheel helps designers create beautiful palettes that bear the marks of color harmony. Now, let us talk a little about color variants.
A hue is the pure pigment of a color without a tint or a shade. Some refer to a hue as the origin of a color. Any of the six primary and secondary colors is a hue.
A shade is a term that identifies how much black is added to a hue, an original color. Therefore, a shade is a darker version of an original color.
A tint is the opposite of a shade. It refers to how much white is added to an original color. A tint is a lighter version of a color.
A tone is produced when both white and black are added to a hue. Or you can say that a tone is a hue that has been modified by the addition of grey, provided that the grey is completely neutral – containing only black and white.
Although you may be new to design, you may have heard terms like “warm”, “cool” and “neutral” being used in relation to colors. These terms are used to describe color temperature, and this concept is so important it can’t be left out when discussing color theory.
Warm colors contain traces of yellow and red, while cool colors have traces of blue, green or purple. On the other hand, neutral colors include black, brown, white and grey. The temperature of a color has a remarkable impact on a viewer’s emotional response to a design. Warm colors, for example, convey excitement, optimism and creativity, while cool colors portray calmness, serenity, harmony and peace.
How Important Is Color Harmony?
Color harmony refers to the use of color combinations that are visually appealing. Color palettes can be contrasting, or harmonizing. The most important thing, however, is that the colors you use make sense and are visually satisfying to your viewers.
Color harmony is the holy grail of all UI/UX designers. When colour harmony is lacking in a design, the design could be boring, or chaotic and noisy, turning users and viewers away.
Additive And Subtractive Color Models
Color can be said to have two natures: colors that can be seen on the surface of objects, and colors that are produced by light. They are known as additive and subtractive color models.
The Additive Color Model (RGB)
RGB is short for red, green and blue, and it is based on the additive model of light waves that states that the more color you add, the closer the color gets to white. This model forms the basis of all electronic screens, making it used by UI/UX designers quite often.
The Subtractive Color Model (CMYK)
A short for cyan, magenta, yellow and black, CMYK is the subtractive color model which gets colors by the subtraction of light. This model is used mainly in physical printing.
A color palette is a combination of colors used by designers when designing an interface. When used in the right way, a color palette becomes a foundation upon which a brand is built, ensuring consistency and making sure designs are beautiful.
Although color palettes are said to date back to thousands of years, the ones used in digital designs are presented as a combination of HEX codes. HEX codes tell a computer what color is to be displayed by means of hexadecimal values. In the ’90s, quite a number of digital palettes comprised of only eight colors. Now, designers have a staggering array of shades, tints and tones from which to choose. Let us now take a look at different types of color palettes.
Monochromatic color schemes are formed from several tones and shades of a single color or hue.
An analogous color shceme is made of three successive colors on a color wheel. They are commonly used when a contrast is not necessary.
Complementary color palettes are made up of colors that are placed at opposite sides of the color wheel. The name may sound deceptive because, in reality, the so-called complementary color schemes are used to produce contrast. As an example, using a blue button on a red background will create a strong contrast, making the button stand out clearly from the background.
A triadic color scheme is made up of three distinct colors that are equidistant from each other on a color wheel. Some designers use one color as a dominant color, then employ the other two as accents.
Used by advanced designers, this color scheme uses two sets of complementary pairs – four colors from – the wheel. Although it is not easy to balance, the visual effect can be quite impressive.
Now we have discussed the basics of color theory and color palettes. We have also learned what a color wheel is. We are now prepared to learn how to choose a color palette and dive a little deeper into the psychology of color. I would write about these soon in another article.
- You must be logged in to reply to this topic.