Posted on

Color Secrets: Vibrancy

Color secrets: Vibrancy

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.

Magenta
#ff00ff
Orange
#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.

Maroon
#800000
Misty Rose
#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)

Chartreuse Button

 

 

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()

Chartreuse Button
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%

Chartreuse Button

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:

Chartreuse Button
Chartreuse Button

 

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!

Posted on

Color Secrets: Brightness

Color Secrets: Brightness

There has been a trend lately in app design where white or very light backgrounds are paired with minimal use of color and flat, simplified shapes. Why this shift when sites had been trending darker and darker? Is it the Star Wars reboot? A renewed interest in futurism? Or are we just all tired of looking at gray or black displays?

As more and more sites provide lighter sites or options to choose what backgrounds we want, designers and user experience professionals will need to take another look at how people are using devices as part of their daily lives. People don’t use devices in well lit, climate controlled areas. Being able to observe and take into account the key environments where users are will then have an impact on choices about color including brightness, contrast and saturation.

My personal ideas about why interfaces are getting lighter:

  • usability in all lighting environments (indoors/outdoors, stores with poor lighting)
  • unpredictability of display brightness on devices
  • creating a neutral but positive backdrop for tasks

Usability in All Lighting Environments Makes for Happier Users

While there could be come pop culture reasons for the brave new world of lighter interfaces, when I am transitioning from indoors to outdoors, especially most often when I am outdoors, it is very hard to use apps when the background is dark. This leads to frustration which then leads to me not using an app.

One of my favorite features of the Kindle app is having full control over whether the reading pages are light or dark. Using a brighter, lighter colored background by default makes the transition from different lighting environments a pleasant experience for the user. I don’t have to stop and hunt for my display settings or growl at my phone because its idea of a bright enough screen and mine in full sunlight ARE NOT the same. We are using these devices not just to easily ignore social interactions with family members, sometimes we actually have some banking to do.

 

A Renewed Focus on Delight and Positivity

There seems to be a psychological component to all this use of brightness and white for interface backgrounds. There is a modern, upbeat vibe lighter interfaces can give off that helps support a positive mood and good feelings that companies are hoping people associate with their products and tools. If an interface can keep a warm vibe and not tip into coming off as sterile and cold, then the careful crafting of a lighter background color and related elements become a part of the experience, letting the tasks the user is there to perform become center stage.

 

Brighter, Lighter backgrounds Don’t Have to Rely on Display Brightness

Phones eat a lot of battery when the screen brightness is turned up. Like many people, I turn that setting down so I can go without charging my phone part of the day. If an app uses a light background I will have a high contrast experience even with the brightness of the display dialed down. It won’t matter if it is a desktop, tablet, phone or something else – I will consistently have a better overall experience.  It comes down to practical business outcomes really. The less time I am able to use my phone because I have it on a charger, the less I am spending. The easier it is for me to use apps on my phone or the phone screens themselves, the more money I will likely spend.

 

What Does Brightness Have to Do with Color?

Brightness in color theory terms is the amount of white added to a hue (what most of us think of as a color like red).  When using physical pigments, there are actual thick, opaque substances in white paint (usually titanium white) that permanently impact other colors added to it. Black is made from the physical blend of many colors together. White is the combination of all colors in the RGB spectrum, which is what all device displays use. How does this relate to the brightness of screens or the choices product designers make in background colors? When you dial up the brightness to maximum in a background, it is a way to also portray calm, serenity, confidence and peace. It also acts as a neutral background for other colors. It is a canvas for charts, videos, and interactions. It is also important to take into account the effect that too much white without some tinge or other color or good use of background patterns can have. Too much plain white can make an app or experience seem sterile, especially paired with dark colors and somber images. I think this is one of the reasons we are seeing more and more custom illustrations on websites and apps.

 

In the End, Our Role is to Make a User’s Day Brighter

The rise of so many different digital devices used daily by a wide range of people has shifted the design conversations I have lately. More and more people are focusing on the imagery and how they feel when using an app or site on a device. Are they frustrated? Did the app make something that is usually difficult or boring easier? Did it save them time or brighten their day?  While changing the background of an interface alone won’t save a buggy or hard to use app, it can be part improving the overall product design. When we support the goals of the user, we make the goals of our companies and projects easier to achieve too. And our days (and experiences) are brighter for it.

 

Posted on

Five Quick Color Tips For Your Next Project

five quick color tips

Many developers and designers I talk to are very frustrated when it comes time to pick colors for a project. It can be hard to choose the right color or set of colors for a project. I want to share with your five quick tips for using color in your next project so you can make the best user experience possible.

Continue reading Five Quick Color Tips For Your Next Project

Posted on

Five Tips for Creating Better Color Palettes for the Web

Color palettes using simple and complex colors

I’ve put together five tips for creating better color palettes based on a recent talk I gave to computer science students. Faced with working on their first mobile apps or sites, they had never really been given advice on choosing color palettes. I realized this is one of those gaps in knowledge; part of the missing manual of design experience you build over time as a developer or designer. I hope you find them useful too.

Continue reading Five Tips for Creating Better Color Palettes for the Web

Posted on

What Does That Color Mean?

eight common colors with different meanings

It can be hard sometimes to choose the right color or set of colors for a project. Learning what different colors may mean to your audience and matching the right ones to the goals of your project takes research and careful thought. Different shades, tones and tints of the same color can have a very different impact. Today we will explore the Western meanings of eight common colors.

Continue reading What Does That Color Mean?