Split Duotone Maker – Divide Photos into Two Colors Free

A split duotone combines two operations: spatial splitting and color tinting. Understanding both helps you get better results.

1. Pixel position. For each pixel, the tool checks whether it belongs to the first half (left or top) or the second half (right or bottom). The split position slider controls where that boundary sits — 50% is the middle, 25% puts more of the image in the second color, 75% puts more in the first.
2. Luminance. Each pixel's brightness is computed, optionally desaturated by the "Desaturate before tint" slider, and contrast-adjusted. This brightness value becomes the amount of the tint color to mix with black — so bright areas stay bright and dark areas stay dark.
3. Tint color per half. Pixels in the first half are tinted with the first color; pixels in the second half are tinted with the second color. The "Color strength" slider controls how heavily the color takes over versus the original photo.
4. Blend (optional). If the blend width is greater than 0, the tool applies a smooth gradient across the split line — pixels near the boundary mix the two colors proportionally. This softens the edge and can look more organic than a hard line.

Because the math runs in a canvas getImageData() loop, everything happens locally in your browser. No image is uploaded, no resolution is lost, and the result updates in real time as you drag the sliders.

Split duotone — sometimes called "split-tone", "two-tone", or "half-split" — is a design technique where a single image is divided into two halves, each tinted a different color. It is a close cousin of classic duotone (which blends two colors across the whole image based on luminance) but the effect is much more graphic: instead of a smooth gradient, you get a clear visual boundary.

Split Duotone vs. Regular Duotone

• Regular duotone: a smooth gradient. Every pixel's brightness maps to a blend between two colors. Shadow and highlight are continuous across the image.
• Split duotone: a spatial division. The left or top half is tinted one color, the right or bottom half is tinted another. A boundary line separates them.
• Split duotone with blend: a hybrid. There is still a boundary, but the transition is smooth. This gives the best of both — you can still see the split, but the edge is soft.

When to Use a Hard Edge vs. a Blend

A hard edge is more graphic and poster-like — great for album art, bold marketing graphics, and layouts where you want the split to be obvious. A blend is more cinematic — useful for editorial covers, music visuals, or any time you want the split to be present but not the main event. A good rule of thumb: if the image is the background, use a blend; if the split IS the design, use a hard edge.

Split Direction Matters

Vertical splits (left/right) feel formal and architectural — they read left-to-right, which makes them natural for text-heavy layouts. Horizontal splits (top/bottom) feel more like a horizon, which gives landscape photos a natural anchor point. For portraits, vertical splits are usually stronger because faces align with the vertical axis. For landscapes and product photos, horizontal splits often look better.

Choosing the Split Position

The middle (50%) is the safest choice. Moving the split to 30% or 70% creates a more dynamic composition but risks looking accidental. If you move the split, put it where a natural line already exists in the photo — a horizon, an architectural edge, a shoulder. The eye reads intentionality when the split aligns with something in the image.

Choosing the Two Colors

The strongest split pairs have:

• Clearly different brightness. If both halves are equally dark or equally light, the split line disappears. Aim for at least 40% difference in perceived lightness.
• Different temperature or a shared family. Warm + cool is dramatic (coral + teal); two cool tones feel calm (navy + cyan); two warm tones feel energetic (amber + crimson).
• Brand relevance. If you're designing for a brand, map the two colors to the brand's primary and accent — it makes the split feel intentional.

Practical Tips

• Start from a well-lit photo. The split amplifies whatever contrast the source has. If your source is flat, push the contrast slider up before tinting.
• Watch where faces land. If a face crosses the split line, it can look strange. Either move the split behind the face, or place it right down the middle for symmetry.
• Use color strength strategically. At 100% strength, the photo is almost flat tint. At 50–70%, you keep some of the original color and detail. Most designs look best between 60% and 80%.
• Compress the result. Split duotones have large areas of flat color, which compress very well. Run the final image through the Image Compressor for a big file-size win.
• Combine with duotone. If you want a two-color image where both colors blend smoothly across the whole image, use the Duotone Photo Maker instead.

Split Duotone for Web and Social

Save as JPG for social posts, blog headers, and marketing assets — small and universally supported. Save as PNG when you need transparency around the image. Save as WebP for modern websites. Pair the finished split with a compression pass (or the AVIF Converter for hero images) to keep page weight low.

The Math Behind the Split

For each pixel at position (x, y):

t = vertical ? x / W : y / H                // position ratio 0–1
half = t < splitPos ? first : second         // which color applies
lum = luminance(pixel)                       // 0–1 after desat + contrast
tinted = tintColor(half) * lum * strength + pixel * (1 - strength)

The blend width replaces the hard t < splitPos with a smooth step function centered at splitPos. Everything runs in a Uint8ClampedArray for speed, so even large photos process in milliseconds.