Pantone to Hex
Pantone is a standardized color system used in printing and manufacturing. Convert to hex for web use.
Color Formats Supported
- HEX: 6-digit hexadecimal codes (#FF5733)
- RGB: Red, Green, Blue values (255, 87, 51)
- HSL: Hue, Saturation, Lightness (11°, 100%, 60%)
- CMYK: Cyan, Magenta, Yellow, Key for print
Using Colors Effectively
1. Accessibility: Ensure sufficient contrast for text readability 2. Consistency: Use a defined palette throughout your project 3. Hierarchy: Use color to guide attention and establish importance 4. Brand: Maintain consistent colors across all materials
Color Theory Basics
- Primary colors: Red, blue, yellow (can't be mixed from other colors)
- Secondary colors: Orange, green, purple (mixed from primaries)
- Warm vs Cool: Warm colors (red, orange) feel energetic; cool colors (blue, green) feel calm
Why Pantone Conversion Is Approximate
Pantone colours are physical ink formulations, not digital values. A Pantone swatch is defined by the ink mixed to a recipe and printed on a specified stock — there is no mathematical conversion to RGB, only a best approximation for a given viewing condition.
Consequences worth knowing:
- The same Pantone colour has different values on coated and uncoated stock. PMS 185 C
- Many Pantone colours are outside the sRGB gamut, particularly fluorescents and
- Pantone's own libraries are licensed. Published conversion tables vary, and Adobe
If brand fidelity matters, get the hex from the brand's own guidelines rather than converting. Most brand books specify both, precisely because the conversion is a judgement call.
A Full Ramp From This Colour
Design systems settle on a 50–900 scale because it covers backgrounds, borders, text and states without anyone reaching outside the palette. Mixing toward white and black rather than adjusting HSL lightness keeps more of the hue's character:
| Step | Colour | Contrast on white | Safe for |
|---|---|---|---|
| 50 | #F5F9FF | 1.06:1 | backgrounds and fills |
| 100 | #EBF3FE | 1.12:1 | backgrounds and fills |
| 200 | #CEE0FD | 1.34:1 | backgrounds and fills |
| 300 | #B1CDFB | 1.62:1 | backgrounds and fills |
| 400 | #76A8F9 | 2.40:1 | backgrounds and fills |
| 500 | #3B82F6 | 3.68:1 | large text, borders |
| 600 | #326FD1 | 4.85:1 | body text on white |
| 700 | #295BAC | 6.59:1 | body text on white |
| 800 | #204887 | 8.98:1 | body text on white |
| 900 | #183462 | 12.31:1 | body text on white |
Adjusting It
Base colour in HSL is hsl(217, 91%, 60%). Two useful moves:
``css
/* +10% lightness, same hue */
--lighter: #6da2f8;
/* −10% lightness */
--darker: #0b64f4;
``
Raising lightness also drops perceived saturation, so a lightened colour reads greyer than its numbers suggest. Adding 5–10% saturation alongside every 20% of lightness keeps the ramp looking like one hue rather than a fade to grey.