Create Two Color Image
Create two-color patterns - stripes (H/V/diagonal), checkerboard, dots, hexagons, linear/radial gradient. Configurable scale + angle. Free, client-side.
Create patterned images with two colors. 9 patterns: horizontal / vertical / diagonal stripes, checkerboard, dots, hexagons, linear/radial gradient, half-split. Configurable scale + angle. PNG/WebP/JPEG.
How to Use Create Two Color Image
- Set width / height (1-8192 px each).
- Pick pattern. 9 options: horizontal stripes, vertical stripes, diagonal stripes (with angle slider), checkerboard, dots, hexagons, linear gradient (with angle), radial gradient, half-split.
- Pick two colors via picker or hex input (synced both ways). Click Swap colors to flip.
- Adjust scale slider. Stripe width / checkerboard square size / dot radius+spacing / hexagon size - all now configurable (the original hardcoded everything to 20px).
- Pick output format and quality. Filename includes pattern + dimensions + both hex colors (e.g.,
two-color-checkerboard-800x600-4f46e5-ffffff.png).
Frequently Asked Questions
What are two-color (duotone) images actually used for?
Mostly branding and visual consistency. Mapping every photo to the same two brand colors makes a grid of very different photos look like one family, which is why music streaming promos, conference sites, and editorial covers use the technique heavily. It also has practical wins: duotones compress well, stay readable as small thumbnails, and let you put light text over busy photos without a separate overlay layer.
What’s the difference between the stripe patterns?
Horizontal stripes = alternating rows. Vertical stripes = alternating columns. Diagonal stripes = rotated by angle slider (default 45°, range 0-180°). All three use the same scale slider for band width.
What does the scale slider control?
Mode-specific. For stripes: band width in pixels. For checkerboard: square side length. For dots: dot radius (and spacing = scale). For hexagons: hex cell radius. Gradients ignore scale (just use full image).
What does the angle slider control?
For diagonal stripes: rotation in degrees. 0° = vertical, 90° = horizontal, 45° = classic diagonal. For linear gradient: gradient direction (0° = left-to-right). For other patterns, angle is ignored (and the slider is hidden).
Can I make the colors transparent?
Not via this tool – the color pickers don’t expose alpha. If you need a pattern with one transparent color, generate against a contrasting color, download, then process in an image editor. Or use the “Create Transparent Image” tool for a fully-transparent base.
Why is the hex input separate from the picker?
The picker is visual; the hex lets you paste an exact brand color (for example an exact brand color like #4f46e5). They stay in sync – edit either, the other updates.
Why use WebP or JPEG instead of PNG?
PNG is lossless and ideal for sharp-edged patterns (stripes, checkerboard, hexagons). WebP gives 30-50% smaller files for those same sharp patterns. JPEG is bad for sharp edges due to DCT ringing – but excellent for gradients (the smooth color transitions compress beautifully). Match format to pattern type.
What’s in the download filename?
Format: two-color-{pattern}-{w}x{h}-{c1hex}-{c2hex}.{ext}.
Is anything uploaded?
No. All image processing happens through the Canvas API inside your browser – nothing is sent to a server, logged, or stored, and the tool keeps working offline once the page has loaded.
Can I use this commercially?
Yes. The file is yours. Patterns of this complexity aren’t copyrightable; the file is your creation.