Desaturate Color Tool
Decrease the saturation of any color to create more muted, subtle tones. Perfect for professional, elegant, or background colors.
How Desaturation Works
Desaturation reduces the S value in HSL toward gray:
| Original | -25% | -50% | -100% |
|---|---|---|---|
| Vibrant | Muted | Subtle | Grayscale |
Example: Desaturating Blue
| Saturation | HEX | Appearance |
|---|---|---|
| 100% | #0066FF | Vivid blue |
| 70% | #2970CF | Somewhat muted |
| 40% | #5279A0 | Professional |
| 0% | #808080 | Gray |
Use Cases
- Disabled states: Gray = inactive
- Backgrounds: Subtle, non-distracting
- Professional: Muted corporate tones
- Vintage: Faded aesthetic
CSS desaturate/grayscale
``css
.muted {
filter: saturate(50%);
}
.grayscale {
filter: grayscale(100%);
}
/* Using Sass */
$vibrant: #FF6B6B;
$muted: desaturate($vibrant, 40%);
`
Desaturate colors for subtle, professional, or disabled states.
Desaturating for Disabled and Muted States
Desaturation is the standard visual language for "not available": disabled buttons,
inactive tabs, past events.
`css
.is-disabled {
filter: saturate(0.3);
opacity: 0.6;
}
`
Two cautions:
Desaturation alone is not an accessible state signal. A colourblind or low-vision user
may not perceive it. Pair it with an explicit cue — the disabled attribute, reduced
opacity, a changed cursor.
- Fully desaturating to greyscale loses the hue relationship entirely. 20–40% remaining
saturation usually reads better than 0%.A Full Ramp From This Colour
Design systems settle on a 50–900 scale because it covers backgrounds, borders, text and
states without anyone reaching outside the palette. Mixing toward white and black rather
than adjusting HSL lightness keeps more of the hue's character:
Step Colour Contrast on white Safe for 50 #F5F9FF 1.06:1 backgrounds and fills 100 #EBF3FE 1.12:1 backgrounds and fills 200 #CEE0FD 1.34:1 backgrounds and fills 300 #B1CDFB 1.62:1 backgrounds and fills 400 #76A8F9 2.40:1 backgrounds and fills 500 #3B82F6 3.68:1 large text, borders 600 #326FD1 4.85:1 body text on white 700 #295BAC 6.59:1 body text on white 800 #204887 8.98:1 body text on white 900 #183462 12.31:1 body text on white
The contrast column is the one that decides usage. Steps below 3:1 cannot carry text at
any size and belong in fills and dividers; steps at 4.5:1 and above are safe for body copy.Adjusting It
Base colour in HSL is hsl(217, 91%, 60%). Two useful moves:
`css
/* +10% lightness, same hue */
--lighter: #6da2f8;
/* −10% lightness */
--darker: #0b64f4;
`
Raising lightness also drops perceived saturation, so a lightened colour reads greyer than
its numbers suggest. Adding 5–10% saturation alongside every 20% of lightness keeps the ramp
looking like one hue rather than a fade to grey.
The 148 CSS Colour Keywords
CSS defines a fixed list — 148 names covering 147 distinct colours, since gray and
grey (and aqua/cyan, magenta/fuchsia) are aliases.
| Name | HEX | Note |
|---|---|---|
red | #FF0000 | Full intensity |
green | #008000 | Half intensity — lime is #00FF00 |
blue | #0000FF | Full intensity |
purple | #800080 | Half intensity |
gray / grey | #808080 | Both spellings valid |
aqua / cyan | #00FFFF | Identical |
rebeccapurple | #663399 | Added in 2014 in memory of Rebecca Meyer |
The green trap catches people repeatedly: the keyword is the dark VGA green, and the
bright one everybody pictures is lime.Why Not to Use Them in Production
Named colours are excellent for prototyping and debugging — border: 1px solid red while
you find a layout problem — and poor as a design system.
You get 148 and no more. Any brand colour needs a hex value anyway.They carry no semantics.tomatotells a reader nothing about what it is for;
--color-danger does.
There are no ramps.darkblueis not a computed shade ofblue— it is an
unrelated fixed value, so the two do not form a scale.Define tokens instead:
`css
:root {
--color-danger: #dc2626;
--color-danger-bg: #fef2f2;
}
``
One place to change, a name that survives a rebrand, and a ramp you control.