Color Shades & Tints Generator
Enter a base color and instantly get a ramp of lighter tints and darker shades, each with a copyable HEX code — perfect for building consistent palettes.
Lighter tints (toward white) and darker shades (toward black) of your base color.
Tints (lighter)
Base
Shades (darker)
Runs entirely in your browser.
Quick answer
Tints are made by mixing a color toward white, and shades by mixing it toward black. This tool takes your base color and produces five evenly-spaced tints and five shades, each shown as a swatch with its HEX code. It is the fast way to build hover states, backgrounds, and accessible variants from one starting color, all in your browser.
Formula & method
Each tint blends the base RGB toward white (255, 255, 255) and each shade blends it toward black (0, 0, 0) at evenly-spaced fractions. For example, a 50% tint averages each base channel with 255. The blended channels are converted back to a HEX code for every step, giving a smooth light-to-dark ramp around your base color.
Examples
- Input
- Base #3b82f6
- Result
- 5 lighter tints + base + 5 darker shades
- Why
- A full ramp from a single brand color for buttons, hovers, and backgrounds.
- Input
- Pick a darker shade
- Result
- A slightly darker HEX
- Why
- Use the first shade as a button's hover color so it stays on-brand.
- Input
- Pick a light tint
- Result
- A pale HEX of the same hue
- Why
- A near-white tint works as a section background that matches the accent color.
When to use this tool
- Building a consistent color scale (hover, active, disabled) from one brand color.
- Creating matching light backgrounds and dark accents from a single hue.
- Designing charts or tags that need several related shades.
Common mistakes
- Confusing tints and shades — tints add white (lighter), shades add black (darker).
- Assuming every shade has enough contrast for text; check pale tints against white with a contrast checker.
- Using too many near-identical steps; a few well-spaced tints and shades usually read more clearly than a long ramp.
Frequently asked questions
What is the difference between a tint and a shade?
A tint is a color mixed with white, making it lighter, while a shade is mixed with black, making it darker. This tool generates both from your base color.
How are the steps calculated?
Each step blends the base color's red, green, and blue channels a fixed fraction of the way toward white (for tints) or black (for shades), producing an even ramp.
Can I copy the colors?
Yes. Every swatch shows its HEX code with a copy button, so you can paste any tint or shade straight into your CSS or design tool.
Will the lightest tints be readable as text?
Pale tints often fail contrast for text on white. Use them for backgrounds and check any text/background pair with a color contrast checker.
Is this the same as adjusting lightness in HSL?
It is similar but not identical. Mixing toward white or black changes saturation slightly as well, which often looks more natural than only moving HSL lightness.
Is anything uploaded?
No. The palette is generated entirely in your browser.
Sources & references
External references open in a new tab. We are independent and not affiliated with these organizations.
- ✓ Free to use
- ✓ No sign-up required
- ✓ Runs entirely in your browser — nothing is uploaded.
- ✓ Formula and method shown above
Provided “as is” for general information only — results may be inaccurate, so verify before you rely on them. No warranty; use at your own risk.
Built and reviewed by HIFreeTools against the formula shown above and any authoritative references cited on this page. See our methodology and editorial standards.
Related tools
- Color PickerColor
- Color ConverterColor
- Random Color GeneratorColor
- HEX to RGB ConverterColor
- Color Contrast CheckerColor
- CSS Gradient GeneratorDeveloper
Embed this tool on your site
Free to embed, no sign-up. Paste this code where you want the color shades & tints generator to appear: