How to design with monochromatic colors—with expert tips from a designer

Picking a color palette for design projects can be a pain.

If you’re starting from scratch, without a style guide or any client preferences to go on, where do you begin? For one, you might try a color scheme pulled from the pages of classic color theory. That’s right, color theory isn’t just for art students — it can also help designers use color in an effective, visually engaging way.

And one of the easiest palettes to use (and hardest to mess up) is a monochromatic one. Although mono does mean “one,” this approach to color isn’t just using the same single shade in multiple places in your design. Instead, you can create a monochromatic color palette by choosing one base color (traditionally one of the 12 on the color wheel) plus any number of variations of that base. What type of variations? Let’s look at our options:

• Shades: the base color darkened with black.
• Tones: the base color dulled (or desaturated) with gray.
• Tints: the base color lightened with white.

Building a monochromatic palette out of shades, tones, and tints results in a versatile spectrum with color options for every part of your design. You can easily create one with online tools.

Why You Should Try a Monochromatic Color Scheme

In addition to its versatility, a one-color palette can benefit your design project and process in a number of ways:

1) It creates a harmonious, visually cohesive look.

2) It doesn’t draw attention to itself, but lets your content shine.

3) It can help associate brands with a specific, memorable color.

4) It makes your job as a designer easier and faster; you don’t have to stress over picking colors or wondering if they go together.

9 Techniques for Designing with Monochromatic Color

Sometimes it’s unavoidable that you need to fit a lot of information into a limited space. Instead of making your design even busier and confusing with a lot of colors, a one-color palette can help make a layout look cleaner and more organized.

For example, this infographic has a lot going on with its illustrations and typography, but an all-blue palette pulls everything together. For practicality’s sake, most designs will use some white or black (for text, background, etc.) in addition to the monochromatic colors. This design uses white and gray in the background to help the blue graphics stand out.

Color can be applied to more than just text and graphics. Designs that feature photography can use a monochromatic color scheme by applying a transparent color overlay or screen over the top. This works great with black-and-white photos—the shades of black, white, and gray show through the single-color overlay to create the impression of color variation:

The above example shows how this technique can be effective for portraiture. Notice also how the color helps make the text more visible against a consistent background.

This also works for color photography, as with the website layout below. A web page of wall-to-wall photography without any margins in between might otherwise seem visually overwhelming, but the shades of purple help give the layout structure and continuity.

One of the benefits of sticking to one color in your design is that it’s easy to make it look like various elements go together. This isn’t only a visual effect; it’s also functional. Showing how the features of your design are related or how they interact with each other can help viewers instantly understand the message and purpose of your design.

For instance, here, the shades of green go from lighter to darker to show a progression in price. The increases in price corresponds with the color value — the darker the color, the higher the cost. This type of visual cue is a smart, subtle move that makes the design more user-friendly.

As a designer, it can be fun to experiment with different color combinations. But often, those bold or bright shades just aren’t appropriate for a work project or business client.A monochromatic palette can help you add some variety to your usual color choices, toning down “louder” colors for a more professional look. Designers will often do this by taking a typically bright base color (like red, in the example below) and creating a palette with primarily darker shades and less saturated (i.e., less intense) variations.

This holiday card design for a construction company is a good example of this technique. Traditional Christmas colors (bright red and green) can come across as garish. The design still features red as a seasonal touch, but since the card is coming from a business, it keeps things professional by toning down the color selection.

Grayscale is a printing setting that uses shades of gray to reproduce color variation. It’s often used to save money on colored ink when viewing a design in color isn’t absolutely necessary. However, even if you’re not working on a print project, you can borrow this idea of grayscale and apply it to your own color scheme.

Why would I want to do that? you might ask. Wouldn’t an all-gray design look boring? Not necessarily. Like black and white, a color palette that features grays can lend a minimal, sophisticated look to your design. The website design below combines black-and-white photography, gray text in the menu, and a gray color overlay to complement a basic white background with black text.

