Please, enter a valid email!

Digging into Duotone: How to Create & Use Colorized Images in Web Design

Images play an integral part in modern web design, and if in the beginning of the ‘wild wild web’ you could get by without using them at all, right now every design depends on them. Photography and typography are blended into a single rough mix of visuals which you, as a designer, are privileged to orchestrate.

The major purpose of such a mixture is to bring forward a brand personality and create an identity that can be instantly recognized. But the creation process becomes more versatile and fun when you have an adequate number of weapons in your design arsenal. Today I want to introduce to you one of these weapons, a .44 Magnum in the world of design techniques - and that is the duotone effect.

I’ll tell you about the theory behind duotone images, provide some examples and, most importantly, share with you some techniques on how you can create duotone images in Photoshop.

A little bit of history

The classic definition of a duotone is a halftone image that is printed using two colors, or two shades of one color. In the old days of print, duotone was a cheaper alternative to color print, since the former required only two types of ink.

Examples of duotone images similar to what were used in print

Examples of duotone images similar to what were used in print

Besides a cheaper cost, there’s also an aesthetic component to duotone images that can easily change the mood of your design composition. Graphic designers have been using duotone in print for quite a while now, however there hasn’t been too much of it on the web. Until now.

Duotone and its modern application on the web

Although colorized imagery has been known to designers for a long time, the trend started to take off right after a major Spotify redesign.

A duotone effect used in one of the Spotify images

Brian Collins and his team managed to create a bold and inspiring identity that encouraged many designers to experiment in that direction.

Take a look at some of the examples of how the duotone effect is used around the web.

Holm Marcher & Co.

Design of Holm Marcher & Co. agency

Marshall WordPress Theme

An example of a duotone effect in Marshall WordPress theme

Social Chain

Duotone effect used in Social Chain agency website

Home Inspector

A duotone effect applied in Home Inspector

Adison Partners

Design of Adison Partners agency

Renate Rechner

Duotone effect used on the Renate Rechner website


A saturated colorized effect applied in a car rental services template

What’s the magic behind it?

The effect is created by replacing the original image colors with two colors of choice based on the lightness and darkness of the image. The darker parts of the image are colorized with the first color, and the lighter part is painted with the second color.

Elon Musk likes duotone (I guess so)

The effect is similar to black-and-white photography, except you are not limited to black and white and can combine any other colors you want.

How to create a duotone effect in Photoshop

There are three ways to achieve this effect in Photoshop. The first technique is the most common one, but in this article we’re also going to explore two alternative options.


That’s the easiest and go-to way to colorize your image with a duotone effect.

Gradient Map is an adjustment layer in Photoshop that applies a gradient to an image based on its brightness values. If your image has a lot of darks in it, the first color will be prevalent, the same goes with the lights and the second color.

First, choose an image with which you’re going to be working, and open it up in Photoshop. In my example I’ll be using a photo from Unsplash. You can see that a large portion of the image is taken up by a bright sky, so whatever color I choose as second, when applying the duotone effect, it would be dominant in the composition.

Original image

In order to add a new adjustment layer go to the Layer menu, hover over New Adjustment Layer, and click on Gradient Map.

New gradient map adjustment layer

Alternatively you can select a Gradient Map icon in your Adjustments window.

New gradient map layer with adjustments window

A new layer will appear in your Layers panel. If your default foreground and background colors are set to black and white, you’ll see a black and white image.

Gradient map with black and white default colors

Click on the gradient picker in the Properties window and try out different color combinations.

Picking a Duotone Color Palette

The basic rule of thumb in choosing colors for a duotone image is to pick a darker color first, and a lighter second, otherwise your image would look inverted (of course, if it’s not the effect you’re looking for).

A duotone effect with an inverted color scheme

A duotone effect with an inverted color scheme

It’s also not a good idea to pick two bright colors, although in some cases you might want to do this in order to create a unique style for your image.
Some of the best combinations include either contrasting colors, or a hue of one color combined with white or a shade of black.

When Two Is Not Enough

Sometimes we want more than two colors. Luckily, the Gradient Map tool can help us with that. Just add another Color Stop and pick the third color you want to add to your palette.

