How to Pick Colors for Flat Website Design

Which color palettes are all the rage? Any color scheme that pairs well with flat web design, which calls for more solid colors, interesting color variations, and flat color combinations. Bring fresh style and greater usability to your next web design project with these color palette tips.

Do More With Less
Flat design is a growing trend that has become popular for websites, operating systems and mobile apps. While minimalistic in design, these websites are anything but simplistic. So what makes this trend so popular? Flat design gives more emphasis on content and readability by removing all the extra “stuff.” And these days, content is king.

Flat design does away with three-dimensional elements, like shadows, gradients, textures, embossing and bevels, to create a look that is simple, clean and modern. Through better use of white space, its de-cluttered appearance makes content easier to read and interact with. The technique also incorporates different size shapes, solid colors, sharp typography and minimal elements to create designs that are free from distractions.

Best Color Palettes
Defining the color palette should be an early step in your design project. With flat design’s minimalist approach, color schemes are more simplified but also have lots of pop. They typically include a balance of bold and muted tones; feature just one or two colors; or showcase a rainbow of hues.

Here’s a closer look at what works when using flat colors in your web design project.

Bright Palettes: Want maximum impact? These super-saturated colors bring energy and vibrancy to your design. Use them as solid color backgrounds, or make them pop against light or dark backgrounds. Opt for bold hues like reds, oranges and yellows.

Retro Palettes: Going for an old school or vintage look? These colors are less saturated and feel flatter than other hues, which combine well with white or a brighter primary color. Opt for oranges, yellow-ish browns, off-whites and blues.

Monotone Palettes: Prefer understated quality? These colors include a neutral base color accented by a bright hue that makes calls to action really stand out. Opt for blacks, grays, beiges, taupes and off-whites.

Need inspiration? Check out these 24 flat design color palette ideas.

Rule of Thumb
Not sure how many colors you should use? An excellent formula is the 60-30-10 rule, which is borrowed from the interior design and fashion industries and works well in web design. This rule recommends that websites stick to just 3 colors:

A dominant color that comprises 60% of the design and sets the tone.
A secondary color that comprises 30% of the design and adds contrast to the dominant color.
An accent color that comprises 10% of the design and is complementary to either the dominant or secondary color.

This rule works because it creates a sense of balance, harmony and consistency in the website design. For flat design, a smart choice for dominant and secondary colors are neutrals that go with anything, like white, gray, beige and black.

Tip: Create distinction without tacking on another color or two by moving within shades or tones of a single color.

Building a Color Scheme
Building a color palette from scratch is easy when you have the right tools. A good place to start is with the brand’s logo, then choose contrasting or complimentary colors. Once you have your base color selected, plug it into one of these (free) online tools.

Tip: Before finalizing a color scheme, view it across several different screens. What may look perfect on your desktop monitor may look off on your smartphone.

What color palettes do you think work best with flat web design? Share your expertise in the comments below.