This box shows variations of a color.
Height variations are displayed:
So you have from top to bottom: variations that are lighter, of same lightness and darker. And from left to right: less saturated, of same saturation and more saturated variations.
On the right, height hue variations are displayed. Each one is the result of melt between the current color and one of these eight colors (beginning at center right, counter clockwise): red, orange, yellow, green, cyan, blue, purple and pink.
Their position matches the color order in the colro wheel.
Two sliders are available under the variations:
So you can change the contrast (percentage for lightness and saturation variations, degrees for hues). Note that for a given step, the visual contrast is not the same if the reference color is a dark color or a light one.