Color Tints Generator — Build Complete Color Scales Instantly
Color tints are the backbone of every professional design system. By mixing a base color with increasing amounts of white, you can generate a full scale — from a barely-there 10% tint to a near-original 90% tint — perfect for card backgrounds, hover states, badges, and section fills. This tool calculates tints using standard RGB linear interpolation and outputs hex codes ready to drop into your CSS variables or Tailwind config.
Where t ranges from 0 (original color) to 1 (pure white). In HSL, tinting means increasing Lightness toward 100% while keeping Hue and Saturation unchanged.
Tints vs Shades vs Tones
These three terms are often confused but describe distinct operations. A tint mixes a color with white — the result is lighter and less saturated in RGB but preserves Hue in HSL. A shade mixes a color with black, making it darker and richer. A tone mixes a color with grey, reducing saturation without changing value. In design systems, tints form the light end of a palette scale (Tailwind's 50–200 range) while shades form the dark end (700–950).
HSL vs RGB Tint Calculation
RGB interpolation is the simplest approach: for each channel, linearly interpolate toward 255. HSL tinting is more perceptually accurate — you increase only the Lightness component while Hue and Saturation stay fixed, which keeps the tint visually 'true' to the original color. For design tools and CSS, HSL tints are preferred because they produce more natural-looking results, especially for saturated colors like reds and greens where RGB interpolation can shift perceived hue slightly.
Using Tints in UI Design
Tints solve a common design problem: you want surfaces that feel related to your brand color without using the full saturated color on large areas (which would be overwhelming). A 5–10% tint is nearly white but distinctly 'tinted' — ideal for page section backgrounds. A 20–40% tint works well for card backgrounds, sidebar fills, and badges. A 60–80% tint is clearly colored and works for hover states, selected states, and active backgrounds. The full color (100%) is reserved for primary buttons and high-emphasis elements.
Tints in Design Systems
Every major design system uses tint scales. Tailwind CSS defines shades from 50 (lightest tint) to 900 (darkest shade) for each color. Material Design 3 generates tonal palettes with 13 steps from 0 to 100% lightness. Radix UI uses a 12-step scale with specific semantic roles for each step. When building a custom design system, a consistent tint scale ensures visual harmony — all your backgrounds, borders, hover states, and disabled states come from the same color family rather than from ad-hoc grey values.
Tint Percentage Reference
- 10% tint: Very pale, barely visible — ideal for alternating table rows and subtle page backgrounds.
- 30% tint: Lightly colored — good for card fills, chip backgrounds, and notification banners.
- 50% tint: Halfway between white and the original — strong enough to signal selection or active state.
- 70% tint: Clearly colored — suitable for disabled buttons and secondary surface fills.
- 90% tint: Near the original color — use for hover states on already-colored elements.
When to Use Tints (UI Use Cases)
- Card backgrounds: Use a 10–20% tint to distinguish card surfaces from the page background without full color.
- Badge fills: Use a 20–30% tint as the background with the full color as the badge text or border.
- Hover states: Replace pure grey hover backgrounds with an 80–90% tint for on-brand interactivity.
- Section backgrounds: Alternate between white and a 5% tint to visually separate content sections.
- Disabled states: A 70% tint of the primary color for disabled buttons communicates unavailability without losing brand identity.
Frequently Asked Questions
What is the difference between a tint and a shade?
A tint is a color mixed with white, producing a lighter result. A shade is a color mixed with black, producing a darker result. A tone is a color mixed with grey. Only tints increase Lightness while preserving Hue.
How is a tint calculated mathematically?
For each RGB channel: Tint = Channel + (255 − Channel) × t, where t is the tint ratio from 0 (original color) to 1 (pure white). In HSL, you increase the Lightness value toward 100% while keeping Hue and Saturation constant.
When should I use tints in UI design?
Tints are ideal for card backgrounds, badge fills, section backgrounds, disabled states, and hover states. A 90–95% tint of your brand color creates subtle, on-brand surfaces without competing with primary actions.
What is the difference between a tint and a pastel color?
Pastels are colors with high lightness and low saturation — a tint taken far toward white. A tint preserves the original saturation level and just increases lightness. All pastels are tints, but not all tints are pastels.
How do tints help with accessible color systems?
Using a tint as a background with the full-saturation color as foreground text typically achieves high contrast ratios. A 10% tint background with the saturated color for text generally meets WCAG AA (4.5:1) contrast standards.
What is the 60-30-10 design rule?
The 60-30-10 rule states a design should use a dominant color for 60% of surfaces, a secondary for 30%, and an accent for 10%. Tints of your primary color are perfect for the dominant 60% — they are on-brand but visually quiet.
Can I use these tints in Tailwind CSS?
Yes. Tailwind's palette uses a 50–900 scale where 50 and 100 are very light tints. Extend the config: colors: { brand: { 50: '#f0f4ff', 100: '#dce6ff', 200: '#bfcfff' } } or define them as CSS custom properties.