Pantone to Hex Converter
Get the hex code for a Pantone spot colour so a brand defined for print can drop straight into your CSS, design tokens and style sheets.
Example: PANTONE 185, PANTONE 100
HEX
HEX (no hash)
What is a Pantone to hex converter?
This tool turns a Pantone spot colour into a hex code — the #RRGGBB notation that CSS, design tools and component libraries all understand. Hex is really just RGB in base-16, so a Pantone to hex conversion is the same lookup as Pantone to RGB, formatted for the web. You enter a PMS code; you get the hex you can paste into a stylesheet.
It's the conversion you want when a brand was specified for print but now lives online. Marketing sites, dashboards, design systems and email templates all expect hex, and reaching for a Pantone book by eye is no way to fill in a colour token. This gives you the value to standardise on.
Keep in mind the hex is a screen stand-in for a physical ink, accurate enough for digital work but not a colour proof. The conversion runs locally — nothing is uploaded.
How to convert Pantone to hex
- 1
Enter the Pantone code
Type the PMS number with its suffix, e.g. 2186 C, as written in your brand guidelines.
- 2
Get the hex value
The matching #RRGGBB hex appears alongside a swatch preview of the colour.
- 3
Drop it into your code
Copy the hex straight into CSS, a Tailwind config, a design token, or a Figma fill.
- 4
Keep print on Pantone
Use the hex for screens only; for printed pieces, continue specifying the Pantone code.
Why convert Pantone to hex
Populate design tokens
Turn a print brand colour into a hex token your component library and themes can reference.
Web-ready in one step
Hex pastes directly into CSS and most editors, with no extra formatting needed.
Align digital with print
Anchor your site's palette to the same intended colour as the printed brand assets.
Private and offline-capable
The lookup runs in your browser, so confidential colours never leave it.
Worked example
A Pantone spot colour expressed as a web hex code.
Pantone 2186 C#0070DCReady to paste into CSS. It's a screen approximation of the ink; for print, keep specifying 2186 C rather than the hex.
Hex is a digital stand-in, not the ink itself
The hex you get back is the best web representation of a Pantone ink — but ink and screen are different media. Printed colour reflects light; a display emits it, and it can't always reach the same place. Deep, metallic and fluorescent Pantone colours in particular have no faithful hex, so their value is an impression rather than a copy. For on-screen use this is perfectly fine; just don't treat the hex as a colour-accurate proof of the print.
Because the relationship is one-directional and lossy, running that hex back through a hex-to-Pantone tool can land on a different PMS number. The brand source of truth for print remains the Pantone code; the hex is its digital companion.
Putting the hex to work
- Store it as a named design token (e.g.
--brand-primary) so every component references one value. - Use it for backgrounds, text and accents in web, app and email contexts.
- Don't convert the hex to a CMYK build for print and expect it to equal the spot ink — go back to the Pantone code instead.
- Judge the colour on a calibrated screen when fidelity matters; uncalibrated displays shift the hue.
Frequently asked questions
No. It's the closest on-screen representation. Screens emit light and can't perfectly reproduce reflected ink, so the hex is an approximation — fine for digital, but not a print proof.
You shouldn't rely on it. For print, use the Pantone code directly. The hex is intended for screens such as websites, apps and email.
The mapping is lossy and one-directional. Several screen colours can share a nearest Pantone, so a round trip can land on a different number than you started with.
It can. Coated (C) and uncoated (U) versions look different and may have different published values, so include the correct suffix from your brand guide.
It's a guide to hue. On an uncalibrated monitor the colour may read warmer or cooler than intended, so verify critical colours on a calibrated display.
In Figma, click the fill swatch on any element and paste the hex. Then click the four-dot icon next to the fill label and choose 'Create style'. Name it after the Pantone code (e.g. Pantone 2186 C) and publish the library — now every team member who enables your library can reference it by name.
Need another tool?
Browse the full toolbox or dig into the blog for the engineering behind it.