Skip to content

Pantone to HEX Converter: PMS Codes for Web

Convert Pantone PMS codes to HEX color codes for CSS and web design.

Last updated

Reviewed by Assoc. Prof. Rahela Kulčar, PhD, Associate Professor, University of Zagreb.
A Pantone colour chip converting to a hexadecimal colour code block.PMS 300 CPantone#0057B8HEX
Web designers use HEX equivalents to reference Pantone brand colours in CSS.

 

About this conversion

Web developers and UI designers rarely think in Pantone, but brand guidelines almost always specify PMS codes. When the style guide says Pantone 286 C, the CSS needs #0032A0. This tool eliminates the intermediate step: search by PMS code or color name, and copy the HEX value directly — no manual RGB-to-HEX arithmetic required.

HEX codes are the dominant color notation in front-end development because they are compact (6 characters vs. three separate integers for RGB) and universally supported in CSS, SVG, and HTML attributes. A three-digit shorthand exists for values like #FFF or #09C, but most Pantone conversions produce codes that cannot be shortened. The tool shows both the full HEX code and the underlying RGB values so you can use whichever notation your project requires. If your workflow involves screen-first design and you need the three-channel integers instead, the Pantone to RGB converter focuses on that output.

One subtlety designers miss: Pantone's published digital values assume an sRGB display at D65 white point. On a wide-gamut monitor (P3 or Adobe RGB), the same HEX code may render slightly more vivid than intended, because the browser maps it into the wider gamut. If brand color accuracy matters to you, add a color-profile declaration in your CSS or work in the sRGB color space explicitly. For verifying that your printer reproduces these HEX values accurately on paper, the color test page provides a quick visual reference. If your brand spec is in RAL rather than Pantone, the RAL to HEX converter handles the same web-design handoff for industrial colour codes.

Five Pantone swatches with HEX codes and CSS usage examples for web development.Pantone to HEX for Web DesignEach PMS code maps to a 6-digit HEX value ready for CSSSwatchPMS CodeHEXCSS ExampleRed186 C#C8102Ecolor: #C8102E;Blue300 C#0057B8background: #0057B8;Green348 C#00843Dborder: 2px solid #00843D;Yellow116 C#FFCD00fill: #FFCD00;Violet2685 C#56368Aoutline: #56368A;HEX is a compact notation for RGB. #0057B8 = rgb(0, 87, 184).
Each Pantone PMS code maps to a six-digit HEX value you can paste directly into CSS.

Worked examples

Real conversions this tool produces — enter the inputs to reproduce each result.

Grabbing a CSS hex for a print brand colour

Input

Pantone
286 C — Blue

Result

HEX
#0033A0
RGB
0, 51, 160

Paste #0033A0 straight into CSS. Treat it as a starting point for digital, not a colour-managed match — the hex is the sRGB approximation of a spot ink, not the ink itself.

A Pantone green for a web button

Input

Pantone
354 C — Green

Result

HEX
#00AC42
RGB
0, 172, 66

354 C resolves to #00AC42 — a green with no red channel at all. Pure-green hexes like this clear WCAG large-text contrast on white but fail it for body text, so check the contrast readout before using it for type.

Related content

Was this page helpful?

Color conversions are mathematical approximations. For critical color work, verify against physical swatch books and printed proofs. See our methodology and full disclaimer.

Frequently Asked Questions

What is the difference between HEX and RGB color codes?

They represent the same color. HEX is a base-16 notation (#RRGGBB) while RGB uses three decimal integers (0-255). HEX is more common in CSS because it is shorter. #0057B8 and rgb(0, 87, 184) produce the identical blue.

Can I paste a Pantone HEX code directly into CSS?

Yes. Copy the 6-digit HEX code from this tool and use it in any CSS property that accepts a color value — color, background-color, border-color, fill, stroke, etc. No conversion needed.

Why do some Pantone colors look different on screen vs in print?

Pantone inks are formulated for specific substrates and viewing conditions. Screens emit light (RGB), while print reflects it (CMYK). Vivid Pantone oranges and blues can fall outside the sRGB gamut, meaning the HEX code is an approximation for those shades.

Is there a 3-digit HEX shorthand for Pantone colors?

Rarely. The 3-digit shorthand only works when each pair of hex digits is identical (#RRGGBB becomes #RGB). Most Pantone conversions produce codes like #C8102E or #0057B8 that cannot be shortened. The tool always shows the full 6-digit code for accuracy.

Cite or embed this tool

Cite this tool

PrinterTools. (2026). Pantone to HEX Converter: PMS Codes for Web [online tool]. https://printertools.net/tools/pantone-to-hex

Embed this tool

Paste this on your site to link readers to the free tool. It renders as:

<a href="https://printertools.net/tools/pantone-to-hex" target="_blank" rel="noopener" style="display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid #e2e8f0;border-radius:8px;background:#ffffff;font-family:system-ui,-apple-system,sans-serif;font-size:14px;line-height:1.3;color:#2563eb;text-decoration:none;">Pantone to HEX Converter: PMS Codes for Web — free tool by PrinterTools</a>

More Print calculators

Browse all print calculators — Color converters for RGB, HEX, CMYK, HSL, HSV, Pantone, RAL, and NCS — plus DPI, paper size, contrast, and ink estimators.