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.