What this tool does
The Color Shade & Tint Generator takes any hex color you choose and produces a complete range of lighter tints and darker shades. You pick a base color and the number of steps you want on each side, and the tool instantly renders a full palette from near-white through your base color to near-black. Every swatch displays its hex code and can be copied to your clipboard with a single click. You can also copy the entire palette at once.
This tool is built for designers and developers who need cohesive color scales without reaching for a full design application. It works entirely in your browser — no account, no upload, no server round-trip.
How tints and shades work
**Tints** are created by blending your base color toward white. The formula is:
\`\`\` tint(t) = base + (255 - base) * t \`\`\`
where \`t\` ranges from a small fraction (slightly lighter) to near 1 (nearly white). Higher values of \`t\` produce paler results.
**Shades** are created by blending your base color toward black. The formula is:
\`\`\` shade(t) = base * (1 - t) \`\`\`
where \`t\` ranges from a small fraction (slightly darker) to near 1 (nearly black). Higher values of \`t\` produce deeper results.
The mixing happens independently on the red, green, and blue channels, then reassembled into a hex code. The result is a perceptually smooth ramp that works well in both dark and light UI themes.
When to use tints vs shades
**Use tints when you need:** - Light backgrounds that reference your brand color without overwhelming the page - Hover and focus states on light-mode interfaces - Subtle borders and dividers that feel on-brand - Badge and tag backgrounds that need readable dark text on top
**Use shades when you need:** - Deep button colors that communicate strong actions - Dark-mode surface colors tied to your brand hue - Text that sits on a colored background and needs contrast - Shadow and depth effects that stay within your color family
A well-designed color scale typically uses the mid-range tints for backgrounds, the base color for primary actions, and the darker shades for text or accents. Most design systems — including Tailwind CSS, Material Design, and Radix — follow exactly this pattern with 9 to 11 stops per hue.
How to use
1. Click the color picker square or type a hex value (like #3b82f6) into the Hex Code field. 2. Adjust the "Number of Steps" slider to control how many tints and shades are generated on each side of your base color. More steps give you finer gradations. 3. The palette updates instantly. Tints appear above the base color, shades below. 4. Click any color swatch to copy its hex code to your clipboard. 5. Click "Copy All Hex Codes" to copy every color in the palette as a newline-separated list, ready to paste into your CSS variables, design tokens, or style guide.
FAQs
Q: What format does this tool accept? A: The tool accepts standard hex color codes with or without the # prefix. Both shorthand (like #f00 for red) and full 6-digit hex (like #ff0000) are supported. The color picker also lets you select any color visually.
Q: How many steps should I use? A: For most design systems, 7 to 9 steps per side gives a good range without redundancy. Tailwind CSS uses 9 stops (100 through 900), while Material Design uses 10. If you just need a quick hover state, 3 or 4 steps is plenty.
Q: Are these colors accessible? A: This tool generates mathematically even steps. Accessibility contrast depends on how you pair the colors. For UI text, always check that your foreground/background combination meets WCAG 2.1 AA (contrast ratio 4.5:1 for normal text). The lightest tints work well with dark text; the darkest shades work well with white text.
Q: Can I use the output in CSS? A: Yes. Copy individual hex values directly into your CSS, or use "Copy All Hex Codes" and paste them into CSS custom properties. For example: --color-blue-100: #dbeafe; You can then reference these throughout your stylesheet or design system.
Q: How is this different from a color palette generator? A: A palette generator typically picks harmonious colors from different parts of the color wheel (complementary, triadic, etc.). This tool stays within a single hue and systematically varies only the lightness by blending toward white or black. The result is a monochromatic scale ideal for component states and design token systems.
Q: Does the tool work offline? A: All calculations happen in your browser. Once the page has loaded, no internet connection is required to generate and copy colors.
Explore Similar Tools
Explore more tools like this one:
- Color Hex to RGB Converter — Convert hex color codes to RGB, RGBA, and HSL formats... - Color Name Finder — Pick a color or enter hex/rgb, get its nearest named... - Color Wheel — Interactive color wheel with harmony rules:... - Random Color Generator — Discover unique color combinations and generate random... - Color Mixer — Blend two colors together with adjustable mixing ratio...