Make lighter tints and darker shades of one color, in 3 to 10 steps or a 50 to 900 scale. Runs on your device.
A tint is your color moved part of the way to white, and a shade is your color moved part of the way to black. The page does this on each red, green and blue value separately, in a straight line. For a tint, new = base + (255 − base) × percent ÷ 100. For a shade, new = base × (100 − percent) ÷ 100. Each result is rounded to a whole number. On mid grey #808080 a 50% tint is 128 + 127 × 0.5 = 191.5, which rounds to 192, so #C0C0C0, and a 50% shade is 64, so #404040. This is a plain mix of RGB numbers. It is not perceptual: the steps are even in the numbers, not necessarily even to the eye.
With numbered steps you choose 3 to 10 steps for each side. The page makes that many tints and the same number of shades, with the base in the middle, so 5 steps gives 11 colors. The percentages are fixed and evenly spaced: 100 × i ÷ (steps + 1). With 4 steps the tints are 20%, 40%, 60% and 80% white, and the shades 20% to 80% black. Colors are listed lightest first and named tint-4 down to tint-1, base, then shade-1 up to shade-4. The 100% step is never made, because that would be pure white or pure black.
The scale option gives 10 colors named 50, 100, 200 up to 900, with your base as 500. The tints are 90%, 80%, 60%, 40% and 20% white for 50, 100, 200, 300 and 400. The shades are 20%, 40%, 60% and 80% black for 600, 700, 800 and 900. Only the naming follows the style of utility CSS frameworks. The values are not any framework's own published colors, and the number of steps box is hidden because the scale is fixed.
Every color is a swatch with its HEX code; click one to copy it. The table lists the name, the mix, and HEX, RGB and HSL for each color. The CSS block defines custom properties such as --color-tint-1 or --color-500 inside :root. A base that is a very light or very dark color gives repeated colors at one end, for example the tints of white are all white. Nothing you type is stored or sent; the colors are worked out in your browser.
A tint is a color mixed with white, so it gets lighter. A shade is a color mixed with black, so it gets darker. Here a 25% tint of #808080 is #A0A0A0 and a 25% shade is #606060.
No. This page mixes each RGB value straight toward 255 or toward 0. Changing HSL lightness takes a different path and can shift how the hue looks. Neither is perceptual, so check the steps by eye.
A color that is already at 255 on every channel (white) cannot get lighter, and black cannot get darker. A very light base also changes little when mixed with white, and rounding to whole numbers can make neighbouring steps equal.
No. Only the names follow that style, with your color as 500. The values come from the fixed percentages listed on the page, so they will differ from any published palette.
Numbered steps give 2 × steps + 1 colors, from 7 with 3 steps to 21 with 10. The 50 to 900 scale always gives 10.