Please bookmark this page to avoid losing your image tool!

Image Hue Adjustment Tool

(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, hueDegrees = 0) {
    // Create a new canvas element
    const canvas = document.createElement('canvas');

    // Ensure the original image has dimensions. If not, return an empty canvas.
    // This can happen if the image isn't loaded yet or has an invalid source.
    const imgWidth = originalImg.naturalWidth;
    const imgHeight = originalImg.naturalHeight;

    if (imgWidth === 0 || imgHeight === 0) {
        console.warn("Original image has zero width or height. Returning an empty canvas.");
        // Set canvas to 0 dimensions as well, or a small default
        canvas.width = 0;
        canvas.height = 0;
        return canvas;
    }
    
    // Set canvas dimensions to match the original image
    canvas.width = imgWidth;
    canvas.height = imgHeight;

    // Get the 2D rendering context
    const ctx = canvas.getContext('2d');

    if (!ctx) {
        // This should ideally not happen for '2d' context
        console.error("Could not get 2D rendering context.");
        // Return the canvas, which might be blank or improperly configured
        return canvas;
    }

    // Convert hueDegrees parameter to a number.
    // If it's a string like "90", Number("90") becomes 90.
    // If it's already a number, Number(90) is 90.
    // If it's an invalid string like "abc", Number("abc") becomes NaN.
    // CSS filter `hue-rotate(NaNdeg)` typically defaults to `hue-rotate(0deg)`.
    const numericHue = Number(hueDegrees);

    // Apply the hue-rotate filter
    // The filter property syntax is similar to CSS filters.
    ctx.filter = `hue-rotate(${numericHue}deg)`;

    // Draw the original image onto the canvas.
    // The filter will be applied to this drawing operation.
    ctx.drawImage(originalImg, 0, 0, imgWidth, imgHeight);

    // The canvas now contains the hue-adjusted image.
    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 Image Hue Adjustment Tool allows users to modify the color hue of their images by rotating the hues by a specified degree. This functionality is useful for various applications, such as enhancing images for artistic purposes, correcting color imbalances, or creating unique visual effects. By adjusting the hue, users can achieve different moods and aesthetics in their images, making this tool valuable for photographers, designers, and social media users looking to improve their visuals.