Colortone to HSV: named colors in picker terms
Image editors and design tools rarely let you type a CSS color name, but almost all of them have HSB fields. This colortone to HSV converter translates a name like steelblue, or any color code, into hue, saturation and value, and lists matching tints, shades and tones in the same notation.
Example: steelblue in 4 steps
Tints (mixed with white):
0% hsv(207, 61.1%, 70.6%)
25% hsv(207, 41.7%, 78%)
50% hsv(207, 25.2%, 85.5%)
75% hsv(207, 11.4%, 92.5%)
100% hsv(0, 0%, 100%)
Shades (mixed with black):
0% hsv(207, 61.1%, 70.6%)
25% hsv(207, 60.7%, 52.9%)
50% hsv(207, 61.1%, 35.3%)
75% hsv(207, 60%, 17.6%)
100% hsv(0, 0%, 0%)The tones ramp continues toward hsv(0, 0%, 50.2%), the HSV form of mid gray #808080.
Where the base numbers come from
Steelblue is rgb(70, 130, 180). In HSV the value is the largest channel, 180 / 255 = 70.6%. Saturation is the spread relative to that maximum, (180 − 70) / 180 = 61.1%. Hue is 60 × ((70 − 130) / 110 + 4) = 207.3°, shown as 207.
HSV and HSL are not interchangeable
Many pickers offer both models side by side, and they share the hue but not the other two numbers. Steelblue is hsv(207, 61.1%, 70.6%) but hsl(207, 44%, 49%). If you type the HSL figures into HSB fields you get hsv(207, 44%, 49%), which is roughly rgb(70, 100, 125): a darker, duller blue than the one you wanted.
Check the label in your tool before entering numbers. Photoshop, Figma and Affinity call the model HSB, GIMP and Inkscape call it HSV, and both names mean the same thing. If your picker only offers HSL, use the HEX to HSL converter with the hex code shown in the result instead.
Using the ramps in a picker
- Darker variants: keep H 207 and S about 61, and lower B to the shade values, 52.9, 35.3 and so on. That is all a shade does in HSV.
- Lighter variants: tints lower saturation and raise brightness together, so you need to change both fields.
- Muted variants: tones reduce saturation and brightness together, drifting toward gray.
Pickers usually accept whole numbers, so round the values. The difference of a tenth of a percent is invisible.
Accepted input
You can type any of the 148 CSS color names (spaces and capitals are ignored), hex codes, or rgb(), hsl(), hsv(), hsb() and cmyk() values. Plain numbers without a function name are read as RGB in the HEX field, so type HSV numbers into the HSV field instead.
If your starting point is already HSV, HSV to Colortone starts from the HSV field. For single conversions see HEX to HSV and HSV to HEX.