# Duotone photos in your brand colours: mono, duotone and wash

[Canonical HTML page](https://gradiently.design/guide/photo-duotone-in-mark-colours)

Mismatched photos are the quickest way to make a feed look borrowed. Tinting them in your own colours pulls stock shots, phone snaps and product photos into one family.

## The short version

- A duotone photo replaces a picture's tones with two colours: one for the shadows and one for the highlights.
- In Gradiently, any photo can be tinted as mono, duotone or a wash, and duotone and wash take their colours from the design's Mark.
- Tinting photos in the same colours as the background makes mixed sources, from stock to phone shots, look like one deliberate set.
- Photos can also be adjusted for light and colour, finished with filters such as Film or Noir, and cropped into arches, circles and blobs.
- Every photo adjustment stays editable, so you can change the tint or swap the Mark later and the photo follows.

A **duotone photo** swaps a picture's natural colours for two chosen ones: a dark colour for the shadows and a light colour for the highlights, with every tone in between blended from the pair. Done in your brand colours, it turns any photograph into something that clearly belongs to you. In Gradiently you can tint a photo three ways, mono, duotone or a wash, and duotone and wash take their colours straight from the design's Mark, so the photo and the background always agree.

## How a duotone photo works

Think of the photo as black and white first. Every pixel has a brightness from 0 to 100 percent. A duotone then paints the darkest pixels in your shadow colour, the brightest in your highlight colour, and everything else at the matching point along the ramp between them. The result keeps all the detail of the photo, but none of its original colour.

- Indigo to blush: `linear-gradient(90deg, #1e1b4b 0%, #be185d 55%, #fbcfe8 100%)`
- Deep teal to sand: `linear-gradient(90deg, #052e2b 0%, #0f766e 50%, #f5d0a9 100%)`
- Oxblood to butter: `linear-gradient(90deg, #2b0a0a 0%, #b45309 55%, #fde68a 100%)`
- Navy to ice: `linear-gradient(90deg, #0b1020 0%, #2563eb 55%, #e0f2fe 100%)`

Four duotone ramps. Shadows take the colour on the left, highlights the colour on the right, and the photo's mid tones land in the middle.

The trick that makes a duotone look good rather than muddy is contrast between the two ends. A very dark shadow and a very light highlight keep faces and products legible. Two mid tones produce a flat, murky picture. For the history and broader uses of the look, see [the duotone effect](https://gradiently.design/guide/duotone-effect).

## Mono, duotone and wash: three ways to tint

| Tint | What it does | Colours from | Use it for |
| --- | --- | --- | --- |
| **Mono** | Turns the photo black and white | Neutral greys | Portraits, quotes, anything serious or timeless |
| **Duotone** | Maps shadows and highlights to two colours | The Mark | Bold posts, event posters, team photos that don't match |
| **Wash** | Lays the Mark's colour over the photo while keeping some of its own | The Mark | Product shots and food, where the subject should still look real |
| None | Leaves the photo's colour alone | The photo | Hero product photos where accurate colour matters |

The tint options in photo editing. Duotone and Wash use the colours of your Mark, so swapping the Mark retints the photo.

A portrait post titled Meet the team with the detail line about five people and an espresso machine, on a warm gradient Mark

The kind of post a duotone rescues: team photos shot on different phones, pulled into one set by the Mark's colours.

A portrait product post announcing an autumn coffee blend on the same gradient Mark

A product post: the kind where a gentle wash ties the photo to the background but keeps the coffee looking like coffee.

## How to make a duotone photo in Gradiently

1. **Add the photo** Upload or paste your own, or choose one from the free stock photos in the Studio.
2. **Open photo editing** Select the photo and open its editing panel, where light, colour, filters and tint live.
3. **Choose Duotone under Mark colours** The photo is remapped to the Mark's palette at once. Try Wash and Mono too; it costs nothing to compare.
4. **Set the contrast** Raise contrast if the result looks flat, and brightness if faces fall into the shadow colour.
5. **Crop into a shape** Frame it as a square, a circle, an arch or a blob to suit the layout.
6. **Swap the Mark to test** Change the design's Mark and the tint follows, so you can try several looks on the same photo.

> **Everything stays editable** Tints and filters never bake into the photo. You can change or reset them at any point, which matters when a campaign changes colour halfway through.

## Filters, light and colour for the finish

Tint sets the colour family; the other adjustments decide the feel. They sit in three groups, and the presets are a fast way to start before fine tuning. If the photo is a product shot, get the background right first: [product photo backgrounds](https://gradiently.design/guide/product-photo-backgrounds) covers that.

| Group | Controls | What to reach for |
| --- | --- | --- |
| Light | Brightness, contrast | Contrast first for any duotone; it separates the two colours |
| Colour | Saturation, temperature, green to magenta, hue | Temperature to warm or cool a wash; leave saturation alone on a duotone |
| Finish | Blur, vignette | A light vignette pulls the eye inwards on portraits |
| Presets | Original, Vivid, Soft, Warm, Cool, Faded, Noir, Film | Film or Faded under a wash gives an easy printed feel |

Photo editing controls. Start with a preset, then adjust light before colour.

## Crop shapes: arches, circles and blobs

A tinted photo in a soft shape reads as designed rather than dropped in. Arches feel architectural and calm, lovely for interiors, florists and wedding work, and a natural fit for [photographer branding](https://gradiently.design/guide/photographer-branding). Circles suit people: team pages, speakers, testimonials. Blobs are playful and suit food, kids' brands and anything informal. Keep to one shape per design so the set looks consistent.

### Avoid

- Two mid tone colours that turn the photo grey
- A duotone on the one photo where true colour sells, such as a dress
- A different tint on every photo in a carousel
- Words over the busiest part of the photo

### Do

- A deep shadow colour and a pale highlight
- A wash for products, duotone for people and places
- One tint across every photo in a set
- Words in the calm area, with Auto ink picking the colour

If text sits on the photo itself, [making text readable on photos](https://gradiently.design/guide/readable-text-on-photos) covers placement, and a consistent tint is one of the simplest habits behind [brand consistency](https://gradiently.design/guide/brand-consistency).

## A duotone in CSS

On a website you can build the same effect with blend modes: make the photo greyscale, multiply it over the highlight colour, then lighten with the shadow colour.

```css
.duotone {
  position: relative;
  background: #fbcfe8; /* highlight colour */
}

.duotone img {
  display: block;
  width: 100%;
  filter: grayscale(1) contrast(1.1);
  mix-blend-mode: multiply;
}

.duotone::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #1e1b4b; /* shadow colour */
  mix-blend-mode: lighten;
  pointer-events: none;
}
```

Indigo shadows and blush highlights. See [mix-blend-mode on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode) for browser support.

## FAQ

### What is a duotone photo?

A photo whose colours are replaced by two: one for the shadows and one for the highlights, with the tones between blended from the pair.

### How do I make a duotone photo in my brand colours?

In Gradiently, select the photo, open photo editing and choose Duotone; it uses the colours of the design's Mark. In CSS, combine a greyscale image with blend modes.

### What is the difference between duotone and a colour wash?

A duotone replaces all of the photo's colour with two colours. A wash lays a colour over the photo while keeping some of its own, so subjects still look natural.

### Which colours make a good duotone?

A very dark shadow colour and a very light highlight colour. Two mid tones make the photo look flat and muddy.

### Can I crop photos into shapes in Gradiently?

Yes. Photos can be framed as squares, circles, arches or blobs.