HSL Analysis

Generate HSL Mask

Filter pixels by Hue, Saturation, and Lightness ranges. Create precise masks based on color properties.

Drop your images here

Supports PNG, JPG, WebP, AVIF and more. Process hundreds of files at once.

Try with Examples

Visualization Studio

Image List

Preview	Image Info	Status	Action

Review Results

1 / 1

HSL Mask Options

Hue Range (H) (0° - 360°)

0°=Red, 60°=Yellow, 120°=Green, 180°=Cyan, 240°=Blue, 300°=Magenta.

Saturation Range (S) (0% - 100%)

Lightness Range (L) (0% - 100%)

Mask Visualization

Create Two-color Mask Show HSL pixels and non-HSL pixels as two solid colors.

Mask Matched HSL Pixels Color only the matching HSL pixels. (Non‑HSL pixels not affected.)

Mask Non-matched HSL Pixels Color only the non-matching HSL pixels. (HSL pixels not affected.)

HSL Pixel Color

Non-HSL Color

Preserve Alpha Channel Keep transparent pixels unchanged in the mask.

Mask Analysis

Unknown

Select an image to analyze

Why Choose Batch HSL Mask Generator?

The most precise way to isolate colors and create complex masks directly in your browser using Hue, Saturation, and Lightness.

Precise HSL Control

Fine-tune your selection with exact ranges for Hue (0-360°), Saturation (0-100%), and Lightness (0-100%) for surgical precision.

Multiple View Modes

Choose between Two-color masks, Masking matched pixels, or Masking unmatched pixels to suit your specific workflow.

Alpha Preservation

Optionally maintain original transparency levels, ensuring your masks integrate perfectly with your existing image assets.

How to Generate HSL Masks in 3 Steps

Upload Your Images

Drag and drop one or multiple images. All processing happens locally in your browser.

Adjust HSL Ranges

Use the sliders to define Hue, Saturation, and Lightness ranges. See real-time updates on the canvas.

Download Masks

Export individual masks or download all processed images as a convenient ZIP file.

Frequently Asked Questions

What is HSL and why use it for masking?

HSL stands for Hue, Saturation, and Lightness. It is often more intuitive than RGB for color selection because it separates the base color (Hue) from its intensity (Saturation) and brightness (Lightness).

Can I process multiple images at once?

Yes! You can upload hundreds of images at once. The tool will apply your HSL settings to all of them, and you can download the results as a single ZIP file.

Are my images uploaded to any server?

No. All image processing is done locally in your browser using JavaScript and Canvas API. Your files never leave your computer, ensuring total privacy.