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 | TintAdd whiteLighter, softer ShadeAdd blackDarker ToneAdd grayMore muted
How Tinting Works
Tints blend a color with white at various percentages:
Tint LevelWhite MixResult 10%10% whiteSlightly lighter 25%25% whiteNoticeably lighter 50%50% whitePastel 75%75% whiteVery light 90%90% whiteNearly white
Example: Red Tints
TintHEXUse Case 0%#EF4444Base red 25%#F87171Lighter 50%#FCA5A5Pastel 75%#FECACAVery 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 background90% (very light red) Hover state10-25% Card background75-90% | Disabled state | 50% |
Generate tints for subtle, elegant color variations.