Professional selective color editing, without Photoshop
This tool gives you Lightroom-style HSL control directly in your browser: adjust Hue, Saturation, and Luminance globally or target specific color families like Reds, Greens, or Blues.
It’s designed for the real-world edits people do all the time:
- make skies more teal or deeper blue
- reduce neon greens in grass/foliage
- improve skin tones (usually Orange/Red bands)
- brighten/darken only certain colors
- create cinematic color grades without masks
- experiment fast with Surprise me ✨
Everything runs locally on your device. No uploads. No accounts. No waiting for a server.
What makes this different from a basic Hue/Saturation tool
A basic hue/saturation slider changes the entire image at once.
This HSL editor gives you:
- Global (Master) HSL for whole-image changes
- 8 selective color bands for targeted edits:
- Reds
- Oranges
- Yellows
- Greens
- Aquas
- Blues
- Purples
- Magentas
- Smooth blending between bands so transitions look natural
- Full-resolution export after previewing quickly
That means you can do things like:
- shift only Blues toward cyan (sky/water)
- desaturate Yellows/Greens to calm foliage
- brighten Oranges for warmer skin tones
- darken Aquas/Blues for a moody landscape look
Perfect for
Photography touch-ups
- Landscape color correction (sky, water, foliage)
- Portrait tuning (skin tone, clothing, background colors)
- Travel photos with mixed lighting colors
Creative color grading
- Cinematic teal/orange looks
- Pastel and muted color palettes
- Moody, high-contrast tones
- Stylized recolors for social posts
Content & branding
- Product photos with cleaner color emphasis
- Thumbnail color cleanup before adding text
- Brand-consistent visuals (push certain colors toward your palette)
Workflow
1. Add an image
Drag & drop, click to select, or paste a JPEG / PNG / WebP.
2. Start with Global (Master)
Use Global to set the overall direction first:
- small Hue Shift for a broad color mood change
- Saturation to increase or reduce color intensity
- Luminance to brighten/darken the overall image tone
3. Target specific colors
Click a color band (Reds, Oranges, Yellows, etc.) and fine-tune only that range.
Good first moves:
- Blues/Aquas for sky and water
- Greens/Yellows for foliage
- Oranges/Reds for skin tones and warm surfaces
4. Refine with small changes
Selective HSL is powerful. Small moves (especially ±5 to ±25) often look better than extreme values.
5. Try Surprise me ✨
Generate bold or film-like looks instantly, then dial them back manually.
6. Download full resolution
Preview is optimized for speed, but the final export renders at the original resolution and keeps the same file format.
Understanding the controls
Target Color (Global + 8 Bands)
The color circles select what range you’re editing.
- Global (Master) → affects all colors uniformly
- Reds → Magentas → selectively affects pixels by hue
Important detail: smooth transitions (no hard seams)
Real images contain colors between named bands (e.g., yellow-green, blue-purple). This tool smoothly blends adjustments between neighboring bands, so edits feel natural and continuous.
Hue Shift (−180 to +180°)
Rotates selected colors around the color wheel.
Examples:
- Blues → shift toward Aqua or Purple
- Greens → shift toward Yellow (warmer foliage) or Aqua (cooler foliage)
- Reds/Oranges → adjust skin tone warmth or stylize clothing/product colors
Practical ranges
- ±5 to ±15°: subtle correction
- ±15 to ±40°: obvious recolor, still usable
- ±40 to ±180°: stylized / creative / surreal looks
Tip: Start small on skin tones (usually the Oranges band).
Saturation (−100 to +100)
Controls how intense the selected colors are.
- Positive values make colors richer/more vivid
- Negative values mute colors toward gray
Practical ranges
- −20 to +20: natural-looking cleanup
- +20 to +45: punchier social/thumbnail look
- −45 to −100: strong desaturation for selective muted grading
Use case examples:
- reduce Green saturation to calm oversaturated foliage
- boost Blue saturation for sky/water pop
- reduce Yellow saturation to remove “muddy” warm casts in highlights
Luminance (−100 to +100)
Brightens or darkens the selected colors without globally affecting everything else.
- Positive values brighten targeted colors
- Negative values darken targeted colors
This is especially useful for separation and contrast:
- brighten Oranges for skin luminosity
- darken Blues to make skies feel deeper/dramatic
- darken Greens to add richness to foliage
- brighten Aquas for tropical water looks
Practical ranges
- −20 to +20: natural correction
- ±20 to ±45: strong but often usable
- ±45 to ±100: extreme creative looks
Reset Adjustments
Returns all sliders (Global + every band) back to zero.
Helpful when:
- a look drifted too far
- you want to compare fresh ideas quickly
- Surprise me gave you a fun result but you want to restart clean
Surprise me ✨
Creates randomized HSL grades across Global + multiple bands.
What it’s good for:
- finding unexpected color grades
- generating Pinterest-friendly visual looks
- creative exploration before fine-tuning manually
Best workflow:
- hit Surprise me ✨
- keep the parts you like
- reduce extreme sliders
- refine 1–2 bands for a polished final look
Quick recipes
These are starting points, not rigid presets. Every image is different.
1. Sky pop (clean landscape)
- Blues: Saturation +15 to +35, Luminance −10 to −30
- Aquas: Hue −10 to +10, Saturation +10 to +25
- Global: Saturation +5 to +15
Result: deeper skies and punchier water without oversaturating the whole image.
2. Foliage cleanup (less neon grass)
- Greens: Saturation −10 to −35
- Yellows: Saturation −5 to −25
- Greens: Hue −10 to +15 (shift toward warmer olive or cooler teal)
- Greens: Luminance −5 to −20 for richer depth
Result: more natural greens and fewer “radioactive” outdoor colors.
3. Better skin tones (gentle portrait tuning)
- Oranges: Saturation −5 to +15 (small moves)
- Oranges: Luminance +5 to +20
- Reds: Saturation −10 to +10 (control redness)
- Reds: Hue −5 to +5 (tiny shifts only)
Result: cleaner, more flattering skin without affecting background colors too much.
Tip: Skin tones usually live mostly in Oranges, with some influence from Reds and Yellows.
4. Teal & orange cinematic vibe
- Blues/Aquas: Hue −20 to −50 (toward teal)
- Blues/Aquas: Saturation +10 to +35
- Oranges: Saturation +5 to +20
- Oranges: Luminance +5 to +15
- Global: Saturation +5 to +12
Result: classic cinematic color contrast with warm subjects and cool shadows/backgrounds.
5. Pastel / soft social look
- Global: Saturation −10 to −30, Luminance +5 to +15
- Magentas/Purples/Blues: Hue small nudges ±5 to ±20
- Individual bands: Luminance +10 to +25
Result: softer tones with a light, airy feel.
6. Moody muted grade
- Global: Saturation −10 to −25, Luminance −5 to −15
- Blues/Greens: Luminance −10 to −30
- Yellows: Saturation −10 to −30
- Oranges: Luminance +5 to +10 (optional subject lift)
Result: darker, richer palette without crushing everything equally.
Best practices for clean results
1. Start global, then go selective
Set the overall mood first with Global, then use 1–3 bands to clean up specific colors.
2. Use small moves on skin tones
Portraits can break quickly. Keep Red/Orange Hue adjustments subtle and focus more on Luminance.
3. Use luminance for separation
If a color already looks “right” but doesn’t read clearly, adjust Luminance before Saturation.
4. Watch natural objects
Skies, grass, and skin are where over-editing is easiest to spot. If something looks fake, reduce Hue first, then Saturation.
5. Build looks with 2–4 bands max
You can edit all bands, but most strong edits come from a small number of targeted changes.
When to use this vs other color tools
Use Selective HSL Color Editor when you need:
- targeted color edits by hue range
- sky/foliage/skin tone tuning
- creative recolors without masks
- Lightroom-style HSL controls in-browser
Use Hue Adjustment when you want:
- a fast global hue rotation only
- simple recoloring across the whole image
Use Saturation Adjustment when you want:
- quick global saturation/vibrance changes
- no selective band editing
Use Color Balance / Temperature when you want:
- broad color cast correction (too warm/cool/green/magenta)
- overall white-balance-style correction before selective grading
In practice, a great workflow is:
- fix exposure / cast (if needed)
- use HSL Editor for selective color shaping
- finish with curves/levels for contrast
How it works
This tool is optimized for fast live preview and smooth color transitions.
1. Builds a 360° hue lookup table
A pre-calculated lookup table maps each hue degree (0–359) to an HSL adjustment.
2. Smoothly blends between bands
Instead of hard cutoffs, it interpolates between neighboring band settings (e.g., Blue→Purple) for natural transitions.
3. Applies Global (Master) adjustments on top
Global Hue/Saturation/Luminance is added uniformly to the hue-table baseline, so Global + selective edits stack cleanly.
4. Per-pixel HSL conversion in Canvas
For each pixel, the tool:
- converts RGB → HSL
- looks up the hue-based adjustments
- applies Hue/Saturation/Luminance shifts
- converts HSL → RGB
- preserves alpha/transparency
5. Fast preview, full-res export
- Preview uses a capped size for responsiveness
- Download re-renders at the original resolution
This gives you a smooth editing feel without sacrificing export quality.
Troubleshooting
“Nothing seems to change when I move a band slider.” That band may not be strongly present in the image (or only exists in tiny areas). Try Global first, then test adjacent bands (e.g., Aquas vs Blues, Yellows vs Greens).
“My colors look too fake / neon.” Reduce Saturation and pull back large Hue shifts. Then use Luminance to keep separation without over-coloring.
“Skin tones look strange.” Reset Reds/Oranges, then re-apply smaller adjustments. Prefer small hue moves and moderate luminance changes.
“The image looks muddy after many edits.” Too many bands may be fighting each other. Reset and rebuild using Global + 2 or 3 key bands only.
“Preview feels different from the final export.” The preview may be downscaled for speed. The final export is rendered at full resolution, so fine texture may look slightly sharper.
Glossary
- Hue (H): the color itself (red, green, blue, etc.), positioned on a color wheel.
- Saturation (S): color intensity/vividness. Low saturation approaches gray.
- Luminance (L): perceived lightness/darkness of a color in HSL.
- Selective HSL: editing H/S/L for specific hue ranges rather than the whole image.
- Band interpolation: smoothly blending settings between neighboring hue ranges to avoid visible seams.
- Global (Master): an HSL adjustment applied to all colors in the image.
