Skip to content
ToolQivo

Duotone Color Generator

Build a duotone pair and get the CSS to apply it.

Color Tools Reviews Free · no sign-up

The two colours

CSS and SVG 
The code appears here

Quick Tool Overview

The Duotone Color Generator builds a two-colour gradient map, shows the ramp between them — which is where duotones go muddy — and emits both the accurate SVG filter and the quick CSS blend-mode version.

What it does
Builds duotone pairs and the code to apply them
You give it
A shadow colour and a highlight colour
You get back
A live preview plus SVG and CSS code
Best for
Making mixed photography look like one brand
Color Tools Free, unlimited use No sign-up Runs in your browser

About the Duotone Color Generator

Duotone maps an image onto two colours: the shadows take one, the highlights take the other, and everything between is interpolated. It is a gradient map, and it is how a page makes photographs from a dozen different sources look like they belong to one brand.

This builds the pair and shows the full ramp between them, so you can see what the mid-tones will do — which is where duotones go wrong. Two colours that look good side by side can produce a muddy middle, and the ramp is where that shows up before you apply it to anything.

The output is the code to actually use it. An SVG feComponentTransfer filter, which is the only method that does a true gradient map in a browser, and the simpler CSS blend-mode approach that gets close with far less markup. Presets cover the pairings that are known to work — the high-contrast brand duotones, the subtle two-tone tints — as a starting point rather than a menu.

Key features of the Duotone Color Generator

The ramp shown

The mid-tones are where a duotone succeeds or turns to mud, so they are visible before you apply anything.

Real SVG filter

feComponentTransfer does a true gradient map, which is the only accurate way to do this in a browser.

CSS fallback

The blend-mode approach too, for when two lines of CSS are worth more than exactness.

Live image preview

Applied to a sample photograph, because swatches tell you nothing about how a duotone reads.

Known-good presets

Pairings that work, as a starting point rather than a menu.

How to use the Duotone Color Generator

  1. 1

    Set the two colours

    One for the shadows, one for the highlights.

  2. 2

    Check the ramp

    The interpolation between them is where a duotone succeeds or goes muddy.

  3. 3

    Preview it

    The effect is applied live to a sample image so you can judge it properly.

  4. 4

    Copy the code

    An SVG filter for the accurate version, or CSS blend modes for the quick one.

Frequently asked questions

The darker one on the shadows and the lighter one on the highlights, for a duotone that reads as a photograph. Reversing them gives a negative feel, which is a deliberate effect rather than a mistake.

Reviews of the Duotone Color Generator

What people who use the Duotone Color Generator think of it. Reviews come from visitors and are posted as written.

No ratings yet

Yours would be the first.

  • 5 0 reviews rated 5 stars
  • 4 0 reviews rated 4 stars
  • 3 0 reviews rated 3 stars
  • 2 0 reviews rated 2 stars
  • 1 0 reviews rated 1 star

Write a review

Used this tool? Your rating helps the next person decide.

Your rating

Plain text only — links, email addresses and HTML are not accepted. Your name and review are shown publicly; nothing else is collected. See the privacy policy.

0 reviews

Newest first

No reviews yet

Be the first to rate the Duotone Color Generator. It takes half a minute and no account.

Write the first review

More color tools