HSL Adjuster
Tune hue, saturation, and lightness from a base HEX.
Success
Palette ready.
HSL Adjuster starts from a HEX color and applies hue, saturation, and lightness offsets to explore variants for themes and components.
How it works
Provide hex|hOffset|sOffset|lOffset. Offsets shift HSL channels, then the tool outputs HEX, RGB, and HSL for the result.
Benefits
- Quick HSL nudges
- Multi-format output
- Local exploration
- Useful for theme variants
Use cases
- Derive hover states
- Explore darker sidebar tones
- Tune saturation for charts
- Teach HSL mentally
Best practices
- Change one channel at a time
- Recheck contrast after lightness shifts
- Keep offsets documented
- Prefer design tokens once you settle
Common mistakes
- Huge hue jumps without intent
- Crushing saturation to zero accidentally
- Ignoring gamut clipping in displays
- Editing production tokens without review
Privacy
HSL Adjuster processes colors locally in your browser. ToolHub does not receive your inputs unless you enable on-device history.
Frequently asked questions
- What units are the offsets?
- Hue is degrees; saturation and lightness offsets are percentage points.
- Does HSL Adjuster upload colors?
- No. Adjustments run in your browser.
- Why use pipes in the input?
- The compact hex|h|s|l form keeps examples and history simple.
- Can I type HSL directly?
- Start from HEX here, or convert with Color Converter first.
- Will extreme lightness stay in gamut?
- Values are clamped to valid HSL ranges before converting back to RGB.
Related tools
Color Converter
color
Convert HEX, RGB, and HSL locally with a live swatch.
- hex
- rgb
- hsl
- color
Tint Shade Generator
color
Generate tints and shades from a base HEX color.
- color
- palette
- design
Color Mixer
color
Blend two HEX colors with a mix ratio.
- color
- palette
- design
Complementary Color Finder
color
Find complementary and split-complementary colors.
- color
- palette
- design
CSS Color Name Converter
color
Map CSS color names to HEX and back.
- color
- palette
- design
Gradient Generator
color
Build CSS linear-gradient strings with a live preview.
- color
- palette
- design