Tint & Shade Generator — Monochromatic Palette from Any Colour

More Color Tools Tools

CC

Color Converter

Bidirectional color converter — HEX, RGB, HSL, HSV, CMYK, plus a native color picker, all updating live as you type.

CC

Contrast Checker

Check the WCAG 2.1 contrast ratio between foreground and background colours — pass/fail for AA and AAA at a glance.

CM

Color Mixer

Mix two colours with a ratio slider — see the result in HEX, RGB, and HSL, and preview both original colours alongside the blended output.

RC

Random Color Generator

Generate truly random colours with channel locking and a 5-colour history — copy the hex code with one click.

PG

Palette Generator

Generate harmonious colour palettes from a base colour — Complementary, Analogous, Triadic, Tetradic, and Monochromatic.

CN

Color Name Finder

Find the closest CSS named colour for any hex code — top 5 matches ranked by RGB distance.

CT

CMYK to Pantone

Find the closest Pantone colour for any CMYK mix — top 3 matches with official-looking names and swatches.

MC

Material Color Generator

Generate a full Material Design colour palette — 50 through 900 shades plus A100-A700 accent colours from any primary hex.

GG

Gradient Generator

Build live CSS gradients — Linear, Radial, and Conic — with multiple colour stops, angle control, and copyable CSS output.

IC

Image Color Picker

Pick any pixel colour from an uploaded image — zoom lens, live HEX/RGB/HSL, lock colour on click.

How to Use Tint & Shade Generator

Pick a base colour with the native picker or type a hex code, and instantly see a palette of 21 swatches: the original colour in the centre, 10 tints (progressively lighter, mixed with white) on the left, and 10 shades (progressively darker, mixed with black) on the right. Each swatch shows its hex code and copies it to your clipboard on click. Ideal for building monochromatic colour palettes for UI design.

About Tint & Shade Generator

