Web UtilitiesColor Tint & Shade Generator
Generate tints, shades, and tones from any base color. Create Tailwind-style 50–950 color scales, copy CSS variables, and build complete design system palettes instantly.
hsl(217, 91%, 60%)
210
Base Color
#3B82F6
CSS Custom Properties
:root {
--tint-1: #DFEAFD;
--tint-2: #BED6FC;
--tint-3: #9EC1FA;
--tint-4: #7DADF9;
--tint-5: #5D98F7;
--color-base: #3B82F6;
--shade-1: #0B64F4;
--shade-2: #0950C3;
--shade-3: #073C92;
--shade-4: #052861;
--shade-5: #021431;
/* Tones */
--tone-1: #4C87E6;
--tone-2: #5B8BD7;
--tone-3: #6B8EC7;
--tone-4: #7A92B8;
--tone-5: #8A95A8;
}Tints
#DFEAFD
#BED6FC
#9EC1FA
#7DADF9
#5D98F7
Shades
Base#3B82F6
#0B64F4
#0950C3
#073C92
#052861
#021431
Tones
#4C87E6
#5B8BD7
#6B8EC7
#7A92B8
#8A95A8
Click any swatch to copy its HEX value
Related Tools
About Color Tint & Shade Generator
How It Works
- Enter or pick any base color using the color picker or HEX input.
- Choose the number of steps (tints and shades to generate on each side).
- Switch between Classic mode (tints, shades, tones) and Tailwind mode (50–950 stops).
- Click any swatch to instantly copy its HEX value to the clipboard.
- Use Copy All as CSS to get a complete palette as CSS custom properties.
Common Use Cases
- Building design system color palettes for UI frameworks.
- Generating Tailwind CSS-compatible color scales for custom themes.
- Creating accessible color ramps that maintain brand identity.
- Exploring how a brand color looks across all lightness levels.
- Producing color tokens for design handoffs in Figma or Storybook.
Frequently Asked Questions
What is a color tint?
A tint is created by adding white to a base color, making it lighter and less saturated. Tints retain the original hue but increase in lightness, producing pastel-like variations ideal for backgrounds, hover states, and subtle UI accents.
What is a color shade?
A shade is created by adding black to a base color, making it darker. Shades keep the original hue while reducing lightness, and are commonly used for text colors, borders, pressed states, and deep background areas.
What is a color tone?
A tone is created by adding gray (mixing black and white) to a base color, which reduces its saturation without significantly changing lightness. Tones produce more muted, sophisticated color variations suited to neutral UI components.
What is the Tailwind-style palette mode?
The Tailwind mode generates 11 stops labeled 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, and 950 — mirroring the naming convention used by Tailwind CSS. This makes it easy to create custom color families that drop directly into a tailwind.config.js file.
How do I use the generated CSS variables?
The tool outputs a :root { } block with CSS custom properties for every generated color. Copy them into your global stylesheet and reference any color with var(--tint-1), var(--shade-3), var(--color-500), etc. This approach works in every modern browser.
How many steps can I generate?
In Classic mode you can choose between 2 and 10 steps for tints and shades. Each step evenly distributes the lightness between your base color and pure white (tints) or pure black (shades). Tailwind mode always produces the fixed 11-stop scale.
Can I copy individual color values?
Yes. Click any color swatch to instantly copy its HEX value to the clipboard. A green check mark briefly confirms the copy. You can also use the Copy All as CSS button to grab the entire palette as CSS custom properties in one click.
What color formats does the tool support?
You can enter any 6-digit HEX color (e.g. #3B82F6) in the text field, or use the native browser color picker. The tool internally converts to HSL for accurate lightness manipulation, and all output values are in HEX format for broad compatibility.
Is the generated palette accessible?
The tool generates perceptually spaced colors, but WCAG contrast compliance depends on how you pair text and background colors. Use the companion UI Color Accessibility Checker tool to verify contrast ratios for your final color combinations.
How is this tool useful for design systems?
Design systems typically require a full color scale (e.g. brand-50 through brand-950) for each brand color. This tool automates that process — enter your brand color once and get a complete scale ready to paste into Figma tokens, Style Dictionary, or a Tailwind config file.
Does this tool store my colors?
No. All color calculations happen entirely in your browser using JavaScript. No data is sent to a server, and nothing is stored between sessions. Your colors remain completely private.
What is the difference between tints/shades and a gradient?
A gradient is a smooth visual transition between two or more colors in an image or CSS property. Tints and shades are discrete, named color stops within a single hue family, used as individual color values in design tokens, not as continuous fills.