Skip to content
Kordu Tools
Colour Tools Runs in browser Updated 08 Apr 2026

Tint & Shade Generator

Generate tints (lighter) and shades (darker) from any base color. Exports CSS variables.

Tints (lighter)

#3b82f6 (base)

Shades (darker)

CSS custom properties
:root {
  --color-50: #deeafe;
  --color-100: #bed5fc;
  --color-200: #9dc1fb;
  --color-300: #7cacf9;
  --color-400: #5c97f8;
  --color-500: #3b82f6;
  --color-500: #316ccd;
  --color-600: #2757a4;
  --color-700: #1e417b;
  --color-800: #142b52;
  --color-900: #0a1629;
}
Loading rating…

How to use Tint & Shade Generator

  1. Pick a base color

    Use the color picker or type a hex code directly into the input field.

  2. Choose the number of steps

    Select 3, 5, 7, or 9 steps on each side of the base color for a finer or coarser scale.

  3. Click swatches to copy

    Click any color swatch to copy its hex code. Click 'Copy CSS' to copy the full scale as CSS custom properties.

Tint & Shade Generator FAQ

What is the difference between a tint and a shade?
A tint is a color mixed with white — it gets lighter and less saturated. A shade is a color mixed with black — it gets darker and more saturated. Together they form a monochromatic scale from a single base color.

How are the tints and shades calculated?
Tints interpolate each RGB channel toward 255 (white) in equal steps. Shades interpolate each channel toward 0 (black) in equal steps. The steps are evenly distributed between the base color and the endpoint.

What CSS custom property format is used?
Variables are named --color-N where N is a Tailwind-like scale (50, 100, 200... 900). The scale runs from lightest tint to darkest shade with the base color in the middle.

Can I use this for Tailwind CSS color palettes?
Yes. The CSS variable output matches Tailwind's color scale naming convention (50–900). Copy the CSS block and customise the variable name to match your Tailwind theme.

Is my data sent anywhere?
No. All generation happens in your browser. Nothing is uploaded or stored.

Background

The Kordu Tint & Shade Generator creates a full color scale from any base color. Tints are lighter variants created by mixing the base color with white. Shades are darker variants created by mixing with black. Choose 3, 5, 7, or 9 steps on each side for a scale of 7, 11, 15, or 19 colors respectively.

Click any swatch to copy its hex code to the clipboard. The generated colors are also exported as CSS custom properties in a format compatible with CSS variables, Tailwind CSS, and design tokens.

Common uses: building color palettes for design systems, generating consistent hover and active states for UI components, creating monochromatic backgrounds, and producing accessibility-compliant color scales with sufficient contrast.

All generation runs client-side in your browser. Nothing is uploaded or stored.

Related tools

Color Picker

Pick any color and instantly view HEX, RGB, HSL, HSV, CMYK, alpha, and decimal values. Copy any format with one click.

Color Contrast Checker

Check WCAG color contrast ratios between foreground and background colors. See AA and AAA pass/fail badges instantly.

Color Palette Generator

Generate harmonious color palettes using color theory. Complementary, triadic, analogous, and more.