Colors
Duotone Color Palette Generator
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.
How to use
- Choose your options above
- Click Generate
- Copy your result
Detailed instructions
- 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.
- 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.
- Click Generate to produce your duotone shadow and highlight color pairs.
- Copy the hex codes for your chosen pair's shadow color and highlight color.
- 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.
What makes a duotone pair look striking rather than flat?
Contrast between the two colors — a dark shadow and a bright highlight with real separation in lightness creates the punchy, editorial duotone look, while two colors of similar value read as muddy. A bit of hue tension (not just two shades of one colour) adds energy. The generator pairs a deep shadow with a vivid highlight so the effect pops by default.
How do I apply a duotone effect with these colors?
Map your image's shadows to the darker colour and its highlights to the brighter one — in CSS you can layer a gradient with mix-blend-mode, in Figma use two layers with blend modes, and in Photoshop a Gradient Map does it directly. The generated shadow and highlight hex values are exactly the two stops you plug into any of those tools.
You might also like
Popular tools from other categories that share themes with this one.
Try these next
More free tools from other corners of the catalog, picked by shared themes.