Adding a third color to a duotone effect

Here’s an approximate example of what a tritone image would look like if we were preparing a post about Instagram.

An example of a tritone image

Adding Just a Little Bit of Type

Very often duotone images can be successfully used in the background. Since their color scheme would consist of only two colors, it would be much easier to pick the right color and weight for the type in order to make it readable and stand out.

Duotone effect applied to a background image

Gradient Map vs Color Overlay

A gradient map can also be a great alternative to a color overlay. With a duotone you have more control over your visuals, since you are given two colors instead of one to manipulate.
Here on the second image below you can see how an overlay of the same color would look like with 80% opacity:

Duotone effect vs color overlay

Duotone vs Color overlay

The first image makes a much stronger impact thanks to the contrast and saturation, and there’s no way for us to achieve the same level of saturation in the second example because of the overlay opacity.

As you can see, Gradient Map is a very easy tool to work with. It can be turned on or off when needed without affecting the original image. However it’s not the only technique for creating duotone. Let’s explore the other two.


The second method is a bit complex, but it helps you understand better how the duotone effect can be created, so let’s explore that as well.
Here’s the original image I’ll be working with:

Color fill layers. Original image

Open up your image of choice in Photoshop and click on Layer > New Adjustment Layer > Black & White in order to make your image monochromatic. This would take out all the hues from the image and let us deal only with shades of black.

Preparing for a duotone effect: black and white mode

It seems that the image needs more contrast, so I’ll add a Brightness/Contrast layer by clicking the corresponding icon in the Adjustments window. I’ll increase the contrast value up to a 100, and add the brightness value of 7.

A contrasting b&w image

Here comes the most interesting part. We need to add two color fill layers to our photograph. Click on Layer > New Fill Layer > Solid Color to add the first one, and choose the color value of #0d3edf. Your image should be filled with a solid highly saturated blue color.

Blending Modes

Now let’s pause here for a minute and remember about blending modes in Photoshop. They allow us to mix layers and change their hue, saturation, brightness and tone based on mathematical formulae. The two most popular modes are Screen and Multiply, and they’re exactly what we need to create a duotone effect.

To put it simply, the Screen mode makes all the dark pixels of an image disappear. In our case the darkest region of our image is the girl’s hair, so you can see how the blue color fills in all the darks, and instead of black and white, the picture becomes blue and white.

A dark blue color fill layer with a screen blending mode applied to a black and white image

In order to achieve this effect, select the blue fill layer in your Layers window, click on the blending mode drop down list, and choose Screen.

Changing a blend mode of a layer in Photoshop

Changing a blend mode of a layer in Photoshop

Adding the second color

Now add another color fill layer, this time we’re going to make it red, with a value of #fa5265.

Instead of selecting Screen mode, choose Multiply, which would leave all the darker parts of the image untouched, but would colorize the whites instead.

At the moment, your image should become a mixture of blue and red, where the blues substitute the shadow parts of the photograph and the reds fill out the highlights. As a result we get this duotone effect:

Final result: a duotone effect with color fill layers

Feel free to play around with the colors and position of the layers to achieve the result you want. Pay attention to the order in which layers are placed (in this case the blue layer is below the red one), because this may result in some unwanted changes.


The third method may seem verbose and mostly applies to print rather than to the Web, but it can also come in handy, in part due to a large collection of duotone presets.

Open your image in Photoshop, and convert it to Grayscale Mode by clicking Image > Mode > Grayscale.

Now that it’s black and white, you can convert it to the Duotone Mode. Go to Image > Mode and select Duotone.

You can play around with some of the presets and see how this affects the image.

