Once you’ve encountered a digital visual design task you shall start with its color.
To attract your users with eye-catching colors you will first want to get the answers to these questions:
What is the color that will sell your product? What color will create a mood? What colors will invite you to explore your page more?
Do you have to be gifted to sense what colors are attractive? Are there any rules and principles that help everyone in choosing colors?
Like no diet fits everyone, there is no one formula for a color to answer all these questions.
Though in this article we give you a set of information, interesting facts, and practical suggestions that will empower you in making your own decisions and creative color choices for particular products, web designs, and brand books.
In this article, we’ll cover:
Table of Contents
Understanding Color
Nature of a color
Visible light is the totality of electromagnetic waves of different frequencies.
A rainbow beautifully represents the visible light scope and the electromagnetic wave range of colors that the human eye can catch.
Scientists at Khan Academy reveal that the shortest wavelength and highest frequency caught and recognized by the human eye is violet – the lower and most dense color of a rainbow.
The Ultraviolet X rays and gamma rays are shorter and more frequent therefore are above human eye ability and not perceived as a color. These highest frequencies can easily damage human cells.
The longest wavelength and lowest frequency caught and recognized by the human eye is red – the upper and most thin rainbow color.
The infrared rays, microwave, and radio waves are longer and slower, below that ability line. These are not perceived as colors and serve other purposes.
We discover that the higher the color frequency is, the more energy it takes to emit it, and the more energy is received when looking at it.
Interestingly we perceive colors red and orange as the most intense colors, but that is not the case in terms of their frequency.
Human eye catches RGB colors. Do colors exist?
Color is not an inherent feature of things. Color is only a phenomenon perceived by our eye and produced in the brain.
We have particular cones in our eyes that enable us to see and distinguish colors. There are three types of cones: the ones that distinguish red, blue, and green light (RGB) frequencies.
The perception of color is slightly different for each of us. Some people have an inborn inability to distinguish particular colors or their shades. Such condition is called color blindness or Daltonism and is caused by dysfunction of one or all types of eye cones.
What do color blind people see? The picture below by Enchroma demonstrates differences between normal color vision and color blindness.
It is also widely known that other living species have different sight abilities and scopes: snakes, frogs, and goldfish can see infrared light that is not visible to humans. Whales and seals do not at all have the cones in their eyes, so they are fully color blind.
RGB color model in web design
Now the color you see is a particular frequency or a combination of light frequencies either reflected from a thing or emitted by the source of light.
Thus, if you see an object as red, it means its biochemical and physical qualities have absorbed all of the light spectrum except the red. Then red was sent back into the environment and your eye.
Every color monitor or screen is made of triple color phosphors that are lit in red, green, and blue when hit by the photon. As a result, RGB stands for the three colors that correspond to the vision cones of a human eye: the red, the green, and the blue cone.
So, when you edit a photo of a red apple in Photoshop for Mac or Windows, or any other program, and see a red apple on the screen, that means the frequency of color red is generated and emitted into your eye.
Interestingly, the natural color black is the absence of visible light, meaning a thing that looks black to us is absorbing all the light spectrum without reflecting anything. The color black is produced when mixing all paint colors: the mixture finally starts reflecting almost no light.
Color black on a screen or monitor means that no RGB phosphors are lit, which makes the digital expression of color black be this: RGB (0, 0, 0).
Color white is the presence of a full spectrum of visible light. When something looks white to you, like snow, that means the object is just not absorbing any of the frequencies and reflect it all back into your eye. Thus, the color white is produced, mixing all the colors of light into one.
We see white on a screen when all phosphors are fully lit at RGB (255,255,255).
Before we move to the color choices and user attraction, one last curious thing is the color gray. Gray is named a neutral color and made combining black (no visible light) and white (all the visible light).
On a screen or monitor, gray color means that red, green, and blue phosphors are equally half-lit, i.e., RGB (128,128,128). Isn‘t it mind-blowing?
Validate your concepts for performance during the design stage with AI-generated attention analytics
Color meaning and psychology
Attention-grabbing colors have intuitive associations deriving from the Nature.
Color red would grab your eye as a ripe edible fruit in the leafage.
Black and yellow stripes would catch your attention, warning you about the poisonous nature of a wasp.
In contrast, green and brown colors and shades would help you feel safe, nature friendly, and sometimes invisible.
Red, yellow, and orange would be called warm colors due to their association with the Sun and fire, whereas blue, violet, and various dark shades resemble cold and heaviness.
Colors have cultural associations deriving from historical facts and human habits.
Color pink nowadays stands for girls and blue for boys. The colors red and green are known to mean stop and go. White is the color of a wedding dress and related accessories, whereas red and black together would invite something passionate and daring.
Colors also have symbolic meanings and become traditional.
Red is usually used to indicate danger, evoke erotic feelings, and stimulate people to make quick decisions; it is a perfect color for ‘Buy Now’ or ‘Click Here’ buttons on Internet banners and websites. Red means blood in flags and joy in Santa’s costume. You think of red first when associated with sports cars and feminine lipsticks.
As you can see color red can have almost all of the meanings. All the other colors may have many meanings too.
When you think big and dare, you can attach a meaning to any color with your global campaign, like the purple has been attached to a cow for the chocolate!
You can attract your users with eye-catching colors anytime, although we advise you to know your industry’s colors before you improvise.
Image credits: TheLogoCompany
Particular industries have so-called ecosystems of colors in use. Colors that mostly pop in the fast-food industry are red and yellow, green is usually associated with nature-friendly brands and sustainability, and blue is mostly used for social networking and technology. That’s why it is also important to have the right logo color combination to make sure your brand conveys the right message. You could also check psychology color emotion guide.
Use eye-catching colors with these design principles to boost conversions
Now that you have a basic understanding of colors, you can put it to work.
For example, you can research your target audience and conduct interviews about colors that draw attention to your brand.
Understanding users’ expectations and color-related neuropsychology are the keys to increasing your conversion rates.
There are also several design principles to bear in mind when determining a user interface color palette for your website, brand book, logo design and other visual designs: saliency, balance, and contrast.
Use color saliency to create a focal point
The visual detail is salient and catches the eye when its color differs significantly from its background.
Saliency is a quality that attracts the attention of human beings. It makes the detail visually pop-out and turns it into a focal point, grabbing a page visitor’s eye.
People are drawn to rely on visually intersecting sets of spatial and contrasting characteristics. A sparsely used “accent” color is likely to attract visual attention both because it is scarce and elicits a high visual contrast value.
Saliency through saturation: the more intense and saturated the color of an element, the more salient it is compared to its surroundings. Thus every color is complementary to the white background, except colors that are too thin and too low saturated to be salient on white.
Also, contrast and balance in your color pallets will create the desirable inviting effects.
Balance colors with the 60-30-10 rule
Balance is the distribution of the visual weight of elements between both sides of the design to create unity, fulfillment, and satisfaction.
Without visual balance, viewers may not see nor spend time in areas with less visual weight.
Image credits: Whitneyhomes
You would easily balance your visual hierarchy of a page with the 60-30-10 rule, which is simple but genius. The rule states that 60% of the color palette should be base color (neutral), 30% secondary color (in between neutral and bright), and 10% for the bright accent color.
Your accent color will pop, and your brand, for example, can easily be identified with it.
Furthermore, researches show that human visual attention responds best to nicely balanced and accentuated sets of colors.
Grab users attention with contrast
Color contrast is one of the most effective tools for boosting your design and making particular elements stand out.
According to Jennifer Fleming, the author of “Web Navigation: Designing the User Experience”:
“Color and contrast show relationships between items, establish the importance, and most importantly draw attention.”
First of all, choose the right contrast ratio.
Web Content Accessibility Guidelines (WCAG 2.1) require that the visual presentation of text and images of text has a contrast ratio of at least 4.5:1.
Whereas, contrast ratio for large-scale text (at 14pt bold/18pt regular and up), graphics, and user interface components (such as tooltips, input borders, or checkboxes) is expected to be at least 3:1.
Secondly, establish a dominant color for the main layout and take a color wheel.
Saliency through complementary colors of the color wheel allows for the most contrast.
If the contrast is the sole aim you seek, use the color wheel’s opposite colors, like red and green, brown and purple, light blue and gray.
Another good option is to use triadic colors. Triadic colors are evenly spaced around the color wheel and tend to be very bright and dynamic. If you put a triangle on the wheel, the color on the 3rd corner from the dominant color would be triadic.
You can play around and choose the best option, but the color wheel is an excellent reference to pick the color that attracts attention against your dominant color.
Color white is the queen
Tabula rasa (Latin: the clean board) or a white sheet of paper is always promising fresh new beginnings and perfectly contrast black texts, logotype colors, and the overall content of your design.
Logo reveal animations artfully unveil a brand’s logo, creating a striking first impression through innovative and engaging visual effects.
The importance of white space and minimalistic, flat, simple, uncluttered design is fast becoming the strategy of creating high-converting, usable web pages.
The best way to draw attention to your most important elements is to:
- Create a balanced contrast between the white space and the clicking points of the conversion.
- Avoid overloading the white with more than four other colors (and more than four different sizes and shapes).
- Use white to complement your brand color, or just use classical black on white.
Chanel introduced the now ubiquitous monochromatic black and white scheme to fashion in the 1920s.
Many fashion-forward sites follow the predominantly monochromatic trend (with moments of color splashed in) to accentuate the style they’ve got.
The monochromatic environment is also an excellent context for contrasting colors usage for attention-grabbing.
Just look at the ASOS’ strategic use of red to draw attention to their outlet items.
AI-generated Attention Heatmap shows that even though this menu item is not be the most dominant focal point in the design, it is clearly a sub-dominant one and attracts just enough attention.
Do you think it would be the case if it was the same color as other items in the menu?
Always be testing
Joshua Porter executed an experiment, “The Button Color A/B Test,” where he created two identical landing pages with different CTA buttons – in one version, it was green, in another red.
Despite Joshua’s prediction, the red button was more eye-grabbing, and brought a 21% higher conversion rate.
Red might not be the most eye-catching color there is, but it was the only color that stood out in that scenario. Thus, ultimately, what matters is how much a button color contrasts with the area around it.
Hence, do not go out and blindly switch your green buttons to red without testing it first. You should test colors on your page with your audience to see which version converts better.
People are not machines, and their attention might be grabbed differently and uniquely. Without the data, it might be nerve-racking to choose your CTA’s best performing color.
What if you don’t have enough users yet?
Luckily, Attention Insight enables you to test your visuals pre-launch, and I highly recommend you sign up for their free trial and test it out.
Now that you have an advanced understanding of eye-catching colors, put it to work and attract everyone’s attention!
Key takeaways
- Like no diet fits everyone, there is no one formula for a color to answer all these questions;
- Attract users’ attention with eye-catching salient and contrasting colors;
- Grab users’ attention with the semiotic value attached to certain colors and color combinations;
- Use principles of balance and contrast in colors to make the user stay;
- Mind your brand’s ecosystem;
- Combine the given facts, trust your gut feeling of what might work to convert and then TEST it.
5 Responses