{"id":8309474,"date":"2025-07-31T09:54:55","date_gmt":"2025-07-31T06:54:55","guid":{"rendered":"https:\/\/elementor.com\/old\/?p=8309474"},"modified":"2025-07-31T10:00:31","modified_gmt":"2025-07-31T07:00:31","slug":"hex-to-pantone-converter","status":"publish","type":"post","link":"https:\/\/elementor.com\/old\/tools\/hex-to-pantone-converter\/","title":{"rendered":"HEX to Pantone Converter"},"content":{"rendered":"\t\t<div data-elementor-type=\"container\" data-elementor-id=\"8309471\" class=\"elementor elementor-8309471\" data-elementor-post-type=\"elementor_library\">\n\t\t\t\t<div class=\"elementor-element elementor-element-33aea82 e-flex e-con-boxed e-con e-parent\" data-id=\"33aea82\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fb87d07 elementor-widget elementor-widget-spacer\" data-id=\"fb87d07\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b22040d elementor-widget elementor-widget-html\" data-id=\"b22040d\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n        \/* Base styles from user's reference *\/\r\n        body {\r\n            font-family: 'DM Sans', sans-serif;\r\n          \r\n\r\n        .html-viewer-app {\r\n            width: 100%;\r\n            max-width: 900px; \/* Wider layout *\/\r\n            margin: 0 auto;\r\n            padding: 20px;\r\n            background: transparent;\r\n            overflow: visible;\r\n            position: relative;\r\n            box-sizing: border-box;\r\n        }\r\n        \r\n        .header-text {\r\n            text-align: center;\r\n            margin-bottom: 24px;\r\n        }\r\n        \r\n        .header-text h1 {\r\n            font-size: 2rem;\r\n            font-weight: 700;\r\n            color: #333;\r\n            margin: 0 0 8px 0;\r\n        }\r\n        \r\n        .header-text p {\r\n            font-size: 1rem;\r\n            color: #555;\r\n            margin: 0;\r\n        }\r\n\r\n        .converter-section {\r\n            width: 100%;\r\n            display: flex;\r\n            flex-direction: column;\r\n            background: white;\r\n            border-radius: 8px;\r\n            overflow: hidden;\r\n            border: 1px solid #EBEBEB;\r\n            box-shadow: 0 4px 15px rgba(0,0,0,0.05);\r\n        }\r\n\r\n        .converter-content {\r\n            padding: 24px 32px 32px;\r\n        }\r\n        \r\n        .main-layout {\r\n            display: flex;\r\n            gap: 32px;\r\n        }\r\n\r\n        .left-panel {\r\n            flex: 2;\r\n            display: flex;\r\n            flex-direction: column;\r\n            gap: 24px;\r\n        }\r\n\r\n        .right-panel {\r\n            flex: 1;\r\n            min-width: 200px;\r\n        }\r\n        \r\n        .main-converter-area {\r\n            display: flex;\r\n            gap: 24px;\r\n            align-items: flex-start;\r\n        }\r\n\r\n        .color-preview-large {\r\n            width: 120px;\r\n            height: 120px;\r\n            border-radius: 8px;\r\n            border: 1px solid #EBEBEB;\r\n            flex-shrink: 0;\r\n        }\r\n\r\n        .controls {\r\n            flex-grow: 1;\r\n            display: flex;\r\n            flex-direction: column;\r\n            gap: 16px;\r\n        }\r\n\r\n        .input-group {\r\n            display: flex;\r\n            flex-direction: column;\r\n            gap: 8px;\r\n        }\r\n        \r\n        .input-group label {\r\n            font-weight: 500;\r\n            font-size: 0.95rem;\r\n            color: #555;\r\n        }\r\n\r\n        .input-field, .select-field {\r\n            width: 100%;\r\n            padding: 12px 16px;\r\n            border: 1.5px solid #EBEBEB;\r\n            border-radius: 6px;\r\n            font-family: 'DM Sans', sans-serif;\r\n            font-size: 1rem;\r\n            box-sizing: border-box;\r\n        }\r\n        \r\n        \/* Custom Color Picker Styles *\/\r\n        .color-picker-container {\r\n            border: 1px solid #EBEBEB;\r\n            padding: 10px;\r\n            border-radius: 8px;\r\n            display: flex;\r\n            gap: 10px;\r\n            height: 220px;\r\n        }\r\n        \r\n        .picker-main {\r\n            flex-grow: 1;\r\n            position: relative;\r\n            cursor: crosshair;\r\n        }\r\n        \r\n        .picker-hue {\r\n            width: 20px;\r\n            position: relative;\r\n            cursor: pointer;\r\n        }\r\n        \r\n        #colorCanvas, #hueCanvas {\r\n            width: 100%;\r\n            height: 100%;\r\n            display: block;\r\n            border-radius: 4px;\r\n        }\r\n        \r\n        .picker-selector {\r\n            position: absolute;\r\n            box-sizing: border-box;\r\n            border-radius: 50%;\r\n            pointer-events: none;\r\n        }\r\n        \r\n        #colorSelector {\r\n            width: 14px;\r\n            height: 14px;\r\n            border: 2px solid white;\r\n            box-shadow: 0 0 2px rgba(0,0,0,0.5);\r\n        }\r\n        \r\n        #hueSelector {\r\n            width: 100%;\r\n            height: 4px;\r\n            background-color: white;\r\n            border: 1px solid #888;\r\n            border-radius: 2px;\r\n        }\r\n        \r\n        \/* Results Display *\/\r\n        .results-container {\r\n            margin-top: 16px;\r\n            border-top: 1px solid #eee;\r\n            padding-top: 24px;\r\n        }\r\n        \r\n        .results-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));\r\n            gap: 20px;\r\n        }\r\n        \r\n        .color-swatch {\r\n            display: flex;\r\n            flex-direction: column;\r\n            align-items: center;\r\n            gap: 8px;\r\n            text-align: center;\r\n        }\r\n        \r\n        .color-swatch .swatch {\r\n            width: 100%;\r\n            padding-top: 100%; \/* Creates a 1:1 aspect ratio square *\/\r\n            position: relative;\r\n            border-radius: 8px;\r\n            border: 1px solid #eee;\r\n            overflow: hidden;\r\n        }\r\n        \r\n        .color-swatch .swatch-inner {\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            right: 0;\r\n            bottom: 0;\r\n            display: flex;\r\n            align-items: flex-end;\r\n            justify-content: center;\r\n            padding: 5px;\r\n            box-sizing: border-box;\r\n        }\r\n        \r\n        .color-swatch .hex-label {\r\n            background-color: rgba(0, 0, 0, 0.4);\r\n            color: white;\r\n            font-size: 0.75rem;\r\n            padding: 2px 5px;\r\n            border-radius: 4px;\r\n            font-family: 'Courier New', monospace;\r\n        }\r\n        \r\n        .color-swatch .label {\r\n            font-size: 0.9rem;\r\n            color: #333;\r\n            font-weight: 500;\r\n        }\r\n        \r\n        .no-results {\r\n            text-align: center;\r\n            color: #888;\r\n            padding: 20px;\r\n            grid-column: 1 \/ -1;\r\n        }\r\n\r\n        @media (max-width: 768px) {\r\n            .main-layout {\r\n                flex-direction: column;\r\n            }\r\n            .main-converter-area {\r\n                flex-direction: column;\r\n                align-items: stretch;\r\n            }\r\n            .color-preview-large {\r\n                width: 100%;\r\n                height: 80px;\r\n            }\r\n        }\r\n\r\n    <\/style>\r\n\r\n\r\n    <div class=\"html-viewer-app\">\r\n        <div class=\"header-text\">\r\n            \r\n            <p>Convert your HEX color to Pantone (PMS) color format with our HEX to Pantone Converter quickly.<\/p>\r\n        <\/div>\r\n        <div class=\"converter-section\">\r\n            <div class=\"converter-content\">\r\n                <div class=\"main-layout\">\r\n                    <div class=\"left-panel\">\r\n                        <div class=\"main-converter-area\">\r\n                            <div id=\"colorPreview\" class=\"color-preview-large\"><\/div>\r\n                            <div class=\"controls\">\r\n                                <div class=\"input-group\">\r\n                                    <label for=\"hexInput\">HEX<\/label>\r\n                                    <input type=\"text\" id=\"hexInput\" class=\"input-field\" placeholder=\"408060\">\r\n                                <\/div>\r\n                                <div class=\"input-group\">\r\n                                    <label for=\"distanceSelect\">Distance<\/label>\r\n                                    <select id=\"distanceSelect\" class=\"select-field\">\r\n                                        <option value=\"10\">Very Close (< 10)<\/option>\r\n                                        <option value=\"20\">Close (< 20)<\/option>\r\n                                        <option value=\"40\" selected>Similar (< 40)<\/option>\r\n                                        <option value=\"80\">Broad (< 80)<\/option>\r\n                                        <option value=\"Infinity\">Show All<\/option>\r\n                                    <\/select>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                        <div class=\"results-container\" id=\"resultsContainer\">\r\n                            <div class=\"results-grid\" id=\"resultsGrid\">\r\n                                <!-- Results will be populated here -->\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"right-panel\">\r\n                         <div class=\"color-picker-container\">\r\n                             <div class=\"picker-main\">\r\n                                <canvas id=\"colorCanvas\"><\/canvas>\r\n                                <div id=\"colorSelector\" class=\"picker-selector\"><\/div>\r\n                            <\/div>\r\n                            <div class=\"picker-hue\">\r\n                                <canvas id=\"hueCanvas\"><\/canvas>\r\n                                <div id=\"hueSelector\" class=\"picker-selector\"><\/div>\r\n                            <\/div>\r\n                         <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <script>\r\n        \/\/ --- DOM Elements ---\r\n        const colorPreview = document.getElementById('colorPreview');\r\n        const hexInput = document.getElementById('hexInput');\r\n        const distanceSelect = document.getElementById('distanceSelect');\r\n        const resultsGrid = document.getElementById('resultsGrid');\r\n        \r\n        \/\/ --- Custom Color Picker Elements ---\r\n        const colorCanvas = document.getElementById('colorCanvas');\r\n        const colorCtx = colorCanvas.getContext('2d');\r\n        const hueCanvas = document.getElementById('hueCanvas');\r\n        const hueCtx = hueCanvas.getContext('2d');\r\n        const colorSelector = document.getElementById('colorSelector');\r\n        const hueSelector = document.getElementById('hueSelector');\r\n\r\n        \/\/ --- Pantone Color Library (Expanded Subset) ---\r\n        const pantoneLibrary = [\r\n            { name: \"PANTONE 18-1763\", hex: \"#BE0032\" }, { name: \"PANTONE 19-4052\", hex: \"#0F4C81\" },\r\n            { name: \"7475 C\", hex: \"#487A7B\" }, { name: \"5545 C\", hex: \"#43695B\" },\r\n            { name: \"507F70\", hex: \"#507F70\" }, { name: \"7730 C\", hex: \"#489560\" },\r\n            { name: \"PANTONE 17-5104\", hex: \"#989898\" }, { name: \"PANTONE 14-0848\", hex: \"#F5DF4D\" },\r\n            { name: \"PANTONE 16-1359\", hex: \"#FF5733\" }, { name: \"PANTONE 18-3838\", hex: \"#5F4B8B\" },\r\n            { name: \"PANTONE 15-0343\", hex: \"#88B04B\" }, { name: \"PANTONE 15-5519\", hex: \"#009B77\" },\r\n            { name: \"PANTONE 13-0755\", hex: \"#DFCFBE\" }, { name: \"PANTONE 19-1557\", hex: \"#9B1B30\" },\r\n            { name: \"PANTONE Yellow C\", hex: \"#FEDD00\" }, { name: \"PANTONE 293 C\", hex: \"#0038A8\" },\r\n            { name: \"PANTONE 185 C\", hex: \"#C8102E\" }, { name: \"PANTONE Green C\", hex: \"#009A44\" },\r\n            { name: \"PANTONE Black C\", hex: \"#231F20\" }, { name: \"PANTONE Cool Gray 9 C\", hex: \"#75787B\" },\r\n            { name: \"PANTONE 485 C\", hex: \"#DA291C\" }, { name: \"PANTONE 354 C\", hex: \"#00A753\" },\r\n            { name: \"PANTONE Process Blue C\", hex: \"#0085CA\" }, { name: \"PANTONE Orange 021 C\", hex: \"#F58220\" },\r\n            { name: \"PANTONE 200 C\", hex: \"#BA0C2F\" }, { name: \"PANTONE 286 C\", hex: \"#003087\" },\r\n            { name: \"PANTONE 109 C\", hex: \"#FFD100\" }, { name: \"PANTONE 348 C\", hex: \"#006A4E\" },\r\n            { name: \"PANTONE Reflex Blue C\", hex: \"#1C355E\" }, { name: \"PANTONE 144 C\", hex: \"#EC8A00\" },\r\n            { name: \"PANTONE 219 C\", hex: \"#DA0080\" }, { name: \"PANTONE 2602 C\", hex: \"#522D80\" },\r\n            { name: \"PANTONE 7474 C\", hex: \"#00847F\" }, { name: \"PANTONE 172 C\", hex: \"#FA4616\" },\r\n            { name: \"PANTONE 431 C\", hex: \"#4A545A\" }, { name: \"PANTONE 1235 C\", hex: \"#FDB913\" }\r\n        ];\r\n\r\n        \/\/ --- Color Conversion and Matching Logic ---\r\n\r\n        function hexToRgb(hex) {\r\n            hex = hex.replace(\/^#\/, '');\r\n            const result = \/^([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$\/i.exec(hex);\r\n            return result ? {\r\n                r: parseInt(result[1], 16),\r\n                g: parseInt(result[2], 16),\r\n                b: parseInt(result[3], 16)\r\n            } : null;\r\n        }\r\n\r\n        function colorDistance(rgb1, rgb2) {\r\n            const rDiff = rgb1.r - rgb2.r;\r\n            const gDiff = rgb1.g - rgb2.g;\r\n            const bDiff = rgb1.b - rgb2.b;\r\n            return Math.sqrt(rDiff * rDiff + gDiff * gDiff + bDiff * bDiff);\r\n        }\r\n\r\n        function findAndDisplayMatches() {\r\n            let inputHex = hexInput.value.trim();\r\n            if (inputHex.length === 6 && !inputHex.startsWith('#')) {\r\n                inputHex = '#' + inputHex;\r\n            }\r\n            \r\n            const inputRgb = hexToRgb(inputHex);\r\n            const maxDistance = parseFloat(distanceSelect.value);\r\n\r\n            if (!inputRgb) {\r\n                resultsGrid.innerHTML = '<p class=\"no-results\">Enter a valid HEX code to see matches.<\/p>';\r\n                return;\r\n            }\r\n            \r\n            colorPreview.style.backgroundColor = inputHex;\r\n\r\n            const matches = pantoneLibrary.map(pantone => {\r\n                const pantoneRgb = hexToRgb(pantone.hex);\r\n                const distance = colorDistance(inputRgb, pantoneRgb);\r\n                return { ...pantone, distance };\r\n            })\r\n            .filter(pantone => pantone.distance <= maxDistance)\r\n            .sort((a, b) => a.distance - b.distance);\r\n            \r\n            displayResults(matches);\r\n        }\r\n        \r\n        function displayResults(matches) {\r\n            resultsGrid.innerHTML = '';\r\n            if (matches.length === 0) {\r\n                resultsGrid.innerHTML = '<p class=\"no-results\">No Pantone matches found within the selected distance.<\/p>';\r\n                return;\r\n            }\r\n            const matchesToDisplay = matches.slice(0, 8);\r\n            matchesToDisplay.forEach(match => {\r\n                const swatchElement = document.createElement('div');\r\n                swatchElement.className = 'color-swatch';\r\n                swatchElement.innerHTML = `\r\n                    <div class=\"swatch\">\r\n                        <div class=\"swatch-inner\" style=\"background-color: ${match.hex};\">\r\n                            <span class=\"hex-label\">${match.hex}<\/span>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <span class=\"label\">${match.name}<\/span>\r\n                `;\r\n                resultsGrid.appendChild(swatchElement);\r\n            });\r\n        }\r\n        \r\n        \/\/ Debounce function to limit how often a function is called\r\n        function debounce(func, delay) {\r\n            let timeout;\r\n            return function(...args) {\r\n                const context = this;\r\n                clearTimeout(timeout);\r\n                timeout = setTimeout(() => func.apply(context, args), delay);\r\n            };\r\n        }\r\n        \r\n        \/\/ --- Custom Color Picker Logic ---\r\n        let pickerState = { hue: 0, saturation: 1, lightness: 0.5 };\r\n        let isDraggingHue = false;\r\n        let isDraggingColor = false;\r\n\r\n        function drawHueCanvas() {\r\n            const width = hueCanvas.width;\r\n            const height = hueCanvas.height;\r\n            for (let i = 0; i < height; i++) {\r\n                const hue = (i \/ height) * 360;\r\n                hueCtx.fillStyle = `hsl(${hue}, 100%, 50%)`;\r\n                hueCtx.fillRect(0, i, width, 1);\r\n            }\r\n        }\r\n\r\n        function drawColorCanvas() {\r\n            const width = colorCanvas.width;\r\n            const height = colorCanvas.height;\r\n            \r\n            colorCtx.fillStyle = `hsl(${pickerState.hue}, 100%, 50%)`;\r\n            colorCtx.fillRect(0, 0, width, height);\r\n\r\n            const satGradient = colorCtx.createLinearGradient(0, 0, width, 0);\r\n            satGradient.addColorStop(0, 'rgba(255,255,255,1)');\r\n            satGradient.addColorStop(1, 'rgba(255,255,255,0)');\r\n            colorCtx.fillStyle = satGradient;\r\n            colorCtx.fillRect(0, 0, width, height);\r\n\r\n            const valGradient = colorCtx.createLinearGradient(0, 0, 0, height);\r\n            valGradient.addColorStop(0, 'rgba(0,0,0,0)');\r\n            valGradient.addColorStop(1, 'rgba(0,0,0,1)');\r\n            colorCtx.fillStyle = valGradient;\r\n            colorCtx.fillRect(0, 0, width, height);\r\n        }\r\n\r\n        function updateFromPicker() {\r\n            const rgb = hslToRgb(pickerState.hue \/ 360, pickerState.saturation, pickerState.lightness);\r\n            const hex = rgbToHex(rgb.r, rgb.g, rgb.b);\r\n            hexInput.value = hex.substring(1).toUpperCase();\r\n            findAndDisplayMatches();\r\n            \r\n            \/\/ Update selector positions\r\n            const hueY = (pickerState.hue \/ 360) * hueCanvas.height;\r\n            hueSelector.style.top = `calc(${hueY}px - 2px)`;\r\n            \r\n            const colorX = pickerState.saturation * colorCanvas.width;\r\n            const colorY = (1 - pickerState.lightness) * colorCanvas.height;\r\n            colorSelector.style.left = `calc(${colorX}px - 7px)`;\r\n            colorSelector.style.top = `calc(${colorY}px - 7px)`;\r\n        }\r\n        \r\n        \/\/ Color conversion utilities\r\n        function hslToRgb(h, s, l){\r\n            let r, g, b;\r\n            if(s == 0){ r = g = b = l; }\r\n            else {\r\n                const hue2rgb = (p, q, t) => {\r\n                    if(t < 0) t += 1;\r\n                    if(t > 1) t -= 1;\r\n                    if(t < 1\/6) return p + (q - p) * 6 * t;\r\n                    if(t < 1\/2) return q;\r\n                    if(t < 2\/3) return p + (q - p) * (2\/3 - t) * 6;\r\n                    return p;\r\n                }\r\n                const q = l < 0.5 ? l * (1 + s) : l + s - l * s;\r\n                const p = 2 * l - q;\r\n                r = hue2rgb(p, q, h + 1\/3);\r\n                g = hue2rgb(p, q, h);\r\n                b = hue2rgb(p, q, h - 1\/3);\r\n            }\r\n            return {r: Math.round(r * 255), g: Math.round(g * 255), b: Math.round(b * 255)};\r\n        }\r\n        \r\n        function rgbToHex(r, g, b) {\r\n            return \"#\" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase();\r\n        }\r\n\r\n        \/\/ Picker event listeners\r\n        hueCanvas.addEventListener('mousedown', (e) => { isDraggingHue = true; moveHue(e); });\r\n        colorCanvas.addEventListener('mousedown', (e) => { isDraggingColor = true; moveColor(e); });\r\n        document.addEventListener('mousemove', (e) => {\r\n            if (isDraggingHue) moveHue(e);\r\n            if (isDraggingColor) moveColor(e);\r\n        });\r\n        document.addEventListener('mouseup', () => { isDraggingHue = false; isDraggingColor = false; });\r\n        \r\n        function moveHue(e) {\r\n            const rect = hueCanvas.getBoundingClientRect();\r\n            let y = e.clientY - rect.top;\r\n            y = Math.max(0, Math.min(rect.height, y));\r\n            pickerState.hue = (y \/ rect.height) * 360;\r\n            drawColorCanvas();\r\n            updateFromPicker();\r\n        }\r\n        \r\n        function moveColor(e) {\r\n            const rect = colorCanvas.getBoundingClientRect();\r\n            let x = e.clientX - rect.left;\r\n            let y = e.clientY - rect.top;\r\n            x = Math.max(0, Math.min(rect.width, x));\r\n            y = Math.max(0, Math.min(rect.height, y));\r\n            pickerState.saturation = x \/ rect.width;\r\n            pickerState.lightness = 1 - (y \/ rect.height);\r\n            updateFromPicker();\r\n        }\r\n\r\n        \/\/ --- General Event Listeners ---\r\n        const debouncedFind = debounce(findAndDisplayMatches, 250);\r\n        hexInput.addEventListener('input', () => {\r\n             debouncedFind();\r\n             \/\/ Future: update picker from hex input\r\n        });\r\n        distanceSelect.addEventListener('change', findAndDisplayMatches);\r\n\r\n        \/\/ --- Initialization ---\r\n        function initialize() {\r\n            drawHueCanvas();\r\n            drawColorCanvas();\r\n            const initialColor = \"408060\";\r\n            hexInput.value = initialColor;\r\n            findAndDisplayMatches();\r\n        }\r\n        \r\n        initialize();\r\n\r\n    <\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":2024235,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[485],"tags":[788],"class_list":["post-8309474","post","type-post","status-publish","format-standard","hentry","category-tools","tag-html-css-tools"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.3.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Free HEX to Pantone Converter<\/title>\n<meta name=\"description\" content=\"convert any HEX color code to its closest Pantone (PMS) equivalent with our free online tool. for designers to ensure color consistency\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/old\/tools\/hex-to-pantone-converter\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Free HEX to Pantone Converter\" \/>\n<meta property=\"og:description\" content=\"convert any HEX color code to its closest Pantone (PMS) equivalent with our free online tool. for designers to ensure color consistency\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/old\/tools\/hex-to-pantone-converter\/\" \/>\n<meta property=\"og:site_name\" content=\"Elementor\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/elemntor\" \/>\n<meta property=\"article:published_time\" content=\"2025-07-31T06:54:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-31T07:00:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/old\/wp-content\/uploads\/2022\/02\/HP.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@elemntor\" \/>\n<meta name=\"twitter:site\" content=\"@elemntor\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"itamarha\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/old\/tools\/hex-to-pantone-converter\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/old\/tools\/hex-to-pantone-converter\/\"},\"author\":{\"name\":\"itamarha\",\"@id\":\"https:\/\/elementor.com\/old\/#\/schema\/person\/5932f1d4bb083ddca6b036a65fbb9cc0\"},\"headline\":\"HEX to Pantone Converter\",\"datePublished\":\"2025-07-31T06:54:55+00:00\",\"dateModified\":\"2025-07-31T07:00:31+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/old\/tools\/hex-to-pantone-converter\/\"},\"wordCount\":6,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/old\/#organization\"},\"keywords\":[\"Html-Css-tools\"],\"articleSection\":[\"tools\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/old\/tools\/hex-to-pantone-converter\/\",\"url\":\"https:\/\/elementor.com\/old\/tools\/hex-to-pantone-converter\/\",\"name\":\"Free HEX to Pantone Converter\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/old\/#website\"},\"datePublished\":\"2025-07-31T06:54:55+00:00\",\"dateModified\":\"2025-07-31T07:00:31+00:00\",\"description\":\"convert any HEX color code to its closest Pantone (PMS) equivalent with our free online tool. for designers to ensure color consistency\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/old\/tools\/hex-to-pantone-converter\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/old\/tools\/hex-to-pantone-converter\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/old\/tools\/hex-to-pantone-converter\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/elementor.com\/old\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HEX to Pantone Converter\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/old\/#website\",\"url\":\"https:\/\/elementor.com\/old\/\",\"name\":\"Elementor\",\"description\":\"Website Builder\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/old\/#organization\"},\"alternateName\":\"Elementor Website Builder\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/old\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/old\/#organization\",\"name\":\"Elementor Website Builder\",\"url\":\"https:\/\/elementor.com\/old\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/old\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/old\/wp-content\/uploads\/2024\/07\/logo.svg\",\"contentUrl\":\"https:\/\/elementor.com\/old\/wp-content\/uploads\/2024\/07\/logo.svg\",\"width\":120,\"height\":120,\"caption\":\"Elementor Website Builder\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/old\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/elemntor\",\"https:\/\/x.com\/elemntor\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/old\/#\/schema\/person\/5932f1d4bb083ddca6b036a65fbb9cc0\",\"name\":\"itamarha\",\"url\":\"https:\/\/elementor.com\/old\/author\/itamarha\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Free HEX to Pantone Converter","description":"convert any HEX color code to its closest Pantone (PMS) equivalent with our free online tool. for designers to ensure color consistency","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/old\/tools\/hex-to-pantone-converter\/","og_locale":"en_US","og_type":"article","og_title":"Free HEX to Pantone Converter","og_description":"convert any HEX color code to its closest Pantone (PMS) equivalent with our free online tool. for designers to ensure color consistency","og_url":"https:\/\/elementor.com\/old\/tools\/hex-to-pantone-converter\/","og_site_name":"Elementor","article_publisher":"https:\/\/www.facebook.com\/elemntor","article_published_time":"2025-07-31T06:54:55+00:00","article_modified_time":"2025-07-31T07:00:31+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/elementor.com\/old\/wp-content\/uploads\/2022\/02\/HP.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_creator":"@elemntor","twitter_site":"@elemntor","twitter_misc":{"Written by":"itamarha","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/old\/tools\/hex-to-pantone-converter\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/old\/tools\/hex-to-pantone-converter\/"},"author":{"name":"itamarha","@id":"https:\/\/elementor.com\/old\/#\/schema\/person\/5932f1d4bb083ddca6b036a65fbb9cc0"},"headline":"HEX to Pantone Converter","datePublished":"2025-07-31T06:54:55+00:00","dateModified":"2025-07-31T07:00:31+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/old\/tools\/hex-to-pantone-converter\/"},"wordCount":6,"publisher":{"@id":"https:\/\/elementor.com\/old\/#organization"},"keywords":["Html-Css-tools"],"articleSection":["tools"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/old\/tools\/hex-to-pantone-converter\/","url":"https:\/\/elementor.com\/old\/tools\/hex-to-pantone-converter\/","name":"Free HEX to Pantone Converter","isPartOf":{"@id":"https:\/\/elementor.com\/old\/#website"},"datePublished":"2025-07-31T06:54:55+00:00","dateModified":"2025-07-31T07:00:31+00:00","description":"convert any HEX color code to its closest Pantone (PMS) equivalent with our free online tool. for designers to ensure color consistency","breadcrumb":{"@id":"https:\/\/elementor.com\/old\/tools\/hex-to-pantone-converter\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/old\/tools\/hex-to-pantone-converter\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/old\/tools\/hex-to-pantone-converter\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/elementor.com\/old\/"},{"@type":"ListItem","position":2,"name":"HEX to Pantone Converter"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/old\/#website","url":"https:\/\/elementor.com\/old\/","name":"Elementor","description":"Website Builder","publisher":{"@id":"https:\/\/elementor.com\/old\/#organization"},"alternateName":"Elementor Website Builder","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/old\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/old\/#organization","name":"Elementor Website Builder","url":"https:\/\/elementor.com\/old\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/old\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/old\/wp-content\/uploads\/2024\/07\/logo.svg","contentUrl":"https:\/\/elementor.com\/old\/wp-content\/uploads\/2024\/07\/logo.svg","width":120,"height":120,"caption":"Elementor Website Builder"},"image":{"@id":"https:\/\/elementor.com\/old\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/elemntor","https:\/\/x.com\/elemntor"]},{"@type":"Person","@id":"https:\/\/elementor.com\/old\/#\/schema\/person\/5932f1d4bb083ddca6b036a65fbb9cc0","name":"itamarha","url":"https:\/\/elementor.com\/old\/author\/itamarha\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/old\/wp-json\/wp\/v2\/posts\/8309474","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/old\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/old\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/old\/wp-json\/wp\/v2\/users\/2024235"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/old\/wp-json\/wp\/v2\/comments?post=8309474"}],"version-history":[{"count":3,"href":"https:\/\/elementor.com\/old\/wp-json\/wp\/v2\/posts\/8309474\/revisions"}],"predecessor-version":[{"id":8309478,"href":"https:\/\/elementor.com\/old\/wp-json\/wp\/v2\/posts\/8309474\/revisions\/8309478"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/old\/wp-json\/wp\/v2\/media?parent=8309474"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/old\/wp-json\/wp\/v2\/categories?post=8309474"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/old\/wp-json\/wp\/v2\/tags?post=8309474"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}