Color Shades & Tints Generator
Pick any color and get a complete Tailwind-style color scale (50-900). Copy as CSS variables or a Tailwind config object in one click.
Color Scale
#F5F9FF
#E2ECFE
#C4DAFC
#A7C7FB
#80AEF9
#3B82F6
#2F68C5
#234E94
#183462
#0F213E
CSS Variables
:root {
--color-brand-50: #F5F9FF;
--color-brand-100: #E2ECFE;
--color-brand-200: #C4DAFC;
--color-brand-300: #A7C7FB;
--color-brand-400: #80AEF9;
--color-brand-500: #3B82F6;
--color-brand-600: #2F68C5;
--color-brand-700: #234E94;
--color-brand-800: #183462;
--color-brand-900: #0F213E;
}Tailwind Config
{
'50': '#F5F9FF',
'100': '#E2ECFE',
'200': '#C4DAFC',
'300': '#A7C7FB',
'400': '#80AEF9',
'500': '#3B82F6',
'600': '#2F68C5',
'700': '#234E94',
'800': '#183462',
'900': '#0F213E'
}How to use Color Shades & Tints Generator
Generate a full set of tints (lighter) and shades (darker) from any base color — see 20 variations from near-white to near-black in a single view. Copy any swatch's HEX value instantly. Essential for building consistent hover states, disabled states, and background variations without guessing hex codes.
- Enter a base color in HEX, RGB, or HSL, or pick it visually.
- The tool generates 10 tints (lighter) and 10 shades (darker) from the base.
- Click any swatch to copy its HEX value.
- Use the "Export all" button to get all 20 values as a JSON or CSS list.
- Toggle the WCAG contrast overlay to see which shades meet AA contrast on white or black.
Your data never leaves your device — 100% private processing.
Tints vs. shades vs. tones
A tint adds white to the base color (increases lightness in HSL), producing progressively lighter, softer versions. A shade adds black (decreases lightness), producing darker, richer versions. A tone adds grey (reduces saturation while keeping lightness constant), producing more muted, desaturated versions. Designers typically use tints for subtle backgrounds and disabled states, shades for hover/active states and borders, and tones for text variants and placeholder colors.
Practical use in component design
A button component needs at minimum: a base color (500), a hover state (one shade darker — 600), an active/pressed state (700), a subtle background variant (100), and a border color (300). Using shades from the same hue family ensures visual consistency. Avoid arbitrarily lightening or darkening with opacity (e.g., rgba(hex, 0.5)) as this produces semi-transparent colors that look different on dark vs. light backgrounds — use explicit shade values instead.
Glossary
- Tint
- A color made lighter by mixing it with white; in HSL, achieved by increasing the lightness value.
- Shade
- A color made darker by mixing it with black; in HSL, achieved by decreasing the lightness value.
- Tone
- A color made more neutral by reducing saturation while keeping the hue and lightness constant.
- Hover state
- The visual style applied to an interactive element when the user's cursor is positioned over it.
Related reading
Frequently Asked Questions
Get weekly tool tips & updates
New tools, power-user tips, and productivity hacks — delivered free every Friday.
No spam, ever. Unsubscribe with one click.
Why use Color Shades & Tints Generator?
- Converts between HEX, RGB, HSL, HSV, and CMYK instantly
- Accessibility contrast checker built in
- Generates harmonious palette variations from a single colour
- Export-ready CSS variables and design tokens
Common use cases
- Pick brand colours that meet WCAG accessibility standards
- Generate a complementary palette from a logo colour
- Convert Figma HEX codes to CSS rgb() for developers
- Create a gradient from two brand colours
- Verify sufficient contrast for text on coloured backgrounds
Related Color & Design
Color Picker & Converter
Pick a color and instantly convert between HEX, RGB, HSL, HSB, and CMYK. Generate tints, shades, and color palettes.
Color Palette Generator
Generate beautiful harmonious color palettes online. Choose from complementary, analogous, triadic, and monochromatic schemes. Free color scheme creator.
CSS Gradient Generator
Create beautiful CSS linear, radial, and conic gradients online. Get the CSS code instantly with a live preview.
Color Contrast Checker
Check color contrast ratio for WCAG AA and AAA accessibility compliance. See if your text and background colors meet accessibility standards.
Color Converter
Convert colors between HEX, RGB, HSL, HSV, and CMYK formats instantly. Paste any color format and get all others with one click.
Image Color Extractor
Extract dominant colors from any image. Upload a photo and instantly get the top colors as HEX and RGB values. Free online color palette extractor.
Explore all Color & Design.