Tint & Shade Generator
| Base | 10% | 20% | 30% | 40% | 50% | 60% | 70% | 80% | 90% |
|---|---|---|---|---|---|---|---|---|---|
Help Us Improve
—
(—)
Tint and shade generator for hex colors
Create tints and shades from any hex. Build color shading scales in 5%, 10%, or 20% steps—export HEX, RGB, CSS, or JSON in your browser.
What is a tint and shade generator?
What this generator does
Tints and shades from hex: Enter a base color and get a row of lighter tints and a row of darker shades—each stop labeled by percent from the base.
10% tint and shade steps: Choose 10 stops per side for classic 10% increments, or switch to 5 or 20 when you need fewer or finer color shading steps.
Color tints for UI states: Map light tint shades to hover backgrounds and dark shade variants to pressed or disabled states without hand-mixing every swatch.
Hex generator output: Every swatch shows a copy-ready hex value; toggle # on copy or export a full list in HEX, RGB, CSS variables, or JSON.
Related palette bases: Insert complementary, split complementary, analogous, or triadic hex bases from any palette to expand a color shading set.
Share and download: Encode palettes in the URL hash or save the grid as a PNG for docs and handoff.
How to build a color shading scale
Paste hex color(s)
Type space-separated six-digit codes or use the eyedropper—three-digit shorthand is expanded automatically.
Make tints and shades
Submit to render shade and tint tables: base in the first column, then progressively lighter tints and darker shades.
Pick step density
Use 10 for 10% steps, 5 for 20% jumps, or 20 for 5% increments when you need a longer shade-of-color ramp.
Export or copy
Click a swatch to copy hex, open Export for CSS or JSON tokens, or share a link that restores your palette.
Tips for tint and shade ramps
- 01
Pair light tints with dark shades
Use the lightest tint shades for subtle fills and the deepest dark shade stops for text on pale backgrounds—then verify contrast.
- 02
Check contrast on real pairs
A mathematically even ramp does not guarantee readable text—test pairs on Colour Contrast Checker before shipping.
- 03
Name tokens by step
Export CSS custom properties and map stops to names like primary-100 through primary-900 in your design system.
Who uses tint and shade tools
UI designers: Explore color tints and darker shades visually before locking a palette in Figma or your spec.
Front-end developers: Generate Sass or CSS custom properties that mirror a color shading scale from design.
Design system authors: Draft full tints-and-shades ramps before publishing tokens in documentation.
Indie makers: Ship landing pages with consistent light and dark variants from a single accent hex.
Why use this generator
Predictable color shading
Each RGB channel mixes toward white for tints and scales toward black for shades—the same approach as Chrome DevTools color pickers.
Multiple export formats
HEX, RGB, CSS variables, and JSON reduce copy-paste errors into stylesheets and token files.
No upload required
Colors stay on your device—nothing is sent to a server.
Bookmarkable URL
Share a link that restores your hex list, step count, and copy preferences.
Technical notes
- Tint formula
- Per channel: new = round(current + (255 − current) × ratio).
- Shade formula
- Per channel: new = round(current × (1 − ratio)).
- Step ratios
- 5, 10, or 20 evenly spaced ratios from base (0%) through 80–95%—10 steps equals 10% tint increments.
- Processing
- All calculations run client-side; share links encode state in the URL hash only.
Sources & References
“A tint is a mixture of a color with white, which increases lightness. A shade is a mixture with black, which reduces lightness. Creating tint and shade scales is fundamental to building cohesive color systems.”
Tints and shades in color theory: Tints blend each RGB channel toward 255 (white), shades blend each channel toward 0 (black). This tool generates both directions simultaneously in configurable step increments. en.wikipedia.org/wiki/Tints_and_shades
“The RGB color model represents colors as combinations of red, green, and blue intensity values. Channel-wise mixing is the standard approach for generating color ramps in digital design tools.”
RGB color model for channel-wise blending: Each stop in the tint or shade scale applies a linear blend ratio per RGB channel. For tints: channel + (255 − channel) × ratio. For shades: channel × (1 − ratio). en.wikipedia.org/wiki/RGB_color_model
“Design tokens are platform-agnostic variables that store design decisions such as colors, spacing, and typography. A common naming pattern uses a base name plus a numeric step (e.g., primary-500).”
Design tokens and color naming conventions: The export formats (CSS custom properties and JSON) map tint and shade stops to numbered names following the design token convention used in modern design systems. en.wikipedia.org/wiki/Design_token