The Challenge

Lutron Electronics wanted to use the Company color of blue for all primary buttons. The problem was that the Brand Blue did not pass accessibility criteria. It was decided that a new Lutron Blue was needed.After a series of iterations the Senior Designer was unable to come up with a consensus with the Management and I was given the task of developing a solution to the Lutron Blue problem.

The Problem

The main problem with this brief was that everyone had a different idea of the “Lutron Blue”. Every president and vice president had an opinion, “It needs to be cooler.” “A little warmer” “This feels a little to grey”“The color feels dull” “Its just off.”

Every person that saw a proposal had a different option they wanted to pursue and rather than arriving at a consensus we were driving division. The problem was that each proposal from our Design Team was just picking a color from from the color wheel. There was no science behind the proposals we were putting forth.

The Method

I decided to use the HSL color scale for this experiment. HSL stands for Hue, Saturation, Lightness. Where Hue is the degree of a color on the color wheel. Saturation is a 0-100% percentage of grey within the color where 0% is a shade of grey and 100% is full color. Lightness being the percentage of Black or White within the color. 0% being all black. 100% being all white and 50% having neither black nor white within the color. We decided as a team we wanted full saturation colors. This meant that the only lever we could manipulate was the Lightness. I arranged all the numerical values that could be considered blue (colors 190 - 250 on the color wheel) across the x-axis. I then arrayed those colors along the y-axis adjusting the Lightness of the color from 20% to 75%

I then tested each color to create the red line to demarcate what is accessible. On the Light Background everything below the line passes contrast. On the Dark Backgrounds everything above the line passes contrast.

Revise

After a design review the team decided to zero in on this section of the color wheel. 208-212. I repeated the array of colors but was more granular with the Lightness percentages. Going from 30% to 50% in 2% increments. Which resulted in a final proposal.

The Propsal

I proposed that the team use HSL: 208 - 100 - 40.

What sold the stake holders on adoption was not only that it passed contrast but was a close relative to our 2 previous Lutron Brand Colors. Where the old colors were a base color of 207. The new Lutron blue was a single degree up on the color wheel. The new color also utilized full saturation which yields a richer color. We were unable to use the Old Lutron Blue was that while it passed on stark white it did not pass contrast on grays which was being adopted as our primary background color
‍
What sold the stake holders on adoption this was that it not only passed contrast but was a close relative to our 2 previous Lutron Blues. Where the old colors were a base color of 207. The new Lutron blue was a single degree up on the color wheel. The new color also utilized full saturation which yields a richer color.The reason we were unable to use the Old Lutron Blue was that while it passed on stark white it did not pass contrast on greys which was being adopted as our primary background color

States

The proposal also included color variables for Hover and pressed states for components utilizing the Lutron Blue. This was achieved by turning the lightness dial by 10% making the color darker.

Conclusion

This proposal was approved and adopted across all Lutron Products Digital and Physical. This proposal was able to drive consensus because it was founded on rational arguments that could be tested and evaluated rather than have everyones subjective thoughts on the proper blue.This strategy for color selection was not limited to just the Lutron Blue it was extended into our dark mode color for the Lutron Blue as well as all our other colors for light and dark mode this includes: Error, Warning, Success, Data Visualization, Chips, etc.

Lessons Learned

The big lesson learned through this project it is important to have reasons behind decisions. It took months of the team just picking colors from a color wheel and trying to defend it, but it wasn't until there was a structure to the exploration that we were able to defend our proposal from too many subjective opinions of stakeholders.