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.
Saturation and When to Raise It
Saturation is how far a colour sits from grey at the same lightness. Raising it makes a
colour more insistent, which is useful for a call to action and actively harmful for large
areas.
| Saturation | Reads as |
|---|---|
| 0–15% | Neutral — backgrounds, borders |
| 20–50% | Muted — body surfaces, secondary UI |
| 60–85% | Confident — buttons, links, brand |
| 90–100% | Loud — use for small elements only |
A fully saturated background is fatiguing within seconds and can cause visual vibration
against saturated text. Reserve the top of the range for elements smaller than a button.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.