Brand image treatments
Map product, team, event, or editorial images through brand shadow and highlight colors.
Duotone generator
Apply a two-color duotone image effect.
Upload an image or start with the demo source, choose shadow and highlight HEX colors, and preview a browser-side duotone effect on canvas. Hue Codex maps image luminance between the two colors, lets you download the rendered PNG, and exports copy-ready color notes plus a CSS approximation for documentation and production handoff.
Free color utility
Duotone
Inputs update live, exports are copy-ready, and the color math stays deterministic.
Image effect
Basic duotone
Instructions
- Upload an image file to preview the duotone effect in the browser.
- Choose a shadow color for the darker parts of the image.
- Choose a highlight color for the lighter parts of the image.
- Review the canvas preview, then download the PNG or copy the duotone CSS and colors.
How it fits
From color value to usable system.
Hue Codex treats each color as part of a larger workflow: conversion, accessibility, palette roles, CSS syntax, shareable URLs, and production exports.
Deterministic math
Color conversion follows CSS Color 4 conventions, including D50 Lab/LCH, D65 OKLab/OKLCH, and WCAG contrast thresholds.
Readable outputs
Every result is formatted for clear reading, project notes, documentation, and assistive technology.
Free sharing
Palette URLs can be bookmarked and sent without an account, making color decisions easy to revisit.
Quick overview
Hue Codex Duotone Generator is a free browser-based tool that applies a two-color image effect to a local image or demo source. It maps each pixel luminance between a shadow HEX color and highlight HEX color, previews the result on canvas, downloads the rendered PNG, and exports color values with a CSS approximation.
- Use the duotone generator to preview a two-color image treatment directly in the browser.
- The shadow color maps to darker image areas, and the highlight color maps to lighter image areas.
- Images are processed locally by the browser-side canvas workflow.
- The downloaded PNG reflects the canvas-rendered effect more directly than the CSS approximation.
- Duotone colors should still be checked for brand fit, image detail, and text overlay contrast before production use.
What the Hue Codex duotone generator does
The Hue Codex duotone generator applies a basic two-color image effect to a demo source or an uploaded local image. You choose a shadow color and a highlight color, and the preview canvas remaps the image through those two colors.
The tool is designed for quick visual exploration and handoff: preview the effect, adjust the two colors, download the rendered PNG, or copy the shadow, highlight, and CSS approximation notes from the export panel.
Duotone generator definition
A duotone generator maps an image through two colors, usually assigning one color to shadows and another color to highlights.
How the duotone effect is applied
Hue Codex reads each canvas pixel, calculates a luminance value from its red, green, and blue channels, then interpolates between the shadow color and highlight color. Darker pixels move toward the shadow color; lighter pixels move toward the highlight color.
This browser-side effect is deterministic and fast enough for quick previews, while keeping the uploaded image local to the page workflow.
| Role | What it controls | How to choose it |
|---|---|---|
| Shadow | The color assigned to darker areas of the image. | Use a deep brand color, ink color, dark neutral, or moody campaign tone. |
| Highlight | The color assigned to lighter areas of the image. | Use a bright accent, light brand color, warm highlight, or contrasting campaign tone. |
| Luminance mapping | The grayscale brightness value that chooses the mix between shadow and highlight. | Use high-contrast source images when you want more recognizable subject detail. |
| Canvas preview | The browser-rendered image effect shown inside the tool. | Use this preview and PNG export when exact visual output matters more than CSS approximation. |
PNG export and CSS approximation
The Download PNG button saves the current canvas render as huecodex-duotone.png. This is the closest export to the preview because it captures the actual pixel-mapped result.
The output panel also includes a CSS approximation using grayscale, a two-color linear gradient, and a note about mix-blend-mode or the exported PNG. CSS can approximate a duotone treatment, but the exact effect depends on markup, layering, blend mode, image content, and browser rendering.
- Use the PNG export when you need the current preview as a static image.
- Use the CSS notes when you need a starting point for a live browser effect.
- Keep the shadow and highlight HEX values in design-system or campaign documentation.
- Test text overlays and UI layers separately after choosing the duotone colors.
Best uses for a duotone generator
Duotone effects are useful when images need to feel more aligned with a brand, campaign, or interface mood. They can make mixed source photos feel cohesive without manually editing every image in a design tool.
Hero and campaign graphics
Create a consistent two-color image mood for landing pages, social graphics, and promotional assets.
Placeholder and prototype imagery
Use duotone previews to test layout direction before commissioning final imagery.
Design handoff
Copy the shadow and highlight colors plus CSS notes into documentation for teammates and production partners.
Duotone effect caveats
Duotone effects can reduce image detail, change skin tones, hide important product information, and create unexpected contrast problems for text overlays. Source image lighting and contrast strongly affect the result.
The CSS approximation is not a guaranteed match for the canvas render. Use the PNG export when you need the exact previewed pixels, and test responsive crops, high-resolution assets, image compression, and accessibility overlays before production use.
Quick answers
Duotone FAQ
What is the Hue Codex duotone generator?
Hue Codex Duotone Generator is a free browser-based tool that maps a local image or demo source through a shadow color and highlight color to create a two-color image effect.
Are uploaded images sent to a server?
No. The tool processes the selected image locally in the browser canvas workflow.
How does the duotone effect work?
Hue Codex calculates each pixel luminance and uses that brightness value to mix between the chosen shadow and highlight colors.
What does the shadow color control?
The shadow color is applied to darker areas of the image and usually sets the deepest tone of the duotone effect.
What does the highlight color control?
The highlight color is applied to lighter areas of the image and usually sets the brightest tone of the duotone effect.
Can I download the duotone image?
Yes. The Download PNG button saves the current canvas render as a PNG file.
Does the CSS approximation exactly match the canvas preview?
Not always. The CSS notes are a starting point for a live effect, while the downloaded PNG captures the browser-rendered canvas result.
Can I use duotone images behind text?
Yes, but check contrast carefully. Duotone effects can create bright or dark regions that affect text readability across different image crops.