Are these HSL values official Pantone values?

No — they are derived from widely-published sRGB approximations of each Pantone color. Pantone's licensed digital values ship with Pantone Connect; ours are community references suitable for screen preview but not for licensed brand specs.

Why are Coated and Uncoated HSL different for the same number?

Coated paper holds ink on top; uncoated absorbs it. The resulting printed color differs, so the sRGB and HSL approximations also differ. Always pick the finish that matches your substrate.

Can I use this HSL in a Tailwind config?

Yes — copy the channel-component form (e.g. 263 100% 62%) and reference it via `hsl(var(--brand) / )`. See the Tailwind Palette Generator for a full 50–950 scale.

Does the HSL include alpha?

No — Pantone spot colors are opaque pigment formulas; alpha is a screen-only concept. Set opacity separately via `hsl(var(--brand) / 50%)` if you need translucent variants.

Perceptual ΔE2000

Pantone to HSL Converter

Look up the approximate HSL value for any Pantone (PMS) color — useful for design tokens, CSS variables, and theming systems that store channel components.

Browse or search the curated Pantone reference set
HSL emitted as both compact and channel-component forms
Side-by-side HEX, RGB, CMYK, HSV, LAB readouts
Coated and uncoated entries kept distinct

Direct answer

A Pantone color is a physical pigment recipe. Its HSL approximation is the closest sRGB match expressed in Hue / Saturation / Lightness — useful for design tokens, but never a substitute for a printed reference under D50 light.

Pantone → HSL

Find a Pantone color

Pantone 186 C

hsl(350, 85%, 42%)

HEX

#C8102E

RGB

rgb(200, 16, 46)

CMYK

cmyk(0%, 92%, 77%, 22%)

HSL

hsl(350, 85%, 42%)

HSV

hsv(350, 92%, 78%)

LAB

lab(42.5, 65.9, 35.7)

When you actually need this

Real production scenarios where the pantone to hsl converter saves time, prevents reprints, or unblocks a workflow.

Tokens

Convert a brand Pantone into CSS variables

Brand standard says Pantone 286 C; design system wants HSL channels in :root. This is the one-step conversion.

Tailwind v4

Brand color for Tailwind v4 / shadcn-style theming

Modern Tailwind reads channel-form HSL variables. Convert a Pantone to HSL channels and drop into your @theme block.

Web mock

Mock up a Pantone-printed asset on the web

Need to preview how Pantone 354 C will look on a packaging mockup mood board? HSL on-screen is the closest digital approximation.

Themable color

Build dark-mode variants from a single brand PMS

Once you have HSL channels, swap lightness in dark mode (e.g. L=62% → L=72%) and the rest of the palette re-tones without redefining every variable.

How it works

The methodology — every step is documented so the answer is reproducible, not magic.

Pick a Pantone

Search by code, name, or HEX. Coated (C) and Uncoated (U) entries are kept distinct because they emit different HSL values.

PMS → sRGB approximation

Our reference table stores widely-published sRGB approximations. We then run rgb → hsl in CSS-standard form.

Emit HSL channel string

Output: hsl(263, 100%, 62%) — and a channel-component variant (263 100% 62%) for use inside hsl() var() and color-mix().

Verify side-by-side

We also emit HEX, RGB, CMYK, HSV, and LAB for cross-checks. Use the closest one to your downstream tooling.

Worked examples

Concrete inputs and the matches the tool returns. Useful for spot-checking expected behavior before you trust the output for a real job.

Input	Result	Notes
Pantone 186 C	hsl(351, 85%, 42%) · #C8102E	Brand red — classic.
Pantone 286 C	hsl(220, 100%, 32%) · #0033A0	Deep blue — out of gamut on some monitors; HSL is approximate.
Pantone 354 C	hsl(141, 100%, 35%) · #00B140	Vivid green — typical brand green territory.
Pantone Cool Gray 10 C	hsl(220, 4%, 42%) · #63666A	Cool gray family — important for layout neutrals.

Common mistakes to avoid

Treating HSL as canonical

Pantone's canonical reference is the physical chip, not any digital value. Use HSL for screen approximation; verify against a guide before press.

Cross-using Coated and Uncoated values

Coated and Uncoated of the same PMS number are not the same color on press OR on screen — pick the finish that matches your substrate.

Storing single HSL strings instead of channels

If you'll need opacity or color-mix() later, store channel components (263 100% 62%), not the full hsl() string. The string form locks you out of alpha modulation.

Expecting HSL Lightness to be perceptual

HSL Lightness 50% is the saturation peak, not perceptual midpoint. For perceptually-balanced ramps, use OKLCH or generate a Tailwind scale instead.

Frequently Asked Questions

Why HSL is the design-token sweet spot

HSL became the dominant format for design-token storage around 2020 with the rise of CSS custom properties. Storing channel components — --brand: 263 100% 62% — lets you compose at use-site: hsl(var(--brand) / 50%) for 50% alpha, color-mix(in oklch, var(--brand) 70%, white) for tint generation. HEX cannot do either.

Pantone → HSL is approximate, by definition

Pantone Solid Coated 286 C has a documented sRGB approximation, but the printed result depends on substrate, illuminant, ink batch, and press conditions. The HSL we emit is a faithful digital preview — not a substitute for a spectrophotometer reading or a wet proof.

When NOT to use the HSL value

If your output is going to print, do not feed HSL back into a CMYK build for production. Use the Pantone code itself for spot printing, or use Pantone → CMYK for a documented process build with the appropriate ICC profile.

Round-tripping

Pantone → HSL → some other tool → back-to-Pantone is not lossless. Every conversion has small rounding, and the back-to-Pantone step may land on a different match because the ΔE space is non-uniform. Always treat the original PMS code as the source of truth.

Related Converters

HSL → Pantone Pantone → HEX Pantone → RGB Pantone → CMYK Pantone → HSV CSS Variable Generator

Pantone to HSL Converter