Our job as designers is to take a product or project and make it user-friendly while remaining true to business goals. This is no small task. We’re responsible for everything from wireframes and user flows to typography and color selection.
It doesn’t have to be overwhelming. With a few well-placed tips and hints, you can take most of the work out of picking fonts and choosing colors and color schemes. We’ve already covered the former, so here’s some approaches to the latter that should up your design game and make it easier to pick a palette that’s pleasing to the eye and easy to understand.
The basics of color theory
Let’s get a few basic things out of the way first. Here’s a short list of terms and definitions (yes, like in middle school) so that we’re all on the same page when it comes to essential knowledge.
Color terminology
- Hue: what color something is, like blue or red
- Chroma: how pure a color is; the lack of white, black or gray added to it
- Saturation: the strength or weakness of a color
- Value: how light or dark a color is
- Tone: created by adding gray to a pure hue
- Shade: created by adding black to a pure hue
- Tint: created by adding white to a hue
By Jacobolus – Own work, Public Domain
Four main types of color palettes
-
- Monochromatic: Different shades and depths of a single hue. These can be the simplest color schemes to create, as they’re all taken from the same color. This makes it harder (but not impossible) to create a jarring or ugly scheme. Be careful, though; monochromatic palettes can be boring when done poorly.
This monochromatic example lets the type shine through.
-
- Analogous: A main color and the colors from either side of it on the color wheel. These palettes typically do a great job of expressing consistency and uniformity within design. They’re also easy to work with because there isn’t a large differentiation in hue. Instead, contrast is struck primarily through the variations in color shade, limiting any distraction away from content.
This analogous example uses colors from the blue-purple side of the color wheel.
-
- Complementary: Complementary or opposite colors from the color wheel (like red and green, blue and orange, etc.). Complementary palettes are great for communicating a sense of balance. Like analogous palettes, adding various tints and shades can expand these schemes. This is especially helpful in avoiding the glaring contrast that can create eyestrain when two opposing colors are placed next to each other.
This complementary example from Codecademy also utilizes an accent color.
-
- Triadic: Three colors from equidistant points on the color wheel (like red, yellow, and blue). The triadic method creates a more diverse palette. This takes a little more planning and experimentation because it involves a larger number of hues that oppose each other.
This triadic example highlights the three primary colors: red, blue, and yellow.
What colors mean
- Red: energy, power, passion
- Orange: joy, enthusiasm, creativity
- Yellow: happiness, intellect, energy
- Green: ambition, growth, freshness, safety
- Blue: tranquility, confidence, intelligence
- Purple: luxury, ambition, creativity
- Black: power, elegance, mystery
- White: cleanliness, purity, perfection
For more information about what certain colors mean, check out this post over at the Canva blog.
A note about accessibility
One challenge that UX designers have to keep in mind is meeting the needs of site visitors with color blindness or color vision deficiency (CVD). This condition affects more than eight percent of men and about 0.5 percent of women of Northern European ancestry. It’s up to UX designers to employ color blind-friendly palettes adapted and configured to accommodate the multiple varieties of colorblindness. Check out this post from the Pinterest Engineering team on the ways they approach CVD accessibility on their predominantly visual platform.
3 tips to get you started
Start with greyscale. By drafting your designs in greyscale first, you’re ensuring a focus on usability and clear navigation more than getting the color of that CTA button just right. Force yourself to focus on laying out elements and optimizing white space. A clean hierarchy of type and elements will go a long way
towards generating the best user experience.
Use the 60-30-10 rule. Use your colors in a 60% + 30% + 10% proportion. This old interior design rule is meant to give balance to your colors. The formula works because it allows the eye to move comfortably from one focal point to the next. It’s also incredibly simple to use: 60% is your dominant hue, 30% is your secondary color, and 10% is for an accent color. Even if your palette has more than three colors (but please, no more than five), keeping things in balance will be cleaner to the eye and more comfortable for your users’ brains.
The best color combinations come from nature. They will always look natural. The best thing about looking to the environment for design solutions is that the palette is always changing. Sunrises, sunsets, beach scenes… these all have unique palettes that can be adapted to suit your needs. Use an app like Adobe Capture (more about it in the next section) to isolate a color palette from a photo for use in other applications.
A post shared by Rjay Lawrence Aquino (@rjayaquino) on
Related: See trending color palettes on Dribbble with this new platform
3 color tools that’ll up your palette game
Color Hunt is “a free and open platform for color inspiration with thousands of trendy hand-picked color palettes.” It’s a great way to scroll through a (nearly) endless feed of color palettes searching for the ones that strikes your fancy.
Coolors.co – This tool is “a super fast color schemes generator for cool designers.” There’s an iOS app along with Adobe Add-ons for Photoshop and Illustrator. You can browse thousands color palettes from the community, save and access your favorite color palettes from almost everywhere, and use them in your projects with just a few clicks.
Paletton – This is similar to both Coolors and Color CC with the main difference being that you are not limited only to 5 tones. This is a great tool to use when you have primary colors and want to explore additional tones. If you want to explore all of the different types of color palettes we talked about above, this is a great tool to learn about them.
Once you’ve got your color palette picked, make sure to add it to your design system in InVision’s new Design System Manager. Don’t have a DSM account yet? Be sure to sign up today. Current DSM users, sign in below to take these new features for a spin.
by Will Fanguy
Digital content wrangler | UX enthusiast | Recovering educator | Shameless nerd & GIF connoisseur | Hockey fan (Go Preds!) | Oxford comma or death | It’s pronounced FANG-ee
