Please bookmark this page to avoid losing your image tool!

White And Red Image Color Combiner

(Free & Supports Bulk Upload)

The result will appear here...

JavaScript Code (For Advanced Users)

You can edit the below JavaScript code to customize the image tool.

function processImage(originalImg, mode = "gradient", threshold = 128) {
    const canvas = document.createElement("canvas");
    const ctx = canvas.getContext("2d");
    
    // Set canvas dimensions to match the original image
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;
    
    // Draw the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0);
    
    // Retrieve the pixel data
    const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imgData.data;
    
    // Parse the threshold to ensure it's a number
    const thresholdValue = Number(threshold);
    
    // Process each pixel
    for (let i = 0; i < data.length; i += 4) {
        const r = data[i];
        const g = data[i + 1];
        const b = data[i + 2];
        
        // Calculate the relative luminance of the pixel
        const luma = 0.299 * r + 0.587 * g + 0.114 * b;
        
        if (mode === "solid") {
            // Hard threshold: Pure White or Pure Red
            const isWhite = luma >= thresholdValue;
            
            data[i] = 255;                   // Red is always 255 for both White and Red
            data[i + 1] = isWhite ? 255 : 0; // Green determines White (255) vs Red (0)
            data[i + 2] = isWhite ? 255 : 0; // Blue determines White (255) vs Red (0)
        } else {
            // Gradient (Duotone) mode: Smooth transition between Red (dark) and White (light)
            data[i] = 255;                   // Red channel stays maxed out
            data[i + 1] = luma;              // Green matches luma
            data[i + 2] = luma;              // Blue matches luma
        }
        // data[i + 3] (Alpha) is kept unmodified
    }
    
    // Put the modified pixel data back onto the canvas
    ctx.putImageData(imgData, 0, 0);
    
    return canvas;
}

Free Image Tool Creator

Can't find the image tool you're looking for?
Create one based on your own needs now!

Create a custom image tool

Description

The White and Red Image Color Combiner is a specialized image processing tool that transforms images into a two-tone red and white color scheme. Users can choose between a solid mode, which applies a sharp threshold to create distinct red and white areas, or a gradient mode, which produces a smooth duotone transition based on the original image’s luminance. This tool is useful for creating stylized graphic design elements, thematic social media assets, high-contrast icons, or artistic filters for photography.

JavaScript Code (For Advanced Users)

Free Image Tool Creator

Description

Leave a Reply Cancel reply

Other Image Tools: