Color Tints Generator
Generate tints of any color by mixing with white. Create lighter versions perfect for backgrounds, highlights, and subtle accents.
Tints vs Shades vs Tones
| Term | Method | Result |
|---|---|---|
| Tint | Add white | Lighter, softer |
| Shade | Add black | Darker |
| Tone | Add gray | More muted |
How Tinting Works
Tints blend a color with white at various percentages:
| Tint Level | White Mix | Result |
|---|---|---|
| 10% | 10% white | Slightly lighter |
| 25% | 25% white | Noticeably lighter |
| 50% | 50% white | Pastel |
| 75% | 75% white | Very light |
| 90% | 90% white | Nearly white |
Example: Red Tints
| Tint | HEX | Use Case |
|---|---|---|
| 0% | #EF4444 | Base red |
| 25% | #F87171 | Lighter |
| 50% | #FCA5A5 | Pastel |
| 75% | #FECACA | Very light |
| 90% | #FEE2E2 | Background |
CSS Usage
``css
/* Using CSS color-mix() */
.tint-25 {
background: color-mix(in srgb, #EF4444, white 25%);
}
.tint-50 {
background: color-mix(in srgb, #EF4444, white 50%);
}
/* Sass tint function */
$base: #EF4444;
$tint: mix(white, $base, 50%);
`
Use Cases
| Application | Tint Level |
|---|---|
| Error background | 90% (very light red) |
| Hover state | 10-25% |
| Card background | 75-90% |
| Disabled state | 50% |
Generate tints for subtle, elegant color variations.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.