Tints, shades, and tones are the building blocks of a monochromatic colour palette — the kind you see in every well-designed UI, where a single hue is varied in lightness to create hierarchy, depth, and visual interest without introducing a second colour that might clash. Terms are used inconsistently across design tools, so here is the precise definition this tool follows: a **tint** is the base colour lightened by mixing it with white (the lightness increases), and a **shade** is the base colour darkened by mixing it with black (the lightness decreases). The word "tone" — a mix with grey — is not generated by this tool, but you can approximate a tone by taking a tint or shade of your base colour. The mixing is performed in the HSL colour space rather than RGB, because interpolating lightness in HSL preserves the perceptual relationship between the swatches better than the linear average of RGB channels. The formula for a tint at amount T% (where T is from 10% to 100%): lightness_result = lightness_base + (100 - lightness_base) × (T / 100). The hue is held constant. The saturation is held constant — this means a highly saturated colour when tinted produces pastels, and the very last tint (100%, which is indistinguishable from pure white at S=0 from the user's perspective) is displayed for completeness but is simply white. The shade formula is: lightness_result = lightness_base × (1 - S / 100), where S is the shade amount (10% to 100%). At 100%, the shade is pure black. The 21 swatches are arranged left to right: 10 tints at ten equally spaced mixing levels (10%, 20%, ..., 100% of white), the original colour in the centre, and 10 shades (10%, 20%, ..., 100% of black). This gives you a full gradient from white, through your base colour, to black — a complete lightness scale anchored on your chosen hue. Clicking any swatch copies its 6-digit hex code to the clipboard, with a brief "Copied!" tooltip confirmation. This is the primary interaction: scan the palette, find the swatch that matches the lightness you need, click to copy, paste into your CSS or design tool.

Details & Tips

Technical formulas in full: For a tint with mixing amount t (fraction 0.0-1.0, where t = (tint_step / 10) for the Nth tint): - H_result = H_base (unchanged) - S_result = S_base (unchanged — saturation is preserved; if you want desaturated tints, manually reduce saturation on the base colour) - L_result = L_base + (100 - L_base) × t The shade formula for mixing amount s (fraction 0.0-1.0): - H_result = H_base - S_result = S_base - L_result = L_base × (1 - s) Edge cases: - Tint at 100% (t=1.0): L_result = L_base + (100 - L_base) × 1.0 = 100. The colour becomes pure white. Saturation becomes irrelevant when lightness is 100%, so the hex shows #FFFFFF. - Shade at 100% (s=1.0): L_result = L_base × 0 = 0. The colour becomes pure black (#000000). - Base already white (L=100%): all tints produce #FFFFFF; shades produce greys. - Base already black (L=0%): tints produce greys; all shades produce #000000. The HSL-to-hex conversion for display uses the same RGB pipeline as the main colour converter tool: HSL → RGB (integers 0-255 per channel) → hex string. **Grid layout:** The 21 swatches are displayed in a single horizontal row that wraps on narrow screens, each swatch a small square (approximately 40×40px) with the hex code printed underneath in a tiny monospace font. The centre swatch (the original colour) is slightly larger or outlined to visually anchor the palette. On mobile, the row wraps into two or three lines. **Keyboard and accessibility:** Each swatch is a `<button>` element, so the full palette is navigable by keyboard. The hex code is included as visible text, not just as a tooltip, so screen readers can announce the colour value. **Performance:** 21 swatches are trivial to compute — the entire palette is recalculated in under a millisecond on every keystroke, so the `@input` handler on the hex field produces no perceptible delay. No debouncing is necessary or used. **Use cases:** Generating hover/focus/active states for a button by picking a slightly darker shade; building a data-visualisation choropleth scale; creating a CSS custom-property palette (`--color-primary-100` through `--color-primary-900`); exploring a brand colour's range before committing to a palette in Figma or a design system.

Frequently Asked Questions

What is a tint?

A tint is a colour lightened by mixing it with white. In this tool, 10 tints are generated at evenly spaced mixing levels from 10% to 100% white.

What is a shade?

A shade is a colour darkened by mixing it with black. This tool generates 10 shades at evenly spaced mixing levels from 10% to 100% black.

How are the tints and shades calculated?

The tool works in the HSL colour space: it holds the hue and saturation constant and adjusts only the lightness. For tints, lightness moves toward 100% (white); for shades, lightness moves toward 0% (black).

Why use HSL instead of RGB for mixing?

Adjusting only the lightness channel in HSL preserves the hue and keeps the perceptual relationship between swatches more consistent than the linear average of RGB channels would.

How many swatches does the palette contain?

21 swatches: 10 tints, the original base colour in the centre, and 10 shades — a complete lightness scale from white through your hue to black.

How do I copy a specific swatch colour?

Click any swatch and its 6-digit hex code is copied to your clipboard. A brief "Copied!" confirmation appears so you know the copy succeeded.

Can I use the colour picker instead of typing a hex code?

Yes — a native `<input type="color">` picker sits next to the hex input. Selecting a colour from the OS palette updates the base colour and regenerates the entire palette instantly.

What happens if my base colour is already very light or very dark?

If the base is near white (high L), the tints all cluster near white and are hard to distinguish from each other. If the base is near black (low L), the shades cluster near black. The tool still generates all 21 swatches, but the useful range is the one going the opposite direction.

What is the difference between a tint, a shade, and a tone?

A tint adds white, a shade adds black, and a tone adds grey (both white and black). This tool generates tints and shades. You can approximate a tone by taking a middle tint or shade.

Is the palette recalculated live as I type?

Yes — every keystroke in the hex field triggers a recalculation. Because only 21 HSL-to-hex conversions are needed, the update is effectively instantaneous.

Can I copy all 21 hex codes at once?

No — the tool is designed for picking individual swatches by clicking them. If you need all values at once, you can click each swatch in sequence; the palette is small enough that this is practical.

Is my data sent to a server?

No — all tint and shade generation happens locally in your browser. Nothing is transmitted anywhere.