Pantone to HSV Converter
Break a Pantone spot colour into hue, saturation and value so you can reason about it the way design tools do — and build tints, shades and palettes around it.
Example: PANTONE 185, PANTONE 100
H°
S%
V%
What is a Pantone to HSV converter?
HSV describes a colour as three intuitive dimensions: hue (its position on the colour wheel, in degrees), saturation (how pure versus grey it is) and value (how light or dark). It's the model behind most colour pickers because it matches how people think about adjusting a colour. This tool takes a Pantone spot colour and expresses it in those three numbers — note HSV is also labelled HSB (the B for brightness) in tools like Photoshop; they're the same thing.
Designers use this when they need to work with a brand colour rather than just reproduce it: dialling saturation down for a muted background, nudging value to create a hover state, or sampling the hue to build a harmonious secondary palette. Hex and RGB are awkward for that; HSV makes the moves obvious.
Because HSV is derived from the colour's screen representation, it inherits the usual screen-versus-ink caveat. Everything runs locally in your browser.
How to convert Pantone to HSV
- 1
Enter the Pantone code
Type the PMS number and suffix, for example 2186 C, from your brand reference.
- 2
Read the HSV breakdown
Hue in degrees plus saturation and value as percentages appear with a colour preview.
- 3
Copy the values
Paste the H, S and V numbers into your colour picker or design tool.
- 4
Adjust deliberately
Tweak S and V to build tints, shades and states while keeping the hue anchored to the brand.
Why HSV is useful for a brand colour
Build tints and shades
Hold the hue, drop the value or saturation, and you have a controlled family of lighter and darker variants.
Design interaction states
Small, predictable shifts in value give you hover, active and disabled states that still read as the brand.
Find harmonious accents
Knowing the hue angle lets you pick complementary or analogous colours with intent, not guesswork.
Speak your tool's language
HSV (HSB) is how pickers in Figma, Photoshop and Sketch operate, so the values drop straight in.
Worked example
A Pantone spot colour broken down into hue, saturation and value.
Pantone 2186 CH: 209° S: 100% V: 86%Derived from the colour's screen value (rgb 0, 112, 220). Hold the 209° hue and lower V for darker shades, or lower S for muted tints.
HSV is a lens on the colour, not a different colour
HSV, RGB and hex are three ways of writing the same screen colour, so converting Pantone to HSV is lossless relative to the colour's screen representation. The approximation lives one step earlier: that screen representation is itself only an estimate of a physical Pantone ink. So the HSV you get is an accurate description of the on-screen stand-in, which is in turn a best effort at the real ink.
That makes HSV ideal for building digital palettes around a brand colour, but it isn't a print instruction. Lowering value in HSV creates a darker screen colour; it does not tell a printer how to mix a lighter or darker spot ink. For print, work from Pantone numbers directly.
Reading the three channels
- Hue (0–360°) — the colour's angle on the wheel; 0/360 is red, ~120 green, ~240 blue.
- Saturation (0–100%) — 0% is a pure grey, 100% is the most vivid version of that hue.
- Value (0–100%) — 0% is black, 100% is the brightest the colour gets at that hue and saturation.
- HSV and HSB are the same model; if your tool says HSB, the numbers are interchangeable.
Frequently asked questions
Yes. HSV (value) and HSB (brightness) are two names for the identical model. Photoshop calls it HSB; most other tools call it HSV. The numbers are interchangeable.
The HSV-from-RGB step is lossless. The approximation is upstream: the colour's screen representation is itself only an estimate of the physical Pantone ink.
No. HSV describes a screen colour. For print, specify the Pantone code directly; adjusting HSV doesn't tell a printer how to mix an ink.
Keep the hue fixed and raise the value while optionally lowering saturation. That yields a tint that still reads as the same brand hue.
Hue is an angle on the colour wheel, so degrees (0–360) are the natural unit. Saturation and value are proportions, shown as percentages.
Store the hue angle as a constant, then vary S and V programmatically. For a scale of five tints, loop V from 40% to 100% in 15% steps while keeping the hue fixed. Convert each step back to hex for use in CSS. Because you started from the Pantone-derived hue, every tint stays recognisably on-brand.
Need another tool?
Browse the full toolbox or dig into the blog for the engineering behind it.