Pantone to HSL Converter
Select any Pantone Solid Coated color to see its HSL (Hue, Saturation, Lightness) values and a CSS-ready hsl(h, s%, l%) string you can paste directly into your stylesheet. All 2,371 Pantone colors are included. HSL is the color model CSS uses natively, so these values work the moment you copy them — no conversion layer needed.
What is Pantone to HSL conversion?
Pantone is a print specification system — each code specifies an exact ink mix. HSL (Hue, Saturation, Lightness) is a color model that browsers use natively: hsl(h, s%, l%) is valid CSS and supported everywhere. The conversion runs Pantone code → catalog HEX approximation → exact RGB → exact HSL. The HSL itself is a lossless transform of RGB, so the numbers are exact for the RGB values in our catalog; what they approximate is the printed Pantone color, which is a physical thing, not a mathematical one.
Unlike HSV, HSL is not the internal model of Photoshop or Figma — but it is the internal model of CSS. If your output is CSS, HSL is the right target. And because HSL stores brightness as a symmetric axis (0% black, 50% the true hue, 100% white), it is the cleanest model for generating tints and shades of a Pantone brand color programmatically.
How to use this converter
- Select a Pantone color from the dropdown.
- Read the HSL values and the CSS-ready string below, alongside HEX, RGB, and CMYK.
- Click Copy HSL to grab the
hsl(h, s%, l%)string for CSS, or Copy values to get the raw triplet. - Click the color name to visit its dedicated Pantone page with more details and closest neighbors.
How the conversion works
The conversion is a direct RGB → HSL transform. Given an RGB triplet (r, g, b) in 0–255: normalize each channel to 0–1. Compute max = max(r, g, b) and min = min(r, g, b). L = (max + min) / 2. If max = min, S = 0 and H = 0 (grayscale). Otherwise compute the delta = max − min; S = delta / (1 − |2L − 1|); and H is determined by which channel is the max — R for hue 0–60°, G for hue 120–180°, B for hue 240–300° — with a specific formula per case.
HSL → RGB is the reverse — same color, no information lost in either direction. This is why Pantone → HSL is a clean one-way conversion while HSL → Pantone requires perceptual matching with Delta E 2000.
Use cases
- CSS implementation of a brand Pantone. Getting a Pantone color into a stylesheet as
hsl(h, s%, l%)— no conversion layer needed once you have the value. - Design system tokens. Storing colors as HSL strings makes it easy to generate tints and shades programmatically (adjust L, keep H and S) while keeping the brand hue intact.
- Hover and active states. Generate on-brand hover and active states by shifting HSL lightness ±10% rather than hand-picking new RGB values.
- Dynamic theming. Recolor UI elements at runtime by swapping one HSL channel — for example, dark mode by lowering L for backgrounds while keeping H and S.
- Accessibility tuning. Adjust HSL lightness to hit target contrast ratios while preserving the brand hue — cleaner than tweaking RGB channels.
Common mistakes
- Using the HSL values as if they are the Pantone spec — HSL is a screen approximation of the print color, not a substitute for physical verification.
- Confusing HSL with HSV — for the same color, HSL typically shows lower lightness than HSV shows value. They are not interchangeable.
- Assuming HSL is symmetric in perception — CSS HSL is not perceptually uniform. A hue of 60° looks much lighter than a hue of 240° at the same L and S. For perceptually uniform adjustments, use LCH or OKLCH in modern CSS.
- Expecting exact Pantone match from HSL — the match is approximate by definition.
HSL vs HSV at a glance
| Attribute | HSL | HSV |
|---|---|---|
| 3rd channel | Lightness = (max + min) / 2 | Value = max(r, g, b) |
| Pure red at full brightness | H=0, S=100, L=50 | H=0, S=100, V=100 |
| Used by | CSS, some web tools | Photoshop, Figma, Sketch |
| CSS function | hsl(h, s%, l%) | none |
Frequently asked questions
How do I convert Pantone to HSL?
Select a Pantone Solid Coated color from the dropdown. The converter reads the color RGB values from our catalog, converts them to HSL using the standard CSS HSL formula, and displays the hue (0–360°), saturation (0–100%), and lightness (0–100%) alongside a CSS-ready string — hsl(h, s%, l%) — that you can paste directly into your stylesheet.
What is HSL?
HSL (Hue, Saturation, Lightness) is a color model where hue is an angle on the color wheel (0° red, 120° green, 240° blue), saturation is the purity (0% gray to 100% fully saturated), and lightness is the brightness (0% black, 50% the "true" saturated color, 100% white). HSL is the color model CSS uses natively — hsl(h, s%, l%) is valid CSS and supported in every modern browser.
Why would I need Pantone in HSL?
Because CSS uses HSL and not Pantone. If you want to express a brand Pantone color in CSS, you need the HSL equivalent — either as an hsl() string or as three separate numbers you can adjust programmatically. HSL is also easier to manipulate than RGB: adjusting lightness from 50% to 40% produces a clean shade of the same hue, while adjusting the same in RGB requires separate calculations per channel. For design systems that need to generate tints or shades of a brand color, HSL is the natural model.
Are Pantone HSL values exact?
HSL values are exact derivations of the Pantone color RGB approximations in our catalog — mathematically, HSL is a lossless transform of RGB, so there is no precision loss. However, the underlying RGB values are themselves approximations of the physical Pantone inks. So the HSL shown is accurate for the RGB values in our catalog, but those RGB values approximate the print color. For most digital work this is sufficient; for print-critical work, always verify against a physical Pantone chip.
What is the difference between Pantone-to-HSL and Pantone-to-HSV?
Both start with the same RGB values and convert through different formulas. HSL stores brightness as "lightness" — the average of the max and min RGB channels — and HSL is CSS-native, so it is the right choice if the output will be used in web code. HSV stores brightness as "value" — the maximum RGB channel — and HSV is what Photoshop, Figma, and Sketch use internally, so it is the right choice if the output will be entered into a design tool. Same color, different numbers, different intended use.