Also, remember that when using grays, you don’t actually have to stick to grayscale (which is all the variations between black and white). You can also play with the color temperature, using cooler grays (usually bluish) or warmer grays (usually reddish, purplish, or brownish). Notice how the header image of the webpage we just looked at has a gray overlay that leans toward blue. This adds some slight color variation and visual interest.

Color, particularly blocks of color, can be used to divide your design into sections — which is an important part of creating an organized, easy-to-navigate layout that has good visual hierarchy.

This design for a calendar app features monochromatic shades of purple to separate various features and show users where they can adjust settings. I would guess that the color also has an interactive aspect, changing as users click on different areas.

There’s probably an endless number of tints, tones, and shades you could come up with for any given base color… but that doesn’t mean you need to use a lot of color variations in a monochromatic design. At some point, the subtle differences between colors won’t even be visually distinguishable. One way to keep your colors down to a manageable number is to only use as many as you need to separate your design elements — for instance, a three-color layout is pretty typical and might consist of background color, a text color, and an accent color for graphics or other elements.

Or take this series of logo concepts. They could have easily been designed using multiple colors, but because the style is more illustrative and detailed, a two-color monochromatic palette keeps things simple and doesn’t distract from the craftsmanship and interesting, retro aesthetic.

If you have two related designs — perhaps several flyers for a concert series or a pair of product labels for the same brand, as below — it can create a striking effect to use two contrasting monochromatic palettes. This shows that the two designs are different, yet connected.

These mineral water labels below ramp up the contrast even more because the two colors chosen (blue and orange) are complementary, or opposites, on the color wheel. In traditional color theory (see, color theory does come in handy for designers!) complementary color schemes are considered to be the most dramatic and high-contrast options for art and design contexts.

Aside from monochromatic and complementary color schemes, there are four other classic color palettes that you can pull from the color wheel to punch up your designs. Learn more about them in ourguide to color theory for designers.

As mentioned earlier, sometimes a strictly monochromatic color palette isn’t practical. But you can bend the rules a little and still keep the essence of a monochromatic color scheme — both its visual effect and its functionality. Here are some common approaches that you can try out yourself:

Monochromatic Palette + an Accent Color:

A pop of color in addition to your selection of monochromatic hues can help highlight important parts of your design or simply add extra visual interest. This type of scheme is most effective when the extra color has a specific purpose in the design — say, to highlight a logo or point out contact information or a call to action.

This set of business cards saves its blue accent color to highlight the designer’s first name:

Here’s another example. Instead of gray as the base color for the monochromatic palette as in the previous image, this time we have a color (turquoise), with a medium variation in the background and a darker shade for some of the text. Limiting the monochrome colors to only two keeps the color selection from being overwhelming. As a nice touch, the orange accent color ties in with the brand’s logo, and in this case, is used for a decorative purpose.

Black and White

Designers may differ in opinion as to whether a black-and-white color scheme qualifies as monochromatic (technically, black is an absence of color, and white is combination of all colors) — but it’s the most basic color scheme and can easily be used with or without one or more accent colors.

As a comparison, you can check out two website designs below, one with a strictly black-and-white palette and the other with the addition of red as an accent color:

For more inspiration on designing with a black-and-white palette, make sure to check out our showcase of 50 striking examples.

Same Color Family

While not technically monochromatic, a color palette drawn from the same color family can have much the same effect in terms of visual harmony and organizing information. This magazine spread features blues and greens to highlight the data communicated by its charts and graphics. Although there are at least four or five different colors here, their similarities — in color temperature (cool) and saturation (bright) — create a cohesive look. That would probably not be the case if a warm color like orange were part of the palette.

To Sum Up…

Monochromatic, or one-color, palettes are a versatile, easy-to-apply option for any type of design. Throughout this article, we’ve seen them work for websites, logos, business cards, product packaging, and more. But you don’t have to be a stickler for the traditional definition of monochromatic — adding an extra color or two can complement or enhance the effect. Now it’s your turn…with these tips and techniques, you can start trying monochromatic color schemes in your own design projects. As always, happy designing!

To help you out with your next monochromatic design, we’ve made 25 awesome monochromatic designs in Canva for you to get started with. Simply click on any of the images below to open these stunning palettes in your own Canva account.