Notice that the effect is different from the ones we created previously, because the colors are blended in, and we don’t see a colorized, contrasting effect. In order to make it similar to the previous examples, do the following:

  1. Select Duotone in the Type drop-down list. This would enable you to select two colors instead of one.
  2. Select the second ink color, I chose #f11b1b.
  3. Click on the Overprint Colors button below, click on the first square, and select the color with which you want to overprint the image (I went with #091cae).
  4. Click on the curve icon on the left side of the second color box.
    Adjusting duotone mode settings
    In the very first input field enter 100. This would turn the diagonal line into a horizontal one and put it to the top.
  5. Click OK and close the window. Go to the Image > Mode and select RBG Color to convert your image back to the standard color mode.

Here’s the result you should get.

Duotone effect made with a duotone image mode

This method requires a few extra steps, but the result is worth it. It’s also helpful to know that you can achieve this trendy colorized effect in the Duotone mode as well.

Comparing Gradient Map, Color Fill, and Duotone Mode

We’ve explored three ways to create a duotone effect, and the result in each of them is a little bit different.

For comparison’s sake I colorized the previous image with duotone using the first two techniques described in the article, and here’s what I’ve got. The colors that were used for the effect are #f11b1b and #091cae.

An image colorized with the same colors using different duotone techniques

An image colorized with the same colors using different duotone techniques

The above result doesn’t mean, that you cannot adjust the values such as contrast, hue or saturation when using each of the techniques, but that’s the result we get if we apply the same colors with default settings. Also note that I didn’t use the brightness adjustment layer in the color fill example and applied a black and white layer only.

Summing It All Up

A duotone effect is an awesome way to bring boldness to your design, as well as make your images fit into the overall color scheme of your website. Duotone images can also be used to increase readability of the content, and simplify the color palette of your project. The effect can be applied in many places, e.g. in the hero section of your front page, as a background, or as a hover effect.

Duotone is fun to experiment with and explore, coming up with new color combinations, and rediscovering the ones you already know. If you need to make a strong impression on your visitors and make your design catchy and modern, duotone is a great technique to achieve this.

Don’t miss out these all-time favourites

  1. The best hosting for a WordPress website. Tap our link to get the best price on the market with 30% off. If Bluehost didn’t impress you check out other alternatives.
  2. Website Installation service - to get your template up and running within just 6 hours without hassle. No minute is wasted and the work is going.
  3. ONE Membership - to download unlimited number of WordPress themes, plugins, ppt and other products within one license. Since bigger is always better.
  4. Ready-to-Use Website service is the ultimate solution that includes full template installation & configuration, content integration, implementation of must-have plugins, security features and Extended on-page SEO optimization. A team of developers will do all the work for you.
  5. Must-Have WordPress Plugins - to get the most essential plugins for your website in one bundle. All plugins will be installed, activated and checked for proper functioning. 
  6. Finest Stock Images for Websites - to create amazing visuals. You’ll get access to to choose 15 images with unlimited topic and size selection.
  7. SSL Certificate Creation service - to get the absolute trust of your website visitors. Comodo Certificate is the most reliable https protocol that ensures users data safety against cyber attacks. 
  8. Website speed optimization service - to increase UX of your site and get a better Google PageSpeed score.

Matthew Cain

I like to create websites from the ground up, coding them carefully with HTML and CSS. Sometimes even the best and professionally created templates need some coding tricks. And here is my Quora account.

Get more to your email

Subscribe to our newsletter and access exclusive content and offers available only to MonsterPost subscribers.

From was successfully send!
Server error. Please, try again later.

3 responses to “Digging into Duotone: How to Create & Use Colorized Images in Web Design”

  1. Bernardome says:

    escort in pandemic

    this situation subreddit is sexuality natural.

    immature positive public. different whacking, Hateful approaches, properly prejudiced observations may be deleted. you can too be permanently restricted. you’re able to propose a simple estimation with a positive fashion.

    when you’ve got a review question which involves moderation, please make sure to upload a note that can /r/dating_advice. not really send out mods pm hours and discussion demands. I fulfilled very own informed gf with an request throughout this pandemic. we set off sending text messages moreover very easily gone to live in steady video beginning and ending dates. following weeks ture of online video getting to know, the two of us seen enough of a connection that you wanted to do meet face to face. the two of us discovered established which usually conformed in the yard by a general theme park. The the field of biology had been quite a bit on that point, So we consented to be part of each other very small social circular image so we see each other in the flesh near every last vacation.

    this guidance figured out very nicely considering out bank account coupled with cured package an good concerns the two of us bought in relation to obtaining on the top of a unfamiliar person. which how come i would recommend beginning with video playback calls online first. we would certainly quite untruth though it a fantastic deal troublesome when you’re able to see their counternance and read their gestures. And want you may be ready to get together physically, companies garnered be someone who you “you have to met, then you would certainly do know and relationships them to been doing using pandemic simply.

    At the stage where you supply face to face, aside from that it totally applicable to deliver various other those lousy test information as any added an extra insurance that they not only implying what you require to hear.

  2. Kinlochzrl says:

    Online dating companies typically require a potential member to provide personal data, before they will search the service supplier’s database for other individuals using standards they set, akin to age range, gender and site. Use search engines to take a look at suitors. I like a 17 yr lady (im 15) who i would like to ask out. Well some good questions there, ok first inform her you have got two tickets for the theatre, however you could have nobody to go along with, would she wish to go, if the answer is sure, then make a date and time to meet her, then go and purchase two tickets, when she turns up say how good she looks, purchase her some sweets, or popcorn, and hold her hand while watching the film, after you’ll be able to discuss concerning the film or whatever crops up, and take it from there. With a small projector, you possibly can deliver a theater to your own home or any place you want. Even whenever you do have a match, it may be troublesome to speak by way of apps instantly and there are lots of of bots and scam artists. On this case, the 2 of you may get carried away talking about subjects you didn’t even plan on talking about.

    • STEP 7: Don’t discuss some debatable matters. They’ll ask potential dates for money to buy particular papers they claim are needed to come back house or speak to family. Please tell me the best way to ask her out, what to talk together with her and how often tak to her in order that she wouldnt suppose im a stalker, what to do on a date. While it’s tempting to share each detail of your life with an individual you think you could possibly be in love with, that’s precisely what the scammer is counting on. Alright, i feel i am on the brink of getting into a relationship and i’m wondering what should i do to make the connection work. You two might be capable of work it out with the parents after they get to know you higher, but parental acceptance is important even when both are Chinese. Chinese man is expected to and desires to take care of his liked one, to be the breadwinner of the household. Profiles take time and creativity, but following these easy steps can make the method so much simpler. The problem with this course of is that it is impersonal, complicated, boring, and even dangerous.

    They may want access to your pc with a view to steal information. While the matching options of online dating companies current a person with potential dates, it’s also possible for a user to seek for potential dates based on location, age, religion and other profile information. Anyone could do a search and hot chinese girls photos was permitted to browse freely by means of the profiles so lengthy as meeting the standards set out by the service, such as on some sites women could not search girls’s profiles, for example. Aspiring members are asked to file an software, and are required to satisfy the rules, and necessities which can be set by the online dating service. There are an rising variety of scams by which con artists take photographs of soldiers from social networking websites and then pretend to be trustworthy members of the navy. Many websites are broad-based, with members coming from a wide range of backgrounds on the lookout for several types of relationships. Answers remain personal till each are prepared. Whether you might be on the lookout for friendship, romance, intimacy, or simply an excellent time we’ve got the right system to get you linked with the singles that you want to fulfill. We satisfaction ourselves on offering our singles a novel courting experience coupled with the newest technology that can assist you meet the perfect match.

    You can not filter your method into an ideal relationship. Another widespread ploy, says the FBI’s Tim Gallagher within the Wall Street Journal: Your suitor is at the airport on his method to visit you, but his credit card has been declined. If their command of English is fuzzy, that’s a “big purple flag,” writes Elizabeth Bernstein within the Wall Street Journal. When Bernstein met somebody on-line who seemed too good to be true, she reduce and pasted one in every of his e-mails into Google. The web is one of the harmful locations to satisfy individuals because of the power to cover behind false online profiles. The fewer people youngsters see coming in and out of your life, the higher. Based on Bernstein, it will let you see the place on the web the picture has appeared. If somebody sends you a photograph in an attachment and also you open it, you could have unwittingly allowed a virus to infect your pc. Don’t open attachments from a stranger.

  3. URL says:

    … [Trackback]

    […] Read More here: […]

Leave a Reply

Your email address will not be published. Required fields are marked *