Hue as an angle on the wheel
HSV arranges the pure colours in a circle and names each one by its angle. Red sits at 0 degrees, yellow at 60, green at 120, cyan at 180, blue at 240 and magenta at 300, and 360 arrives back at red. The converter accepts hue from 0 to 360 and treats 360 as 0.
Working by angle turns colour relationships into arithmetic: add 180 for the opposite hue, or 30 for a close neighbour. The Complementary swatch here inverts the RGB channels instead, which lands on the opposite hue with a saturation and value of its own. For a strict rotation of the default 214, 86, 85, type 34, 86, 85 and you get #D9881E.
How saturation and value behave
Value is the level of the strongest channel. At 100 at least one of red, green and blue is at full, and at 0 the colour is black whatever the other two numbers say. Saturation is how far the weakest channel sits below the strongest: at 0 all three are equal and the result is a grey, at 100 the weakest channel is off.
That is the square in most design-tool pickers. Saturation runs left to right, value runs bottom to top, and a separate slider sets hue. The top right corner is the pure hue, the top left is white and the whole bottom edge is black. HSB is the same model under another name, with B for brightness.
The palette strips map onto the square. Each step of Shades lowers value and, rounding aside, leaves hue and saturation alone: the first shade of the default blue is hsv(214, 86.2%, 71%). Each step of Tints lowers saturation and raises value, heading for the white corner. The first tint is hsv(214, 69.5%, 87.5%).
Why HSV numbers do not work as HSL
Both models use the same hue angle and disagree about the other two numbers. In HSL, lightness 50 is the pure hue and lightness 100 is always white. In HSV, the pure hue is at value 100 with saturation 100, and white needs saturation 0. Pure green is hsv(120, 100%, 100%) and hsl(120, 100%, 50%).
The saturation figures differ as well. Halve the saturation of that green to hsv(120, 50%, 100%) and the HSL row still says 100 percent saturation, at a lightness of about 75. Pasting HSB numbers from a design tool into a CSS hsl() function is therefore a bug: hsl(214, 86%, 85%) is the pale blue #B8D4FA, not the #1E6FD9 you picked.
What the field reads
Three bare numbers are read as hue, saturation and value, in that order, with or without the hsv() or hsb() wrapper and percent signs. A hue above 360 or a percentage above 100 is refused with the message Couldn't read that colour. Because a bare triplet means HSV on this page, an RGB value needs its rgb() wrapper. Hex codes starting with #, hsl() and cmyk() values are read too.
All formats lists HSV / HSB first, then HEX, RGB, HSL and CMYK, each with a Copy button. The colour picker beside the field writes its choice back as three HSV numbers, and so does a click on any tint or shade.
Limits of the model
HSV is a rearrangement of sRGB, not a model of vision. Equal steps in hue or value do not look equal: yellows appear far lighter than blues at the same value, and a fixed change of hue is more visible in some parts of the wheel than in others. For legibility, rely on the Contrast card, where WCAG AA needs 4.5:1 for normal text and 3:1 for large text.
A palette that needs even perceived lightness is better built in a perceptual colour space in your design software. For the notation side of the same colour, see the HEX Color Converter, and for a print estimate the CMYK Color Converter. Everything on this page is calculated in your browser.