Tint / shade / tone
Three ways to vary one hue: add white for a tint, black for a shade, gray for a tone. Lighter, darker, dustier.
See it
What it is
Three named ways to vary one hue without changing it. A tint is the hue plus white (pink is a tint of red). A shade is the hue plus black (maroon is a shade of red). A tone is the hue plus gray, which drains the intensity out. How much the lightness moves depends on the gray you picked: mix with a gray lighter than the base and the tone gets lighter, mix with a darker one and it gets darker. Only a gray at the base's own lightness leaves the value alone.
Reach for the vocabulary when you need variants of a single brand color: tints for backgrounds and hover states, shades for text and borders, tones when the color is screaming and you want it to sit down. This is also the machinery behind a monochromatic scheme and behind every 50-to-900 ramp in a UI framework.
Gotcha: mixing toward black naively in sRGB makes mud. Mix in a perceptual space (color-mix in oklab does this for you) or darken by lowering lightness and nudging the hue instead (blues shift cooler, oranges shift toward red). Also, everyday designer speech calls every variant a 'shade', including the light ones, so expect the words to be used loosely outside color theory.
Ask AI for it
From this base color, generate three labeled rows using color-mix(in oklab, ...): tints (base mixed with white at 20%, 40%, 60%, 80%), shades (base mixed with black at the same steps), and tones (base mixed with 50% gray at the same steps). State the interpolation space you used. Do not force the hue angle to stay numerically fixed; a small drift is normal and often looks better than a mechanically constant hue. Label every swatch with its hex value and the mix percentage it came from.