Tint & Shade Generator

1. Type a base color into the field, or pick one with the swatch next to it.
2. Read the three scales: tints (toward white), shades (toward black) and tones (toward mid gray, #808080), each in 10% steps from 0% to 100%.
3. Click any swatch to copy its hex code.
4. Use Copy Tints, Copy Shades or Copy Tones to copy a whole scale at once.

A tint is the base color mixed with white, so it gets lighter and paler. A shade is mixed with black, so it gets darker. A tone is mixed with gray, so it becomes duller. Worked example with tomato, #ff6347 = rgb(255, 99, 71), at 50%:

• 50% tint: rgb(255, 177, 163), #ffb1a3
• 50% shade: rgb(128, 50, 36), #803224
• 50% tone: rgb(192, 114, 100), #c07264

Each step is a straight average of the channels: the green channel of the 50% tint is (99 + 255) ÷ 2 = 177. At 100%, the tint is pure white, the shade pure black and the tone #808080. The guide to tints, shades and tones covers where the terms come from.

• Hover and pressed states: a 10% shade for hover and 20% for pressed is a reliable start. For #ff6347 those are #e65940 and #cc4f39.
• Backgrounds: 80–90% tints make quiet surfaces for alerts, callouts and selected rows. The 90% tint of tomato is #ffefed.
• Dividers: 60–70% tints give decorative lines a brand cast. Borders that identify an input still need 3:1 contrast against the background.
• Muted states: tones keep the hue but drop the saturation, which reads as inactive or secondary.

Text on these colors still has to pass. The 50% shade #803224 on white measures 8.75:1, well above the 4.5:1 AA minimum; test your own pairs in the contrast checker.

This tool mixes in sRGB, the same math as color-mix(in srgb, …), so every value is simple to reproduce. The trade-off is that equal 10% steps do not look like equal jumps, and some hues drift. Pure blue shows it clearly: the 50% tint of #0000ff is #8080ff, which looks periwinkle rather than light blue because its perceived hue has moved toward purple. Some hues also change character as they darken: the 50% shade of #ffff00 is #808000, exactly the CSS color olive.

For a design-system scale where each step should look evenly spaced across hues, generate it in OKLCH with the Tailwind palette generator, which sets a lightness target per step and holds the hue angle constant.