Vibrancy is about how intense a color is, how strong the color appears to be. It is not just how bright or colorful it is, instead it is more about how pure and vivid the color is. Artists who use physical paints often use this term to describe how well a color matches the original paint out of a tube or to compare two colors next to each other.
Digital artists and creatives also use vibrancy, usually as a way to compare an object’s color to a background or another element. Vibrancy can be good but also bad. Two strong colors like orange and blue hues tend to look like they are visually vibrating when they are next to each other. This is why people usually try to use a vivid color paired with a duller or desaturated color. Navy and magenta, orange and a much darker or lighter blue.
#ff00ff
#ffa500
Vibrancy and Emotional Response
Colors also are subconsciously tied to emotional response. People will have different associations with A rich deep burgundy than they will with a soft pink. Soft pinks, and all pastels are visually gentle and we tend to associate them with gentle or tender concepts and things. A soft pink might be used for clothing for a baby while a dark burgundy red might be used in packaging for a perfume. These two can be paired together for an interesting twist as well. It is important to consider not just a color but how vivid the color will be and what impact that may have on a design.
#800000
#FFE4E1
Vibrancy as a Wayfinding Tool in User Experience
The more vivid a color is the more it will attract attention. The button or item on the page you most want to attract people’s attention to should be the most vivid. If you have a very bright or vivid navigation banner or other elements, then it is important to give any call to action buttons a neutral area of white space around them so people can easily see the button. A lot of times on pages with other vivid colors this is flipped so the button is the darkest or lightest thing on the page, which also is a solution.
Experiment with Vibrancy and other CSS Filters
Don’t take my word for it about vibrancy, go ahead and try it on your next project. Here is a great list of old school named web colors to experiment with. Many of them are very vibrant, but with a bit of CSS you can tune the saturation, contrast and brightness and see what happens.
There are many filters, but here are the key ones that affect vibrancy:
- brightness()
- contrast()
- grayscale()
- opacity()
- saturate()
Let’s use Chartreuse as an example. (#7FFF00)
Desaturated 30%
If we want to desaturate the look of the color on the button, the most fool proof way is to dim it using grayscale()
Here is the code for the CSS style:
-webkit-filter: grayscale(20%);
-moz-filter: grayscale(20%);
-ms-filter: grayscale(20%);
-o-filter: grayscale(20%);
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 10px; /* future proof */
-khtml-border-radius: 7px; /* for old browsers */
}
Desaturate 70%
So we can see by ramping up the grayscale percentage value all the way up to 70%,, we end up with a pretty quiet looking green. This would be one way to add a color change on hover without ever actually changing the color for a more subtle hover effect.
Let’s see what happens when we use saturate()
Saturate() set to 20% then 70% shown in two buttons:
Here is the code for the CSS style:
-webkit-filter: saturate(20%);
-moz-filter: saturate(20%);
-ms-filter: saturate(20%);
-o-filter: saturate(20%);
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 10px; /* future proof */
-khtml-border-radius: 7px; /* for old browsers */
}
To use 70% just copy the button again and adjust the saturate value.You can see that the saturate() is much stronger. If you want one set of code to use across images and buttons, grayscale is a safer bet for desaturation as it is more versatile. I hope you’ve enjoyed learning a bit more about vibrancy. I’d love to hear how you use this knowledge on your next project!
