CodesBeautify

Colortone to HSV Converter

Turn a tone name into the hue, saturation and value your picker wants.

Tone names
HSV values
Runs locally in your browser

About the Colortone to HSV Converter

Design software is built around three sliders, so a colour arriving as a word has to become an angle and two percentages before you can work with it. This lookup does that in one step: type Emerald, Cerulean or Mustard and read back the hue in degrees plus saturation and value as percentages, exactly the fields an HSB picker in Figma, Sketch or Photoshop presents.

Seeing a tone in HSV also explains why certain names feel related. Mustard and Saffron share a narrow band of hue and differ mainly in value, which is why swapping one for the other barely disturbs a layout. Cerulean and Cobalt sit close in hue too but a long way apart in saturation, so the pair reads as the same family at different intensities. Reading the numbers makes those relationships obvious in a way that staring at swatches does not.

One point of confusion worth clearing up: value is not lightness. Full value with full saturation gives a vivid colour, not white, whereas full lightness in HSL always gives white no matter what the other channels say. If you want the HSL form for a stylesheet, start from Colortone to HEX and pass the code through the Color Converter. Sliders back to a name is handled by HSV to Colortone.

How to use

  1. Enter the tone names you want, one per line.
  2. Press Look up to get an hsv() triple for each name.
  3. Type the three numbers into the HSB fields of your design tool.
  4. Nudge the value slider if the tone needs to sit lighter or darker.

Common questions

Is HSV the same as the HSB in my design app?
Yes, only the label differs, so the three numbers can be entered straight into an HSB picker.
Why is value not the same as lightness?
Value reaches its maximum at the full strength colour, while HSL lightness reaches its maximum at pure white.
What hue do the neutral tones report?
Greys and near greys have almost no dominant channel, so their hue is unstable and their saturation sits near zero.
Can I write hsv() values in CSS?
No browser supports an hsv() function, so convert to HSL or RGB for stylesheets.