Duotone Effect

Shadow color

Applied to darker areas of the image.

Highlight color

Applied to brighter areas of the image.

Balance
lower bias favors the shadow color, higher bias favors the highlight color.

Explore Our Tools

Workflow & Usage

  1. Add images
    Drag & drop, paste, or click to select JPEG/PNG/WebP files.
    Multi-upload is supported, and previews appear instantly.

  2. Pick your two duotone colors

    • Shadow Color (used for darker tones)
    • Highlight Color (used for brighter tones)
      Each color input includes:
    • A square color picker
    • A synced hex field (e.g. #ff0055)

    Not sure what to choose?
    Click Surprise Me for a fully random, aesthetically balanced two-color palette.

  3. Preview all images at once
    Every image updates live as you adjust the colors.
    Toggle individual images on/off for batch export.

  4. Fine-tune per image (optional)
    Click Edit to adjust the duotone intensity per image.
    Slider changes display instantly in a large preview.

  5. Export your results

    • Download one image at a time
    • Export all selected images as a ZIP
      Files keep their original format and clear names like:
      photo-duotone-ff5500-12ddff.jpg

Everything runs fully offline and on-device.


Perfect For

  • Branding & Identity Kits
    Make consistent duotone hero images for landing pages and social cards.

  • Posters & Graphic Design
    Create bold, high-contrast visuals with minimal effort.

  • UI Illustrations & Blog Headers
    Turn stock photos into a unified visual style.

  • Social Media Sets
    Generate multiple on-brand variations for feeds, stories, and promos.

  • Marketing Campaigns
    Match ads and banners to your brand’s color palette.


Tips for Best Results

  • Choose colors with strong contrast.
    Vibrant or complementary colors produce the cleanest duotone look.

  • Shadow vs. Highlight matters.
    Swap them for dramatically different moods.

  • Use Surprise Me to break creative blocks.
    Quickly explore color directions you wouldn’t normally pick.

  • Batch intelligently.
    Use the same colors across a set of images to create a cohesive theme.

  • Export as WebP for the smallest file sizes.

  • Pair with compression.
    After generating your graphics, run them through Image Compressor or Progressive JPEG Converter for production-ready file sizes.


How It Works

  • Luminance extraction
    Each pixel’s brightness is measured (0 = dark, 255 = bright).

  • Two-color interpolation
    Darker values move toward your Shadow color.
    Lighter values move toward your Highlight color.
    Midtones blend smoothly between the two.

  • Rendered entirely via Canvas
    No WebGL overhead, no latency, fully client-side.

  • EXIF-aware loading
    Using createImageBitmap({ imageOrientation: 'from-image' }) ensures correct orientation for photos from phones and cameras.

Frequently Asked Questions

JPEG, PNG, and WebP. Your exported files match the original format and extension.

No. Everything runs directly in your browser. No servers, no tracking, no data leaves your device.

The image’s brightness values are mapped into a two-color gradient between your Shadow and Highlight colors. Dark areas take the Shadow tone; light areas take the Highlight tone.

Yes — each color has a visual color picker plus a synced hex input. You can also tap “Surprise Me” to generate random color pairs for inspiration.

Yes. Once the page loads (or is installed as a PWA), the tool works offline because all processing is local.

Read More From Our Blog