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% |