Saturate Color Tool
Increase the saturation of any color to make it more vivid and vibrant. Boost color intensity for eye-catching designs.
How Saturation Works
Saturation is the S value in HSL (0% = gray, 100% = fully saturated):
| Saturation | Appearance |
|---|---|
| 0% | Completely gray |
| 25% | Muted, subtle |
| 50% | Moderately vibrant |
| 75% | Vivid |
| 100% | Fully saturated |
Example: Saturating Blue
| Original | +20% | +40% |
|---|---|---|
| hsl(220, 50%, 50%) | hsl(220, 70%, 50%) | hsl(220, 90%, 50%) |
| Muted blue | More vibrant | Very vivid |
Use Cases
- Accent highlights: Make elements pop
- CTAs: Vibrant call-to-action
- Active states: Show selection
- Branding: Bold brand colors
CSS saturate() Filter
``css
.vivid {
filter: saturate(150%);
}
/* Using Sass */
$color: #6B7280;
$vibrant: saturate($color, 40%);
``
Increase saturation to make colors more eye-catching and vibrant.