Working Smarter for Better UI Colors
Work smarter, not harder.
This quip, I’m sure, has led to many tools, contraptions, web sites, and web apps being built to simplify a task or increase productivity while reducing the effort to achieve similar results.
It’s a mantra I believe in and, ironically, I work hard to implement in my working life.
As a UX/UI designer, I move pretty fast and don’t like to spend more time during production than I need to. After all, time is money, as they say.
We all have strengths and weaknesses In this process and the “Work smarter” mantra should manifest itself in those weaker areas.
The weak link in my skill set is always being able to craft a compelling, useable color palette at the design exploration phase of a project. It’s something I’ve always seen as a gap, and something I continue to work on improving.
What is Available?
In order to help myself build a consistently good-looking UI color palette, there are a handful of tools and techniques that work every time and take some of the guesswork out of building a rock-solid UI color palette.
Know Your Basic Color Theory
This is not an article on color theory, per se, so I’m not spending too much time here. Just understand that others have gone before us and done the work of establishing a robust and powerful color theory model we can all rely on.
Understand Hue, Tint, Tone, and Shade
A natural expansion form the basic color wheel is the addition of Tint, Tone and Shade.
Hue — The pure form of a color — essentially, the most saturated and unadulterated color from the basic color wheel
Tint — The Increasing the Lightness or Luminance of a Hue
Shade — The decreasing Lightness of Luminance of a Hue
Tone — The saturation of a Hue
Understanding these elements of color, and how they expand the color harmonies, opens up a world of color combinations.
Use Brand Style Guides
In many cases, your client will dictate your color palette, but what if their style guide is limited and limiting?
You should always feel free to Tint, Shade and Tone any of a client’s brand colors in order to build a UI-appropriate color palette. Open yourself, and your client, to the possibilities that exist within their limited range and you are good to go.
Borrow from Product Packaging
Looking at product packaging is a great way to find color harmonies used successfully. As most product packaging is designed and vetted by highly qualified art directors at major agencies, you can feel pretty secure knowing they’ve already done the hard work for you.
Use packaging as jumping off point and expand the palette by exploring Tints, Tones and Shades for your UI. (Seeing a pattern here?)
Create Palettes from Pictures
This is a technique I’ve been using for years. (I think I can say decades at this point). Find a photo that captures the emotional impact you want in your website, app, or graphic design. In the app of your choice, just “eye drop” your way to a great palette.
As with the rest, used this to select base colors and then expand out the tints, tones and shades.
Don’t want to do the work? Let Adobe do it for you.
https://color.adobe.com/create
Any image can be dropped in to this handy tool to auto-generate a starting palette.
Explore Gamut Masking
I’ll call this an “advanced” technique. It’s used by digital and traditional painters alike, but can definitely be a powerful tool for UI designers as well.
Gamut masking limits the overall color wheel and forces the designer to minimize their palette while staying harmonious. I won’t spend too much time here, but if you are ready for a more advanced and complicated technique, I recommend reading more about it here.
Building the Palette
I want to preface this next section by saying that, like most great things, I borrowed this from someone else. I discovered this entire technique at RefactoringUI.com and highly recommend you check them out whether you are new to UI design or simply want a refresher.
The Base Color
After you have explored some ideas, or gone through some of the exercises above, you should have an idea of where you want to start.
Define the HUE of your base color(s). These are the saturated, vibrant colors that all things will revolve around. Ideally, they represents all the feeling and emotion you want to bring to bear
Define the Extremes
From here, build a sample UI component, apply your base color and, using a few other elements in the UI component, define the darkest shade and lightest tint of the base color that you might reasonably use.
With the extremes defined, start to fill the gaps and expand the single color’s palette.
A note about defining your shades and tints: Sketch defaults to HSB. I find that changing to HSL and modifying the Lightness/Luminance setting generates more appealing results.
Complete the Palette
As you continue to build your design system, use this technique for each color you introduce. It will guarantee harmony across the spectrum of that color. If you use the basic color harmonies in your choices, your entire palette should be harmonious, functional, and appealing.
Apply To Components
Test the palette by applying it to more components. Add additional shades or tints as needed.
Final Thoughts
Color doesn’t need to be complicated or frustrating. Let these tools and patterns much of the work for you. Always strive to work smarter, not harder.
