What is HSL color space?

HSL represents color as hue (0-360 degrees around a color wheel), saturation (0-100%, how vivid the color is), and lightness (0-100%, how light or dark it is).

How does hue wraparound work?

If hueMin is greater than hueMax (e.g. 350 to 10), the range is treated as wrapping past 360 back to 0, which is necessary since red sits at both ends of the hue wheel.

Do saturation and lightness wrap the same way?

No, saturation and lightness are always a simple min-to-max band with no wraparound, since they don't form a circular scale like hue does.

What happens if a pixel only partially matches the range?

A pixel must satisfy the hue range AND the saturation range AND the lightness range simultaneously to survive; failing any one of the three makes it fully transparent.

HSL Mask Generator - Mask a PNG by Hue, Saturation & Lightness

Overview

Introduction

This tool masks a PNG down to only the pixels that fall within a chosen band of hue, saturation, and lightness, entirely in your browser.

It's useful for isolating a specific color family — like all the reds, or all the muted pastel tones — regardless of exact RGB values.

What Is HSL Mask Generator?

An HSL range mask generator: it converts every pixel from RGB to HSL, then checks whether its hue, saturation, and lightness each fall inside the ranges you set.

Unlike a single exact-color match, this lets you select a whole family of related colors at once.

How HSL Mask Generator Works

Each pixel's RGB values are converted to HSL using the standard formula, then compared against your six range bounds (hue min/max, saturation min/max, lightness min/max).

Hue comparisons support wraparound so ranges spanning the 0/360 boundary (like deep reds) work correctly; saturation and lightness always use a simple min-to-max comparison. A pixel is kept only if all three checks pass.

When To Use HSL Mask Generator

Use it to isolate all sky-blue pixels in a photo, all skin-tone pixels in a portrait, or any other color family defined more naturally in HSL than in RGB.

It's also useful for building color-based selection masks for further editing or analysis.

Often used alongside Multi-color Mask Creator, Light Pixel Mask Generator and Dark Pixel Mask Generator.

Features

Advantages

Runs entirely client-side; nothing is uploaded to a server.
HSL ranges capture a whole family of visually similar colors more naturally than exact RGB matching.
Correct hue wraparound handling means red-family selections near 0/360 work as expected.

Limitations

Six separate range inputs make this less immediately intuitive than a single-color picker tool.
Very narrow ranges on noisy/compressed images can produce a sparse, speckled mask due to per-pixel color noise.

Examples

Isolate reds

Input

hueMin=350, hueMax=10, satMin=50, satMax=100, lightMin=30, lightMax=70

Output

Only saturated, mid-lightness red pixels survive

The wraparound hue range correctly spans across the 360/0 boundary.

Isolate muted grays

Input

hueMin=0, hueMax=360, satMin=0, satMax=10, lightMin=20, lightMax=80

Output

Low-saturation pixels of any hue survive, colorful pixels are removed

A full hue range combined with a tight saturation band selects near-neutral tones.

Best Practices & Notes

Best Practices

Widen the saturation/lightness ranges first to confirm the hue range alone is capturing the right pixels, then tighten.
Remember hueMin/hueMax order matters: only set hueMin greater than hueMax when you intentionally want wraparound.

Developer Notes

The RGB-to-HSL conversion and range check are pure functions over a plain Uint8ClampedArray PixelBuffer, with the hue wraparound handled by a simple branch on whether hueMin <= hueMax, keeping the whole implementation dependency-free and unit-testable in Node.

HSL Mask Generator Use Cases

Selecting all foliage-green pixels in a landscape photo for separate color grading
Isolating brand-color pixels in a logo for a color audit
Building a skin-tone mask as a starting point for retouching

Common Mistakes

Forgetting that saturation/lightness don't wrap, so setting satMin greater than satMax always matches nothing.
Setting an overly narrow lightness range and getting an empty mask because real-world colors rarely sit at extreme lightness.

Tips

Use hueMin=0, hueMax=360 to effectively disable hue filtering while still filtering by saturation/lightness.
If nothing survives, widen one range at a time to find which constraint is too strict.

HSL Mask Generator