What's the difference between desaturating and darkening?

Desaturating moves toward gray (no shift in lightness). Darkening moves toward black (no shift in chroma). Disabled buttons typically need both — desaturate ~50% and lighten ~10% to feel 'faded'.

Can I fully grayscale a color?

Yes — set saturation to 0%. The result is the gray with equivalent lightness in OKLCH (perceptually-matched gray, not the muddy gray that sRGB chains can produce).

What does hue rotation do?

Shifts the color around the hue wheel. Useful for swapping a 'red' brand color to its 'orange' or 'pink' cousin while keeping lightness and saturation constant — much faster than re-mixing.

saturate · desaturate · hue rotate · live

Adjust saturation & hue of any color

Slide saturation -100% to +100% and rotate hue ±180° from a base color. Useful for tuning brand colors and theming.

Saturate / Desaturate

Base

#3B82F6

input

Saturation

delta

Hue

0°

rotation

Out

#3b82f6

hex

input · color

Source HEX

Original

output · preview

Adjusted

#3b82f6

Sat delta

Hue rotate

0°

Quick Start

How to saturate / hue-rotate

Pick a base color, adjust saturation (-100% to +100%) and hue (±180°) live.

01
Pick a base
The starting color you want to tweak.
Colors round-trip through a normalised OKLCH representation, so manipulations (lighten, mix, contrast) preserve perceptual uniformity per CSS Color 4.
inputOKLCHCSS Color 4perceptuallive
base · colorhex · sRGB
```
#3b82f6
```
loaded · normalisedOKLCH · ready
02
Saturate or desaturate
Negative drops saturation toward grey; positive boosts it.
Format conversion handles hex, rgb(), hsl(), oklch(), color(display-p3 …) with proper gamut mapping when crossing colour spaces.
sathex · rgb · hslP3gamut-mappedlive
sat · options+25% · live
```
more vivid
```
options applied · livelive
03
Rotate hue
Spin around the color wheel — same lightness/sat, new hue.
Contrast and accessibility checks evaluate against WCAG 2.2 AA (4.5:1) and AAA (7:1) thresholds; APCA is offered when contrast is the goal.
hueWCAG 2.2APCAAA · AAAcontrast
hue · converted+45° · ready
```
new hue
```
converted · liveWCAG-aware
04
Copy result
One click for the resulting HEX.
Copy formats any swatch in the chosen syntax (#aabbcc, rgb(170 187 204), etc.); downloads emit CSS variable blocks or palette JSON.
copyclipboardCSS varspalette JSONblob
ok · copiedready · done
```
✓ Copied
```
shipped · ready to shipsuccess

Pro tips

Colour work that survives accessibility audits

Use OKLCH for manipulation

OKLCH is perceptually uniform — lightness changes look uniform. hsl() isn’t, and produces muddy mid-tones.

Test against WCAG 2.2

4.5:1 for normal text (AA), 7:1 for AAA. Use Contrast Checker before shipping.

Mind gamut clipping

P3 colours that exceed sRGB get clipped on standard displays. Choose relative colorimetric in CSS Color 4.

Colour blindness affects 8%

Use the Color Blindness simulator to check critical UI before launch.

Don’t hardcode hex

Use CSS variables. Light/dark themes become trivial when colours are tokenised.

Dark mode isn’t inverted

Don’t simply invert lightness — desaturate slightly and re-pick accents. Pure-inverted UIs look harsh.

Use Cases

When to tweak saturation or hue

Theming, refinement, brand fine-tuning.

Brand tuning

Pull a corporate color toward muted or vivid. Conversions go through OKLCH so perceptual lightness stays uniform across hues — a 50% L blue looks as bright as a 50% L yellow. HSL fakes this and produces muddy mid-tones, OKLCH solves it per CSS Color 4.

WCAG 2.2 AA

Desaturated UI

Find a calm grey-blue derived from your brand primary. WCAG 2.2 contrast is sampled live for AA (4.5:1) and AAA (7:1) — flip foreground/background to test both directions. APCA is offered when contrast itself is the goal (e.g., dataviz).

P3-aware

Highlight variant

Bump saturation slightly for emphasis states. Output covers hex, rgb(), hsl(), oklch(), and color(display-p3 …) for CSS Color 4. Drop straight into Tailwind config, CSS custom properties, or Figma without re-typing values.

perceptually-uniform

Hue variants

Shift hue ±30° to seed analogous palettes. Pair with the Contrast Checker before shipping any new theme. Catches accessibility regressions before they become bugs filed against you by users with low vision.

gamut-safe

A/B testing

Quick visual ablations on hue/saturation. Tokens drop straight into Figma variables, Tailwind config, or CSS custom properties. Theme switching becomes a single variable swap rather than a search-replace across stylesheets.

a11y-ready

Cross-tool

Match Figma's HSL sliders without leaving the browser. Gamut-aware: tools warn before you ship a P3 colour that clips on sRGB displays. Choose the appropriate fallback strategy (relative colorimetric vs perceptual) per CSS Color 4 spec.

design-token

FAQ

Frequently asked questions

What color space is used?

HSL — fast and intuitive, but not perceptually uniform.

Why does sat=-100% give grey?

Saturation 0 means no color information, just lightness.

Is the result deterministic?

Yes — same input, same output. Hue rotation wraps at 360°.

Does this preserve lightness?

Yes — only saturation and hue are affected; lightness is unchanged.

Is anything sent to a server?

No — calculations run entirely in your browser.

Suggest a tool

Something missing?

Tell us what you need. We ship the top requests every two weeks.

47 in queue·8 shipped this month

Request queued. Thanks!