Color tints are created when you add white to a color. Since it's easier to see this visually, let's look at the box below.
Starting on the far left is Royal Blue. Each of the 19 colored cells on the right have 5% more white added until the very right block has almost no blue.
By lightening the color it desaturates the hue and makes the color less intense. Lighter tints tend to be quieter and calmer. You might also see them referred to as pastel colors.
Color shades are created when you add black to a color. Let's take a look at the box below.
Starting on the far left is Cornflower Blue. Each of the 19 colored cells to the right have 5% more black added until the very right block is almost solid black.
Adding more shade to a color tends to make the color more intense.
You create different tones of a color by adding both white and black, or gray. You might think of this as a mix of tints and shades.
This time we started with Forest Green on the left side and increased the tone by 5% in each cell moving right.
Whether changing the tone of a color lightens or darkens depends on the color you started with. If the original is lighter than the gray you're using, it'll end up darker. If it's darker than the gray it'll end up lighter.