Muted (HUE) Color
You’ve probably seen variations of the flat colors palette thousands of times, and sometimes these colors just don’t fit the design aesthetic you are going for. Even when everything else about flat design appeals to it.
That’s when muted color options can work wonderfully. Using a muted color palette with a flat aesthetic is classic, polished and just different enough to make it stand out from all the other flat projects out there.
But what is a muted color palette? For purposes of this conversation, it is any highly saturated hue (such as those from Flat UI Colors) and adding a tint, tone or shade to make it less bright and more subdued. The result is often a softer, calmer color that can be easier to work with and match the overall design.
You can see from the images below how the same colors from Flat UI Colors can look different with changes to the white or black used with them. And, quite simply, that is what a muted color palette is all about. The rest of the design aesthetic can follow as closely (or loosely) to the principles of flat design as you like.
Tints
Tints are created when you add white to a color to lighten it. This color is often significantly lighter than the original color and is usually referred to as a pastel. Tints can range for almost white to just a few touches lighter than a fully saturated color. They often have a lighter, softer feel and create a more soothing aesthetic than bolder, brighter options.
Tints work well with photos and are popular on sites with illustrations. These lighter colors often fall away from the main aesthetic and are best suited for design purposes when other content, such as images or words, really needs to be the focal point.
Shades
Shades are colors the result with the addition of black. This will make a color darker and appear heavier to the eye. The range for adding black is anything from almost black with a hint of color to just a touch darker than the original hue.
Shades can work well in certain types of environments, often when used with less black. Projects that are dark and include a lot of blacks can result in concerns about readability if not executed exceptionally well. One thing that many people incorrectly assume is that shades have to look black, but when evolving a color from traditional flat design schemes, in particular, this is not the case at all.
Tones
Tones are created by combining white and black with a color to make it appear softer. Most colors are created using tones. They are complex colors that have an almost universal appeal because they pull from multiple parts of the color spectrum. It is this subtle quality that make tones the No. 1 choice of designers and artists for most projects.
Tones work in almost any design aesthetic because of their pleasing nature.
Conclusion
When you are branching out from some of the more traditional colors of flat design, you don’t have to pick one of the color techniques above. You can combines tints, shades and tones to create something that’s engaging and different.
