Duotone Palette Builder
Pair shadow and highlight colors for duotone treatments.
Pair colors for duotone
A duotone treatment maps an image or design to two colors — one for shadows, one for highlights — for a bold, cohesive look. Choosing a pair that reads well is the hard part. This builder helps you select a shadow and highlight color and preview them together.
Seeing the two colors as a pair, rather than in isolation, tells you whether the duotone will feel striking or muddy. Lock in a combination and copy the hex values to apply the effect in CSS, a design tool, or an image editor.
Choosing the pair
A duotone reads best when the two colors differ clearly in lightness, so shadows and highlights stay distinct. The palette is built in your browser and never uploaded.
Frequently asked questions
What does the duotone palette builder do?
It pairs a shadow color and highlight color and returns CSS variables plus a preview gradient.
How do I apply the duotone to an image?
Place the .duotone-overlay element over a grayscale image and set mix-blend-mode: multiply or color on it. The shadow color tints the darks and the highlight color the lights.
Which colors make a strong duotone?
A dark shadow and a light highlight with very different lightness, such as navy and coral. Two mid-tones of similar lightness flatten the image.
Why output CSS variables?
So one pair of --duotone-shadow and --duotone-highlight values can style every overlay on the site, and changing the palette means editing two lines.
Related tools
Need a polished visual system? Bushe can help turn rough ideas into production-ready design.