Skip to content
Kordu Tools Kordu Tools

Tint & Shade Generator

Runs in browser

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

Last updated 08 Apr 2026

Pick a base color and generate 3, 5, 7, or 9 tints (lighter steps toward white) and shades (darker steps toward black). Click any swatch to copy its hex code. Export the full scale as CSS custom properties. Runs in your browser — nothing is uploaded.

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

  1. 1

    Pick a base color

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

  2. 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. 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.

Frequently asked questions

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.

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

Colour Picker

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

Colour Contrast Checker

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

Color Palette Generator

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