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.