Try #ff6b35, rgb(255, 107, 53) or oklch(70.45% 0.1926 39.23)
This generator turns one base color into tints, which are lighter versions, and shades, which are darker versions. Choose 5, 10 or 20 steps per row, with your base at the start of each, ready for backgrounds, borders, text and states.
The steps are made in OKLCH, a color model where lightness matches what people see. Your color keeps its hue and chroma while the lightness moves toward white or black, and any step too vivid for a standard screen is pulled back into sRGB.
Copy a single swatch, or copy everything as CSS custom properties or a Tailwind colors object. Switch the # sign on or off to match how you write colors. Everything runs in your browser and nothing is uploaded.
A tint is your color made lighter, moving toward white. A shade is your color made darker, moving toward black. This tool makes both from one base color.
It converts your color to OKLCH, keeps its hue and chroma, and moves the lightness toward white for tints and toward black for shades in even steps. Each step is turned back into a hex color, and any color too vivid for a standard screen has its chroma lowered until it fits sRGB.
OKLCH lightness matches how light a color looks, so the steps feel evenly spaced and the hue does not drift. Plain mixing with white or black often turns colors gray or shifts their hue.
Choose 5, 10 or 20 steps per row. Each row includes your base, so 10 gives you your base, nine tints and nine shades.
Yes. Untick Include # and the swatches, copied values and exported code all drop the # sign.
Pick CSS variables to paste a :root block of custom properties like --color-tint-50 and --color-shade-50, or pick Tailwind to paste a colors object into your tailwind.config.js.
No. Everything is calculated in your browser and nothing is uploaded. The base color and step count are only added to the page address so you can share or bookmark a result.