Skip to main content
Back to Colors generators

Colors

Duotone Color Palette Generator

Used by developers, writers, and creators worldwide.

A duotone color palette generator removes the guesswork from finding shadow-and-highlight pairs that actually hold up on a real image. Duotone effects replace dark tones with one color and light tones with another — the technique behind Spotify's iconic marketing look, editorial concert posters, and bold brand identities. Getting the pairing right matters: low contrast makes the result muddy, and matching hues flatten the image entirely. This generator produces ready-to-use pairs across five style modes — Bold & Vibrant, Cool & Calm, Warm & Energetic, Dark & Moody, and Soft & Pastel. Each result gives you a shadow color and a highlight color. You can paste the hex codes into Photoshop's Duotone mode, an SVG feColorMatrix filter, or a Figma blend-layer setup immediately.

Loading usage…

Free forever — no account required

How to use

  1. Choose your options above
  2. Click Generate
  3. Copy your result

Detailed instructions

  1. Select a Duotone Style from the dropdown to target a specific mood, such as Bold & Vibrant for high-impact designs or Soft & Pastel for editorial work.
  2. Set the Number of Pairs to how many options you want to compare — use 4 for a quick pick or 8 when exploring a range.
  3. Click Generate to produce your duotone shadow and highlight color pairs.
  4. Copy the hex codes for your chosen pair's shadow color and highlight color.
  5. Paste the hex values into your design tool, CSS filter, or Photoshop Duotone mode to apply the effect immediately.

Use Cases

  • •Applying a Spotify-style Bold & Vibrant duotone filter to artist or event photography for social campaigns
  • •Setting Ink 1 and Ink 2 hex values in Photoshop's Duotone mode under Image > Mode
  • •Building an SVG feColorMatrix filter for a web hero image using the shadow and highlight hex codes directly
  • •Choosing a Dark & Moody pair for album artwork or a concert poster with a specific tonal atmosphere
  • •Testing Soft & Pastel duotone overlays on product photography before committing to a campaign palette

Tips

  • →When using Bold & Vibrant pairs on portraits, test the shadow color as your background fill to extend the duotone effect beyond the photo frame.
  • →Soft & Pastel styles work better with high-key (bright, low-contrast) photography; Bold pairs need high-contrast originals to show their full effect.
  • →In Photoshop, swap the shadow and highlight assignments to get an inverted version — sometimes the reversed pair is more interesting than the original.
  • →For screen printing or risograph work, check that your shadow and highlight colors are available as standard Pantone or spot colors before finalizing.
  • →Pair a warm highlight with a cool shadow (or vice versa) rather than two warm or two cool tones — cross-temperature pairs create more visual tension and depth.
  • →If a generated pair looks too similar in the generator preview, check the hex codes: pairs where lightness values are close (under 30 points apart in HSL) rarely produce readable duotones on complex images.

FAQ

how do I apply a duotone effect in CSS using these hex values

The most reliable approach uses an SVG filter with two feColorMatrix elements chained together — one shifting toward your shadow color and one toward your highlight. Reference the filter with filter: url(#duotone) on an img element. CSS-only chains using sepia(), hue-rotate(), and saturate() can approximate the look but give you less color accuracy.

are duotone color effects hard to replicate in Figma

Figma has no native duotone mode, but you can get close by placing a colored rectangle over your image set to Multiply blend mode for the shadow tone, and a second rectangle set to Screen or Color Dodge for the highlight. Paste the hex values from this generator straight into those fill swatches — plugins like Duotone also accept hex input and automate the layer setup.

what makes a duotone pair look striking vs flat

Strong tonal contrast between the shadow and highlight colors is the key factor — a deep navy or black paired with a vivid coral or cyan reads clearly on almost any photo. Pairing two midtone colors kills the effect because there's not enough separation for the two colors to show distinctly. Images with wide tonal range, like high-contrast portraits or silhouettes, give the clearest results.