How do I adjust HSL on an image online?

Upload PNG, JPEG, WebP, or GIF. Move the hue, saturation, and lightness sliders—the preview updates automatically. Download PNG when the color balance looks right.

What does each HSL slider do?

Hue rotates colors around the color wheel (−180° to +180°). Saturation makes colors more vivid (+) or muted toward gray (−). Lightness brightens (+) or darkens (−) the image without changing hue.

How is this different from adjust hue or change saturation alone?

This page combines all three HSL channels in one pass. Use /adjust-hue-image for hue-only shifts or /change-image-saturation when you only need saturation control.

Is this a hue editor and saturation changer?

Yes. This tool works as both a hue editor and saturation changer, with lightness control included so you can make full HSL adjustments in one place.

What is the difference between lightness and brightness?

Lightness here is the L channel in HSL color space—it shifts perceived luminance while keeping hue relationships. /change-image-brightness adjusts all RGB channels uniformly.

Does HSL adjustment affect transparency?

No. Alpha channels on PNG uploads are preserved; only RGB values change.

Are files uploaded to a server?

No. Processing runs locally in Canvas.

What is the maximum file size?

15 MB with a longest edge of 8192 px.

Input image

Adjust HSL online

Drop or click to upload PNG, JPEG, WebP, or GIF

Maximum file size: 15 MB

HSL adjusted

Upload an image and move the hue, saturation, and lightness sliders below—the preview updates automatically.

HSL options

Hue rotates colors on the wheel (−180° to +180°). Saturation scales color intensity (−100 to +100). Lightness shifts overall brightness (−100 to +100). All three apply from your original upload on each preview.

Hue

Saturation

Lightness

Image hue changer online

Use this hue shifter online to adjust hue, saturation, and lightness. Edit colors with a live HSL editor and download PNG in your browser.

What is HSL image adjustment?

HSL (hue, saturation, lightness) describes color in a way that matches how people edit photos: the color family (hue), intensity (saturation), and brightness perception (lightness). This page works as an image hue changer and hue editor by converting each pixel to HSL, applying slider offsets, then converting back to RGB for preview. Upload a photo, shift hue on the color wheel, saturate or desaturate, brighten or darken with lightness, and download PNG in your browser.

HSL adjustment features

Hue, saturation, and lightness controls in one online HSL editor.

Three linked sliders: Hue, saturation, and lightness with independent −range controls.
Live preview: Output refreshes as you move any slider—no apply button.
HSL color space: Per-pixel RGB→HSL→RGB for perceptually natural color edits.
Source-based preview: Each adjustment recomputes from your original upload.
Alpha preserved: Transparency on PNG uploads stays intact.
PNG download: Save as adjust-hsl-image.png.

How to adjust HSL on a photo

Steps for online hue adjustment and HSL editing.

Upload your image: Drop or click in the input panel (15 MB max).
Tune hue, saturation, and lightness: Start with small moves—e.g. +10 saturation or −5 lightness—and compare panels.
Download PNG: Save the color-corrected image for web or further editing.

Tips for HSL edits

Better results with hue adjustment, saturation, and lightness.

Adjust one channel at a time: Fix hue first, then saturation, then lightness—easier to judge each change.
Small hue moves: ±5° to ±15° often fixes white balance; large shifts create stylized looks.
Watch skin tones: Heavy saturation plus hue rotation can make faces look unnatural.
Pair with vibrance: Use /change-image-vibrance when you want saturation that protects already-vivid colors.
Reset by zeroing sliders: Set all three to 0 to return the preview to your uploaded original.
Export PNG: Avoid extra JPEG compression after color edits.

When to adjust HSL

Typical uses for combined hue, saturation, and lightness edits.

Color grading: Shift hue for a warmer or cooler look without re-exporting from a desktop editor.
Muted social graphics: Lower saturation and tweak lightness for softer feed-ready images.
Fix color cast: Rotate hue a few degrees when whites look green or magenta.
Product photos: Boost saturation on pack shots or dial it back when colors clip.
Quick lightening: Raise lightness slightly when a photo reads too dark overall.
Creative tints: Combine hue shift with desaturation for duotone-style effects.

Why use this HSL tool

Benefits of browser-based HSL adjustment.

All-in-one: Hue, saturation, and lightness in one page instead of three separate tools.
Private: Images stay on your device.
Free: Unlimited previews and downloads.
Non-destructive preview: Sliders always work from the original upload until you download.
No install: Works in modern browsers with Canvas 2D.
Honest scope: Global HSL per pixel—not selective color masking or curves.

Technical details

How HSL adjustment works here.

Color space: Standard RGB↔HSL conversion per pixel.
Hue range: −180° to +180° rotation on the hue wheel.
Saturation range: −100 to +100 as a multiplier (0 = unchanged).
Lightness range: −100 to +100 additive offset, clamped to 0–1.
Input limits: 15 MB; longest edge 8192 px.
Browser support: Chromium, Firefox, Safari with Canvas 2D.

Frequently Asked Questions

Have questions? We have answers.

More tools from Image & Conversion.

View all Image & Conversion