{"id":4046,"date":"2026-07-01T17:02:55","date_gmt":"2026-07-01T09:02:55","guid":{"rendered":"https:\/\/www.yccosmeticpack.com\/?page_id=4046"},"modified":"2026-07-01T17:06:29","modified_gmt":"2026-07-01T09:06:29","slug":"custom-color","status":"publish","type":"page","link":"https:\/\/www.yccosmeticpack.com\/fr\/custom-color\/","title":{"rendered":"Couleur personnalis\u00e9e"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"4046\" class=\"elementor elementor-4046\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8db785c e-grid e-con-boxed elementor-invisible e-con e-parent\" data-id=\"8db785c\" data-element_type=\"container\" data-settings=\"{&quot;animation&quot;:&quot;fadeInUp&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fc834d9 elementor-widget elementor-widget-html\" data-id=\"fc834d9\" 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    \/* \u6700\u5916\u5c42\u5361\u7247\u5bb9\u5668 *\/\r\n    .kpqwxz {\r\n        --color-dfgery: #FE7F9F; \/* \u9ed8\u8ba4\u6df1\u7ea2\u8272 *\/\r\n        --color-lkjhgf: #FE7F9F; \/* \u9ed8\u8ba4\u91d1\u8272 *\/\r\n        \r\n        background-color: #ffffff;\r\n        width: 100%;\r\n        max-width: 540px;\r\n        border-radius: 24px;\r\n        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);\r\n        padding: 24px;\r\n        display: flex;\r\n        gap: 30px;\r\n        font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\r\n        flex-direction: column;\r\n        \r\n    }\r\n\r\n    .kpqwxz, .kpqwxz * {\r\n        box-sizing: border-box;\r\n    }\r\n\r\n    .mnhytg {\r\n        position: relative;\r\n        width: 100%;\r\n        aspect-ratio: 1 \/ 1; \r\n        background-color: #f8fafc;\r\n        border-radius: 16px;\r\n        overflow: hidden;\r\n        border: 2px solid #f1f5f9;\r\n        isolation: isolate; \r\n    }\r\n\r\n    .bzvcxs {\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        width: 100%;\r\n        height: 100%;\r\n        background-size: contain;\r\n        background-repeat: no-repeat;\r\n        background-position: center;\r\n    }\r\n\r\n    \/* \u76d2\u5b50\u5916\u90e8\u989c\u8272\u5c42 - Color 1 *\/\r\n    #dfgery {\r\n        background-color: var(--color-dfgery);\r\n        -webkit-mask-image: url('https:\/\/www.yccosmeticpack.com\/wp-content\/uploads\/2026\/05\/2-1.png');\r\n        -webkit-mask-size: contain;\r\n        -webkit-mask-repeat: no-repeat;\r\n        -webkit-mask-position: center;\r\n        mask-image: url('https:\/\/www.yccosmeticpack.com\/wp-content\/uploads\/2026\/05\/2-1.png'); \r\n        mask-size: contain;\r\n        mask-repeat: no-repeat;\r\n        mask-position: center;\r\n        z-index: 1; \r\n    }\r\n\r\n    \/* \u9634\u5f71\u7eb9\u7406\u56fe\u5c42 - \u5e94\u8be5\u7528 1.png *\/\r\n    #poiuyt {\r\n        background-image: url('https:\/\/www.yccosmeticpack.com\/wp-content\/uploads\/2026\/05\/1.png');\r\n        mix-blend-mode: multiply; \r\n        pointer-events: none;\r\n        z-index: 10;\r\n    }\r\n\r\n    \/* \u76d2\u5b50\u5185\u90e8\u989c\u8272\u5c42 - Color 2 *\/\r\n    #lkjhgf {\r\n        background-color: var(--color-lkjhgf);\r\n        -webkit-mask-image: url('https:\/\/www.yccosmeticpack.com\/wp-content\/uploads\/2026\/05\/3-2.png');\r\n        -webkit-mask-size: contain;\r\n        -webkit-mask-repeat: no-repeat;\r\n        -webkit-mask-position: center;\r\n        mask-image: url('https:\/\/www.yccosmeticpack.com\/wp-content\/uploads\/2026\/05\/3-2.png'); \r\n        mask-size: contain;\r\n        mask-repeat: no-repeat;\r\n        mask-position: center;\r\n        z-index: 15; \r\n    }\r\n\r\n    \/* \u63a7\u5236\u5668\u533a\u57df *\/\r\n    .mnbvcx {\r\n        display: flex;\r\n        \r\n        justify-content: space-between;\r\n        gap: 20px;\r\n    }\r\n\r\n    .qazwsx {\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 12px;\r\n        flex: 1; \r\n        align-items: center; \r\n        background: #f8fafc;\r\n        padding: 16px;\r\n        border-radius: 12px;\r\n    }\r\n\r\n    .qazwsx label {\r\n        font-weight: 700;\r\n        font-size: 16px;\r\n        color: #475569;\r\n       \r\n        letter-spacing: 0.5px;\r\n        margin: 0;\r\n    }\r\n\r\n    .kpqwxz input[type=\"color\"] {\r\n        width: 100px;\r\n        height: 40px;\r\n        padding: 0;\r\n        border: 3px solid #ffffff;\r\n        border-radius: 20px; \r\n        cursor: pointer;\r\n        background: none;\r\n        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\r\n        transition: transform 0.2s;\r\n    }\r\n\r\n    .kpqwxz input[type=\"color\"]:hover {\r\n        transform: scale(1.05);\r\n    }\r\n\r\n    .kpqwxz input[type=\"color\"]::-webkit-color-swatch-wrapper {\r\n        padding: 0;\r\n    }\r\n    .kpqwxz input[type=\"color\"]::-webkit-color-swatch {\r\n        border: none;\r\n        border-radius: 20px;\r\n    }\r\n    .kpqwxz input[type=\"color\"]::-moz-color-swatch {\r\n        border: none;\r\n        border-radius: 20px;\r\n    }\r\n\r\n    \/* \u65b0\u589e\uff1a\u624b\u52a8\u8f93\u5165\u8272\u53f7\u7684\u6587\u672c\u6846\u6837\u5f0f *\/\r\n    .kpqwxz input[type=\"text\"].hex-input {\r\n        width: 100%;\r\n        max-width: 100px; \/* \u5339\u914d\u4e0a\u9762\u62fe\u8272\u5668\u7684\u5bbd\u5ea6 *\/\r\n        height: 28px;\r\n        padding: 0 6px;\r\n        border: 1px solid #cbd5e1;\r\n        border-radius: 6px;\r\n        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;\r\n        font-size: 12px;\r\n        text-align: center;\r\n        color: #334155;\r\n        background: #ffffff;\r\n        box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);\r\n        transition: all 0.2s;\r\n        text-transform: uppercase;\r\n    }\r\n\r\n    .kpqwxz input[type=\"text\"].hex-input:focus {\r\n        border-color: #3b82f6;\r\n        outline: none;\r\n        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);\r\n    }\r\n    .kpqwxz input[type=\"text\"].hex-input::placeholder {\r\n        color: #94a3b8;\r\n        font-size: 11px;\r\n        text-transform: none;\r\n    }\r\n<\/style>\r\n\r\n<div class=\"kpqwxz\" style=\"display:flex;\">\r\n    <div class=\"mnhytg\">\r\n        <div id=\"dfgery\" class=\"bzvcxs\"><\/div>\r\n        <div id=\"poiuyt\" class=\"bzvcxs\"><\/div>\r\n        <div id=\"lkjhgf\" class=\"bzvcxs\"><\/div>\r\n    <\/div>\r\n\r\n    <div class=\"mnbvcx\">\r\n        <div class=\"qazwsx\">\r\n            <label for=\"edcrfv\">Base<\/label>\r\n            <input type=\"color\" id=\"edcrfv\" value=\"#FE7F9F\">\r\n            <!-- \u65b0\u589e Color1 \u6587\u672c\u8f93\u5165\u6846 -->\r\n            <input type=\"text\" class=\"hex-input\" id=\"txt-edcrfv\" value=\"#FE7F9F\" placeholder=\"\u6f58\u901a\/Hex\">\r\n        <\/div>\r\n\r\n        <div class=\"qazwsx\">\r\n            <label for=\"tgbnhy\">Cap<\/label>\r\n            <input type=\"color\" id=\"tgbnhy\" value=\"#FE7F9F\">\r\n            <!-- \u65b0\u589e Color2 \u6587\u672c\u8f93\u5165\u6846 -->\r\n            <input type=\"text\" class=\"hex-input\" id=\"txt-tgbnhy\" value=\"#FE7F9F\" placeholder=\"\u6f58\u901a\/Hex\">\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<script>\r\n    (function() {\r\n        const widgetContainer = document.querySelector('.kpqwxz');\r\n        \r\n        \/\/ \u62fe\u8272\u5668\u8282\u70b9\r\n        const color1Input = document.getElementById('edcrfv');\r\n        const color2Input = document.getElementById('tgbnhy');\r\n\r\n        \/\/ \u6587\u672c\u6846\u8282\u70b9\r\n        const txt1Input = document.getElementById('txt-edcrfv');\r\n        const txt2Input = document.getElementById('txt-tgbnhy');\r\n\r\n        \/\/ \u5e38\u5907\u6f58\u901a\u8272\u5b57\u5178\u6570\u636e\r\n        const pantoneDictionary = {\r\n            \"13-1023\": \"#FFD1B3\", \/\/ \u67d4\u548c\u6843\r\n            \"18-1750\": \"#BE3455\", \/\/ \u975e\u51e1\u6d0b\u7ea2\r\n            \"17-3938\": \"#6667AB\", \/\/ \u957f\u6625\u82b1\u84dd\r\n            \"17-5104\": \"#939597\", \/\/ \u6781\u81f4\u7070\r\n            \"13-0647\": \"#F5DF4D\", \/\/ \u4eae\u4e3d\u9ec4\r\n            \"19-4052\": \"#0F4C81\", \/\/ \u7ecf\u5178\u84dd\r\n            \"16-1546\": \"#FF6F61\", \/\/ \u6d3b\u73ca\u745a\u6a58\r\n            \"18-3838\": \"#5F4B8B\", \/\/ \u7d2b\u5916\u5149\u8272\r\n            \"15-0343\": \"#88B04B\", \/\/ \u8349\u6728\u7eff\r\n            \"15-3919\": \"#91A8D0\", \/\/ \u5b81\u9759\u84dd\r\n            \"13-1520\": \"#F7CAC9\", \/\/ \u7c89\u6676\r\n            \"18-1438\": \"#964F4C\", \/\/ \u739b\u8428\u62c9\u9152\u7ea2\r\n            \"18-3224\": \"#AD5E99\", \/\/ \u7480\u74a8\u7d2b\u5170\r\n            \"17-5641\": \"#009473\", \/\/ \u7fe1\u7fe0\u7eff\r\n            \"17-1463\": \"#DD4124\", \/\/ \u63a2\u6208\u6a58\r\n            \"18-2120\": \"#D94F70\", \/\/ \u5fcd\u51ac\u7ea2\r\n            \"15-5519\": \"#45B5AA\", \/\/ \u753b\u62a5\u84dd\r\n            \"14-0848\": \"#F0C05A\", \/\/ \u542b\u7f9e\u8349\u9ec4\r\n            \"18-3943\": \"#5A5B9F\", \/\/ \u9e22\u5c3e\u84dd\r\n            \"19-1557\": \"#9B1B30\", \/\/ \u8fa3\u6912\u7ea2\r\n            \"185C\":    \"#E4002B\", \/\/ \u6f58\u901a\u7ea2\r\n            \"032C\":    \"#EF3340\", \/\/ \u6b63\u7ea2\r\n            \"485C\":    \"#DA291C\", \/\/ \u4eae\u7ea2\r\n            \"286C\":    \"#0033A0\", \/\/ \u6d77\u6d0b\u84dd\r\n            \"300C\":    \"#005EB8\", \/\/ \u5929\u84dd\r\n            \"348C\":    \"#00843D\", \/\/ \u68ee\u6797\u7eff\r\n            \"376C\":    \"#84BD00\", \/\/ \u5ae9\u7eff\r\n            \"116C\":    \"#FFCD00\", \/\/ \u5411\u65e5\u8475\u9ec4\r\n            \"123C\":    \"#FFC72C\", \/\/ \u6696\u9ec4\r\n            \"021C\":    \"#FE5000\", \/\/ \u4eae\u6a59\r\n            \"137C\":    \"#FFA400\", \/\/ \u5357\u74dc\u6a59\r\n            \"268C\":    \"#582C83\", \/\/ \u6df1\u7d2b\r\n            \"212C\":    \"#F15A9A\", \/\/ \u4eae\u7c89\r\n            \"BLACK6C\": \"#101820\", \/\/ \u6781\u81f4\u9ed1\r\n            \"426C\":    \"#25282B\", \/\/ \u6728\u70ad\u9ed1\r\n            \"COOLGRAY9C\":\"#75787B\", \/\/ \u51b7\u70709\u53f7\r\n            \"COOLGRAY1C\":\"#D9D9D6\", \/\/ \u51b7\u70701\u53f7\r\n            \"WARMGRAY3C\":\"#BFB8AF\", \/\/ \u6696\u70703\u53f7\r\n            \"WARMGRAY9C\":\"#83786F\", \/\/ \u6696\u70709\u53f7\r\n            \"18-1662\": \"#E2492F\", \/\/ \u706b\u7130\u7ea2\r\n            \"19-0303\": \"#212121\", \/\/ \u58a8\u7389\u9ed1\r\n            \"11-0601\": \"#F4F5F0\", \/\/ \u4eae\u767d\r\n            \"12-0736\": \"#F9E54E\"  \/\/ \u67e0\u6aac\u9ec4\r\n        };\r\n\r\n        \/\/ \u521d\u59cb\u5316\u628a\u989c\u8272\u8d4b\u7ed9 CSS \u53d8\u91cf\r\n        widgetContainer.style.setProperty('--color-dfgery', color1Input.value);\r\n        widgetContainer.style.setProperty('--color-lkjhgf', color2Input.value);\r\n\r\n        \/\/ \u7edf\u4e00\u5904\u7406\u53cc\u5411\u7ed1\u5b9a\u7684\u51fd\u6570\r\n        function bindColorControls(picker, textInput, cssVar) {\r\n            \r\n            \/\/ \u6838\u5fc3\u53d8\u8272\u6267\u884c\u903b\u8f91\r\n            function applyColor(val) {\r\n                widgetContainer.style.setProperty(cssVar, val);\r\n                picker.value = val;\r\n            }\r\n\r\n            \/\/ 1. \u76d1\u542c\u62fe\u8272\u5668\u6ed1\u52a8\u6539\u53d8\r\n            picker.addEventListener('input', (e) => {\r\n                const val = e.target.value;\r\n                textInput.value = val.toUpperCase();\r\n                applyColor(val);\r\n            });\r\n\r\n            \/\/ 2. \u76d1\u542c\u6587\u672c\u6846\u952e\u5165\r\n            textInput.addEventListener('input', (e) => {\r\n                let val = e.target.value.trim().toUpperCase();\r\n\r\n                \/\/ \u6f58\u901a\u53f7\u7801\u5b57\u5178\u5339\u914d\r\n                if (pantoneDictionary[val]) {\r\n                    val = pantoneDictionary[val].toUpperCase();\r\n                } \r\n                \r\n                \/\/ \u8865\u5168\u4e95\u53f7\r\n                if (\/^[0-9A-F]{6}$\/i.test(val)) {\r\n                    val = '#' + val;\r\n                }\r\n\r\n                \/\/ \u547d\u4e2d\u89c4\u8303\u7acb\u523b\u4e0a\u8272\r\n                if (\/^#[0-9A-F]{2,6}$\/i.test(val) && val.length === 7) {\r\n                    applyColor(val);\r\n                }\r\n            });\r\n\r\n            \/\/ 3. \u589e\u5f3a\u4f53\u9a8c\uff1a\u9632\u6b62\u80e1\u4e71\u8f93\u5165\u5bfc\u81f4\u5d29\u6e83\uff08\u56de\u9000\u673a\u5236\uff09\r\n            textInput.addEventListener('blur', (e) => {\r\n                let val = e.target.value.trim().toUpperCase();\r\n                if (!\/^#[0-9A-F]{6}$\/i.test(val) && !pantoneDictionary[val]) {\r\n                    e.target.value = picker.value.toUpperCase();\r\n                } else if (pantoneDictionary[val]) {\r\n                    e.target.value = pantoneDictionary[val].toUpperCase();\r\n                }\r\n            });\r\n        }\r\n\r\n        \/\/ \u628a\u90e8\u4ef6\u8fde\u63a5\u8d77\u6765\r\n        bindColorControls(color1Input, txt1Input, '--color-dfgery');\r\n        bindColorControls(color2Input, txt2Input, '--color-lkjhgf');\r\n\r\n    })();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6220e82 elementor-widget elementor-widget-html\" data-id=\"6220e82\" 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    \/* \u6700\u5916\u5c42\u5361\u7247\u5bb9\u5668 *\/\r\n    .kpqwxz222 {\r\n        --color-dfgery222: #371F2A; \/* \u9ed8\u8ba4\u6df1\u7ea2\u8272 *\/\r\n        --color-lkjhgf222: #371F2A; \/* \u9ed8\u8ba4\u91d1\u8272 *\/\r\n        \r\n        background-color: #ffffff;\r\n        width: 100%;\r\n        max-width: 540px;\r\n        border-radius: 24px;\r\n        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);\r\n        padding: 24px;\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 30px;\r\n        font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\r\n    }\r\n\r\n    .kpqwxz222, .kpqwxz222 * {\r\n        box-sizing: border-box;\r\n    }\r\n\r\n    .mnhytg222 {\r\n        position: relative;\r\n        width: 100%;\r\n        aspect-ratio: 1 \/ 1; \r\n        background-color: #f8fafc;\r\n        border-radius: 16px;\r\n        overflow: hidden;\r\n        border: 2px solid #f1f5f9;\r\n        isolation: isolate; \r\n    }\r\n\r\n    .bzvcxs222 {\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        width: 100%;\r\n        height: 100%;\r\n        background-size: contain;\r\n        background-repeat: no-repeat;\r\n        background-position: center;\r\n    }\r\n\r\n    \/* \u76d2\u5b50\u5916\u90e8\u989c\u8272\u5c42 - Color 1 *\/\r\n    #dfgery222 {\r\n        background-color: var(--color-dfgery222);\r\n        -webkit-mask-image: url('\/wp-content\/uploads\/2026\/05\/2.png');\r\n        -webkit-mask-size: contain;\r\n        -webkit-mask-repeat: no-repeat;\r\n        -webkit-mask-position: center;\r\n       \r\n        mask-image: url('\/wp-content\/uploads\/2026\/05\/2.png'); \r\n        mask-size: contain;\r\n        mask-repeat: no-repeat;\r\n        mask-position: center;\r\n        z-index: 1; \r\n    }\r\n\r\n    \/* \u9634\u5f71\u7eb9\u7406\u56fe\u5c42 - \u5e94\u8be5\u7528 1.png *\/\r\n    #poiuyt222 {\r\n        \/* \u3010\u5df2\u4fee\u590d\u3011\uff1a\u8fd9\u91cc\u7684\u5e95\u56fe\u624d\u662f\u8d1f\u8d23\u5168\u5c40\u9634\u5f71\u7684 1.png *\/\r\n        background-image: url('\/wp-content\/uploads\/2026\/05\/1-1.png');\r\n        mix-blend-mode: multiply; \r\n        pointer-events: none;\r\n        z-index: 10;\r\n    }\r\n\r\n    \/* \u76d2\u5b50\u5185\u90e8\u989c\u8272\u5c42 - Color 2 *\/\r\n    #lkjhgf222 {\r\n        background-color: var(--color-lkjhgf222);\r\n       \r\n        -webkit-mask-image: url('\/wp-content\/uploads\/2026\/05\/3.png');\r\n        -webkit-mask-size: contain;\r\n        -webkit-mask-repeat: no-repeat;\r\n        -webkit-mask-position: center;\r\n        mask-image: url('\/wp-content\/uploads\/2026\/05\/3.png'); \r\n        mask-size: contain;\r\n        mask-repeat: no-repeat;\r\n        mask-position: center;\r\n        z-index: 15; \r\n    }\r\n\r\n    \/* \u63a7\u5236\u5668\u533a\u57df *\/\r\n    .mnbvcx222 {\r\n        display: flex;\r\n        flex-direction: initial; \r\n        justify-content: space-between;\r\n        gap: 20px;\r\n    }\r\n\r\n    .qazwsx222 {\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 12px;\r\n        flex: 1; \r\n        align-items: center; \r\n        background: #f8fafc;\r\n        padding: 16px;\r\n        border-radius: 12px;\r\n    }\r\n\r\n    .qazwsx222 label {\r\n        font-weight: 700;\r\n        font-size: 16px;\r\n        color: #475569;\r\n      \r\n        letter-spacing: 0.5px;\r\n        margin: 0;\r\n    }\r\n\r\n    .kpqwxz222 input[type=\"color\"] {\r\n        width: 100px;\r\n        height: 40px;\r\n        padding: 0;\r\n        border: 3px solid #ffffff;\r\n        border-radius: 20px; \r\n        cursor: pointer;\r\n        background: none;\r\n        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\r\n        transition: transform 0.2s;\r\n    }\r\n\r\n    .kpqwxz222 input[type=\"color\"]:hover {\r\n        transform: scale(1.05);\r\n    }\r\n\r\n    .kpqwxz222 input[type=\"color\"]::-webkit-color-swatch-wrapper {\r\n        padding: 0;\r\n    }\r\n    .kpqwxz222 input[type=\"color\"]::-webkit-color-swatch {\r\n        border: none;\r\n        border-radius: 20px;\r\n    }\r\n    .kpqwxz222 input[type=\"color\"]::-moz-color-swatch {\r\n        border: none;\r\n        border-radius: 20px;\r\n    }\r\n\r\n    \/* \u624b\u52a8\u8f93\u5165\u8272\u53f7\u7684\u6587\u672c\u6846\u6837\u5f0f *\/\r\n    .kpqwxz222 input[type=\"text\"].hex-input {\r\n        width: 100%;\r\n        max-width: 100px; \/* \u5339\u914d\u62fe\u8272\u5668\u7684\u5bbd\u5ea6 *\/\r\n        height: 28px;\r\n        padding: 0 6px;\r\n        border: 1px solid #cbd5e1;\r\n        border-radius: 6px;\r\n        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;\r\n        font-size: 12px;\r\n        text-align: center;\r\n        color: #334155;\r\n        background: #ffffff;\r\n        box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);\r\n        transition: all 0.2s;\r\n        text-transform: uppercase;\r\n    }\r\n\r\n    .kpqwxz222 input[type=\"text\"].hex-input:focus {\r\n        border-color: #3b82f6;\r\n        outline: none;\r\n        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);\r\n    }\r\n    .kpqwxz222 input[type=\"text\"].hex-input::placeholder {\r\n        color: #94a3b8;\r\n        font-size: 11px;\r\n        text-transform: none;\r\n    }\r\n<\/style>\r\n\r\n<div class=\"kpqwxz222\" style=\"display:flex\">\r\n    <div class=\"mnhytg222\">\r\n        <!-- \u6ce8\u610f\u770b\u8fd9\u91cc\u7684\u987a\u5e8f\u4e0d\u91cd\u8981\uff0c\u4e3b\u8981\u9760 CSS \u91cc\u7684 z-index \u63a7\u5236 -->\r\n        <div id=\"dfgery222\" class=\"bzvcxs222\"><\/div>\r\n        <div id=\"poiuyt222\" class=\"bzvcxs222\"><\/div>\r\n        <div id=\"lkjhgf222\" class=\"bzvcxs222\"><\/div>\r\n    <\/div>\r\n\r\n    <div class=\"mnbvcx222\">\r\n        <div class=\"qazwsx222\">\r\n            <label for=\"edcrfv222\">Bottle<\/label>\r\n            <input type=\"color\" id=\"edcrfv222\" value=\"#371F2A\">\r\n            <!-- \u65b0\u589e Color1 \u6587\u672c\u8f93\u5165\u6846 -->\r\n            <input type=\"text\" class=\"hex-input\" id=\"txt-edcrfv222\" value=\"#371F2A\" placeholder=\"\u6f58\u901a\u8272\/Hex\">\r\n        <\/div>\r\n\r\n        <div class=\"qazwsx222\">\r\n            <label for=\"tgbnhy222\">Cap<\/label>\r\n            <input type=\"color\" id=\"tgbnhy222\" value=\"#371F2A\">\r\n            <!-- \u65b0\u589e Color2 \u6587\u672c\u8f93\u5165\u6846 -->\r\n            <input type=\"text\" class=\"hex-input\" id=\"txt-tgbnhy222\" value=\"#371F2A\" placeholder=\"\u6f58\u901a\u8272\/Hex\">\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<script>\r\n    (function() {\r\n        const widgetContainer = document.querySelector('.kpqwxz222');\r\n        \r\n        \/\/ \u62fe\u8272\u5668\u8282\u70b9\r\n        const color1Input = document.getElementById('edcrfv222');\r\n        const color2Input = document.getElementById('tgbnhy222');\r\n\r\n        \/\/ \u6587\u672c\u6846\u8282\u70b9\r\n        const txt1Input = document.getElementById('txt-edcrfv222');\r\n        const txt2Input = document.getElementById('txt-tgbnhy222');\r\n\r\n        \/\/ \u5b8c\u6574\u7684\u5e38\u5907\u6f58\u901a\u8272\u5b57\u5178\u6570\u636e\r\n        const pantoneDictionary = {\r\n            \"13-1023\": \"#FFD1B3\", \/\/ 2024 \u67d4\u548c\u6843\r\n            \"18-1750\": \"#BE3455\", \/\/ 2023 \u975e\u51e1\u6d0b\u7ea2\r\n            \"17-3938\": \"#6667AB\", \/\/ 2022 \u957f\u6625\u82b1\u84dd\r\n            \"17-5104\": \"#939597\", \/\/ 2021 \u6781\u81f4\u7070\r\n            \"13-0647\": \"#F5DF4D\", \/\/ 2021 \u4eae\u4e3d\u9ec4\r\n            \"19-4052\": \"#0F4C81\", \/\/ 2020 \u7ecf\u5178\u84dd\r\n            \"16-1546\": \"#FF6F61\", \/\/ 2019 \u6d3b\u73ca\u745a\u6a58\r\n            \"18-3838\": \"#5F4B8B\", \/\/ 2018 \u7d2b\u5916\u5149\u8272\r\n            \"15-0343\": \"#88B04B\", \/\/ 2017 \u8349\u6728\u7eff\r\n            \"15-3919\": \"#91A8D0\", \/\/ 2016 \u5b81\u9759\u84dd\r\n            \"13-1520\": \"#F7CAC9\", \/\/ 2016 \u7c89\u6676\r\n            \"18-1438\": \"#964F4C\", \/\/ 2015 \u739b\u8428\u62c9\u9152\u7ea2\r\n            \"18-3224\": \"#AD5E99\", \/\/ 2014 \u7480\u74a8\u7d2b\u5170\r\n            \"17-5641\": \"#009473\", \/\/ 2013 \u7fe1\u7fe0\u7eff\r\n            \"17-1463\": \"#DD4124\", \/\/ 2012 \u63a2\u6208\u6a58\r\n            \"18-2120\": \"#D94F70\", \/\/ 2011 \u5fcd\u51ac\u7ea2\r\n            \"15-5519\": \"#45B5AA\", \/\/ 2010 \u753b\u62a5\u84dd\r\n            \"14-0848\": \"#F0C05A\", \/\/ 2009 \u542b\u7f9e\u8349\u9ec4\r\n            \"18-3943\": \"#5A5B9F\", \/\/ 2008 \u9e22\u5c3e\u84dd\r\n            \"19-1557\": \"#9B1B30\", \/\/ 2007 \u8fa3\u6912\u7ea2\r\n            \"185C\":    \"#E4002B\", \/\/ \u6f58\u901a\u7ea2\r\n            \"032C\":    \"#EF3340\", \/\/ \u6b63\u7ea2\r\n            \"485C\":    \"#DA291C\", \/\/ \u4eae\u7ea2\r\n            \"286C\":    \"#0033A0\", \/\/ \u6d77\u6d0b\u84dd\r\n            \"300C\":    \"#005EB8\", \/\/ \u5929\u84dd\r\n            \"348C\":    \"#00843D\", \/\/ \u68ee\u6797\u7eff\r\n            \"376C\":    \"#84BD00\", \/\/ \u5ae9\u7eff\r\n            \"116C\":    \"#FFCD00\", \/\/ \u5411\u65e5\u8475\u9ec4\r\n            \"123C\":    \"#FFC72C\", \/\/ \u6696\u9ec4\r\n            \"021C\":    \"#FE5000\", \/\/ \u4eae\u6a59\r\n            \"137C\":    \"#FFA400\", \/\/ \u5357\u74dc\u6a59\r\n            \"268C\":    \"#582C83\", \/\/ \u6df1\u7d2b\r\n            \"212C\":    \"#F15A9A\", \/\/ \u4eae\u7c89\r\n            \"BLACK6C\": \"#101820\", \/\/ \u6781\u81f4\u9ed1\r\n            \"426C\":    \"#25282B\", \/\/ \u6728\u70ad\u9ed1\r\n            \"COOLGRAY9C\":\"#75787B\", \/\/ \u51b7\u70709\u53f7\r\n            \"COOLGRAY1C\":\"#D9D9D6\", \/\/ \u51b7\u70701\u53f7\r\n            \"WARMGRAY3C\":\"#BFB8AF\", \/\/ \u6696\u70703\u53f7\r\n            \"WARMGRAY9C\":\"#83786F\", \/\/ \u6696\u70709\u53f7\r\n            \"18-1662\": \"#E2492F\", \/\/ \u706b\u7130\u7ea2\r\n            \"19-0303\": \"#212121\", \/\/ \u58a8\u7389\u9ed1\r\n            \"11-0601\": \"#F4F5F0\", \/\/ \u4eae\u767d\r\n            \"12-0736\": \"#F9E54E\"  \/\/ \u67e0\u6aac\u9ec4\r\n        };\r\n\r\n        \/\/ \u521d\u59cb\u5316\u628a\u989c\u8272\u8d4b\u7ed9 CSS \u53d8\u91cf\r\n        widgetContainer.style.setProperty('--color-dfgery222', color1Input.value);\r\n        widgetContainer.style.setProperty('--color-lkjhgf222', color2Input.value);\r\n\r\n        \/\/ \u9ad8\u9636\u7ed1\u5b9a\u51fd\u6570\uff1a\u5904\u7406\u6ed1\u52a8\u53d8\u8272\u4e0e\u952e\u5165\u53d8\u8272\u7684\u8054\u52a8\r\n        function bindColorControls(picker, textInput, cssVar) {\r\n            \r\n            function applyColor(val) {\r\n                widgetContainer.style.setProperty(cssVar, val);\r\n                picker.value = val;\r\n            }\r\n\r\n            \/\/ 1. \u62fe\u8272\u5668\u6539\u53d8 -> \u66f4\u65b0\u753b\u9762\u53ca\u6587\u5b57\r\n            picker.addEventListener('input', (e) => {\r\n                const val = e.target.value;\r\n                textInput.value = val.toUpperCase();\r\n                applyColor(val);\r\n            });\r\n\r\n            \/\/ 2. \u6587\u5b57\u6846\u8f93\u5165 -> \u6821\u9a8c\u662f\u5426\u547d\u4e2d\u89c4\u5219\u5e76\u66f4\u65b0\u753b\u9762\r\n            textInput.addEventListener('input', (e) => {\r\n                let val = e.target.value.trim().toUpperCase();\r\n\r\n                if (pantoneDictionary[val]) {\r\n                    val = pantoneDictionary[val].toUpperCase();\r\n                } \r\n                \r\n                if (\/^[0-9A-F]{6}$\/i.test(val)) {\r\n                    val = '#' + val;\r\n                }\r\n\r\n                if (\/^#[0-9A-F]{2,6}$\/i.test(val) && val.length === 7) {\r\n                    applyColor(val);\r\n                }\r\n            });\r\n\r\n            \/\/ 3. \u5931\u53bb\u7126\u70b9\u65f6 -> \u9632\u9519\u56de\u9000\u4e0e\u683c\u5f0f\u5316\r\n            textInput.addEventListener('blur', (e) => {\r\n                let val = e.target.value.trim().toUpperCase();\r\n                if (!\/^#[0-9A-F]{6}$\/i.test(val) && !pantoneDictionary[val]) {\r\n                    \/\/ \u65e0\u6548\u989c\u8272\uff1a\u9000\u56de\u76ee\u524d\u62fe\u8272\u5668\u7684\u503c\r\n                    e.target.value = picker.value.toUpperCase();\r\n                } else if (pantoneDictionary[val]) {\r\n                    \/\/ \u5982\u679c\u8f93\u5165\u4e8619-4052\uff0c\u5931\u53bb\u7126\u70b9\u65f6\u5c31\u53d8\u4e3a\u5bf9\u5e94\u7684 #0F4C81\r\n                    e.target.value = pantoneDictionary[val].toUpperCase();\r\n                }\r\n            });\r\n        }\r\n\r\n        \/\/ \u628a\u90e8\u4ef6\u8fde\u63a5\u8d77\u6765\r\n        bindColorControls(color1Input, txt1Input, '--color-dfgery222');\r\n        bindColorControls(color2Input, txt2Input, '--color-lkjhgf222');\r\n\r\n    })();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ee0828e elementor-widget elementor-widget-html\" data-id=\"ee0828e\" 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    \/* \u6700\u5916\u5c42\u5361\u7247\u5bb9\u5668 *\/\r\n    .kpqwxz333 {\r\n        --color-dfgery333: #8a2424; \/* Color1 \u9ed8\u8ba4\u989c\u8272 *\/\r\n        --color-lkjhgf333: #DDAC67; \/* Color2 \u9ed8\u8ba4\u989c\u8272 *\/\r\n        --color-cvzxas333: #2c3e50; \/* Color3 \u9ed8\u8ba4\u989c\u8272 *\/\r\n        \r\n        background-color: #ffffff;\r\n        width: 100%;\r\n        max-width: 540px;\r\n        border-radius: 24px;\r\n        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);\r\n        padding: 24px;\r\n        display: flex;\r\n        gap: 30px;\r\n        font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\r\n         flex-direction: column;\r\n        \r\n    }\r\n\r\n    .kpqwxz333, .kpqwxz333 * {\r\n        box-sizing: border-box;\r\n    }\r\n\r\n    .mnhytg333 {\r\n        position: relative;\r\n        width: 100%;\r\n        aspect-ratio: 1 \/ 1; \r\n        background-color: #f8fafc;\r\n        border-radius: 16px;\r\n        overflow: hidden;\r\n        border: 2px solid #f1f5f9;\r\n        isolation: isolate; \r\n    }\r\n\r\n    .bzvcxs333 {\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        width: 100%;\r\n        height: 100%;\r\n        background-size: contain;\r\n        background-repeat: no-repeat;\r\n        background-position: center;\r\n    }\r\n\r\n    \/* \u6e32\u67d3\u5c42\u4e00 - Color 1 *\/\r\n    #dfgery333 {\r\n        background-color: var(--color-dfgery333);\r\n        -webkit-mask-image: url('\/wp-content\/uploads\/2026\/05\/13.png');\r\n        -webkit-mask-size: contain;\r\n        -webkit-mask-repeat: no-repeat;\r\n        -webkit-mask-position: center;\r\n        mask-image: url('\/wp-content\/uploads\/2026\/05\/13.png'); \r\n        mask-size: contain;\r\n        mask-repeat: no-repeat;\r\n        mask-position: center;\r\n        z-index: 1; \r\n    }\r\n\r\n    \/* \u6e32\u67d3\u5c42\u4e09 - Color 3 *\/\r\n    #cvzxas333 {\r\n        background-color: var(--color-cvzxas333);\r\n        -webkit-mask-image: url('\/wp-content\/uploads\/2026\/05\/12-1.png');\r\n        mask-image: url('\/wp-content\/uploads\/2026\/05\/12-1.png');\r\n        -webkit-mask-size: contain;\r\n        -webkit-mask-repeat: no-repeat;\r\n        -webkit-mask-position: center;\r\n        mask-size: contain;\r\n        mask-repeat: no-repeat;\r\n        mask-position: center;\r\n        z-index: 5; \r\n    }\r\n\r\n    \/* \u9634\u5f71\u7eb9\u7406\u56fe\u5c42 *\/\r\n    #poiuyt333 {\r\n        background-image: url('\/wp-content\/uploads\/2026\/05\/11.png');\r\n        mix-blend-mode: multiply; \r\n        pointer-events: none;\r\n        z-index: 10;\r\n    }\r\n\r\n    \/* \u6e32\u67d3\u5c42\u4e8c - Color 2 *\/\r\n    #lkjhgf333 {\r\n        background-color: var(--color-lkjhgf333);\r\n        -webkit-mask-image: url('\/wp-content\/uploads\/2026\/05\/14.png');\r\n        -webkit-mask-size: contain;\r\n        -webkit-mask-repeat: no-repeat;\r\n        -webkit-mask-position: center;\r\n        mask-image: url('\/wp-content\/uploads\/2026\/05\/14.png'); \r\n        mask-size: contain;\r\n        mask-repeat: no-repeat;\r\n        mask-position: center;\r\n        z-index: 15; \r\n    }\r\n\r\n    \/* \u63a7\u5236\u5668\u533a\u57df *\/\r\n    .mnbvcx333 {\r\n        display: flex;\r\n        flex-direction: row; \r\n        justify-content: space-between;\r\n        gap: 12px; \r\n        flex-wrap: wrap; \r\n    }\r\n\r\n    .qazwsx333 {\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 19px; \/* \u95f4\u8ddd\u5fae\u8c03 *\/\r\n        flex: 1; \r\n        align-items: center; \r\n        background: #f8fafc;\r\n        padding: 12px 8px;\r\n        border-radius: 12px;\r\n        min-width: 80px; \r\n    }\r\n\r\n    .qazwsx333 label {\r\n        font-weight: 700;\r\n        font-size: 12px;\r\n        color: #475569;\r\n       \r\n        letter-spacing: 0px;\r\n        margin: 0;\r\n    }\r\n\r\n    .kpqwxz333 input[type=\"color\"] {\r\n        width: 100%;\r\n        max-width: 70px; \r\n        height: 36px;\r\n        padding: 0;\r\n        border: 3px solid #ffffff;\r\n        border-radius: 20px; \r\n        cursor: pointer;\r\n        background: none;\r\n        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\r\n        transition: transform 0.2s;\r\n    }\r\n\r\n    .kpqwxz333 input[type=\"color\"]:hover {\r\n        transform: scale(1.05);\r\n    }\r\n\r\n    .kpqwxz333 input[type=\"color\"]::-webkit-color-swatch-wrapper {\r\n        padding: 0;\r\n    }\r\n    .kpqwxz333 input[type=\"color\"]::-webkit-color-swatch {\r\n        border: none;\r\n        border-radius: 20px;\r\n    }\r\n    .kpqwxz333 input[type=\"color\"]::-moz-color-swatch {\r\n        border: none;\r\n        border-radius: 20px;\r\n    }\r\n\r\n    \/* \u65b0\u589e\uff1a\u624b\u52a8\u8f93\u5165\u8272\u53f7\u7684\u6587\u672c\u6846\u6837\u5f0f *\/\r\n    .kpqwxz333 input[type=\"text\"].hex-input {\r\n        width: 100%;\r\n        max-width: 76px;\r\n        height: 26px;\r\n        padding: 0 4px;\r\n        border: 1px solid #cbd5e1;\r\n        border-radius: 6px;\r\n        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;\r\n        font-size: 11px;\r\n        text-align: center;\r\n        color: #334155;\r\n        background: #ffffff;\r\n        box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);\r\n        transition: all 0.2s;\r\n        text-transform: uppercase;\r\n    }\r\n\r\n    .kpqwxz333 input[type=\"text\"].hex-input:focus {\r\n        border-color: #3b82f6;\r\n        outline: none;\r\n        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);\r\n    }\r\n    .kpqwxz333 input[type=\"text\"].hex-input::placeholder {\r\n        color: #94a3b8;\r\n        text-transform: none;\r\n    }\r\n<\/style>\r\n\r\n<div class=\"kpqwxz333\">\r\n    <div class=\"mnhytg333\">\r\n        <div id=\"dfgery333\" class=\"bzvcxs333\"><\/div>  <!-- Color1: Outer -->\r\n        <div id=\"cvzxas333\" class=\"bzvcxs333\"><\/div>  <!-- Color3: New Part -->\r\n        <div id=\"poiuyt333\" class=\"bzvcxs333\"><\/div>  <!-- Shadow Multiply -->\r\n        <div id=\"lkjhgf333\" class=\"bzvcxs333\"><\/div>  <!-- Color2: Inner -->\r\n    <\/div>\r\n\r\n    <!-- \u63a7\u5236\u5668\u533a\u57df (\u589e\u52a0\u6587\u672c\u8f93\u5165\u6846) -->\r\n    <div class=\"mnbvcx333\">\r\n        <div class=\"qazwsx333\">\r\n            <label for=\"edcrfv333\"style=\"font-size:16px\">Cap<\/label>\r\n            <input type=\"color\" id=\"edcrfv333\" value=\"#8a2424\">\r\n            <input type=\"text\" class=\"hex-input\" id=\"txt-edcrfv333\" value=\"#8A2424\" placeholder=\"\u8272\u53f7\/Hex\">\r\n        <\/div>\r\n\r\n        <div class=\"qazwsx333\">\r\n            <label for=\"tgbnhy333\"style=\"font-size:16px\">Base<\/label>\r\n            <input type=\"color\" id=\"tgbnhy333\" value=\"#DDAC67\">\r\n            <input type=\"text\" class=\"hex-input\" id=\"txt-tgbnhy333\" value=\"#DDAC67\" placeholder=\"\u8272\u53f7\/Hex\">\r\n        <\/div>\r\n        \r\n        <div class=\"qazwsx333\">\r\n            <label for=\"ujmiko333\">Middle Sleeve<\/label>\r\n            <input type=\"color\" id=\"ujmiko333\" value=\"#2c3e50\">\r\n            <input type=\"text\" class=\"hex-input\" id=\"txt-ujmiko333\" value=\"#2C3E50\" placeholder=\"\u8272\u53f7\/Hex\">\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<script>\r\n    (function() {\r\n        const widgetContainer = document.querySelector('.kpqwxz333');\r\n        \r\n        \/\/ \u62fe\u8272\u5668\u8282\u70b9\r\n        const color1Input = document.getElementById('edcrfv333');\r\n        const color2Input = document.getElementById('tgbnhy333');\r\n        const color3Input = document.getElementById('ujmiko333');\r\n        \r\n        \/\/ \u6587\u672c\u6846\u8282\u70b9\r\n        const txt1Input = document.getElementById('txt-edcrfv333');\r\n        const txt2Input = document.getElementById('txt-tgbnhy333');\r\n        const txt3Input = document.getElementById('txt-ujmiko333');\r\n\r\n        \/\/ ==== [\u53ef\u9009\u914d\u7f6e] \u6f58\u901a\u8272\u53f7\u5b57\u5178 (Pantone Lookup) ====\r\n        \/\/ \u5982\u679c\u4f60\u9700\u8981\u652f\u6301\u76f4\u63a5\u8f93\u5165\u4f8b\u5982 \"19-4052\" \u7684\u6f58\u901a\u5b57\u9762\u7f16\u53f7\uff0c\u53ef\u4ee5\u76f4\u63a5\u5728\u8fd9\u91cc\u914d\u7f6e\u5bf9\u5e94 Hex \u503c\u3002\r\n        const pantoneDictionary = {\r\n            \/\/ === \u5386\u5e74 Pantone \u5e74\u5ea6\u4ee3\u8868\u8272 (Color of the Year) ===\r\n            \"13-1023\": \"#FFD1B3\", \/\/ 2024 \u67d4\u548c\u6843 (Peach Fuzz)\r\n            \"18-1750\": \"#BE3455\", \/\/ 2023 \u975e\u51e1\u6d0b\u7ea2 (Viva Magenta)\r\n            \"17-3938\": \"#6667AB\", \/\/ 2022 \u957f\u6625\u82b1\u84dd (Very Peri)\r\n            \"17-5104\": \"#939597\", \/\/ 2021 \u6781\u81f4\u7070 (Ultimate Gray)\r\n            \"13-0647\": \"#F5DF4D\", \/\/ 2021 \u4eae\u4e3d\u9ec4 (Illuminating)\r\n            \"19-4052\": \"#0F4C81\", \/\/ 2020 \u7ecf\u5178\u84dd (Classic Blue)\r\n            \"16-1546\": \"#FF6F61\", \/\/ 2019 \u6d3b\u73ca\u745a\u6a58 (Living Coral)\r\n            \"18-3838\": \"#5F4B8B\", \/\/ 2018 \u7d2b\u5916\u5149\u8272 (Ultra Violet)\r\n            \"15-0343\": \"#88B04B\", \/\/ 2017 \u8349\u6728\u7eff (Greenery)\r\n            \"15-3919\": \"#91A8D0\", \/\/ 2016 \u5b81\u9759\u84dd (Serenity)\r\n            \"13-1520\": \"#F7CAC9\", \/\/ 2016 \u7c89\u6676 (Rose Quartz)\r\n            \"18-1438\": \"#964F4C\", \/\/ 2015 \u739b\u8428\u62c9\u9152\u7ea2 (Marsala)\r\n            \"18-3224\": \"#AD5E99\", \/\/ 2014 \u7480\u74a8\u7d2b\u5170 (Radiant Orchid)\r\n            \"17-5641\": \"#009473\", \/\/ 2013 \u7fe1\u7fe0\u7eff (Emerald)\r\n            \"17-1463\": \"#DD4124\", \/\/ 2012 \u63a2\u6208\u6a58 (Tangerine Tango)\r\n            \"18-2120\": \"#D94F70\", \/\/ 2011 \u5fcd\u51ac\u7ea2 (Honeysuckle)\r\n            \"15-5519\": \"#45B5AA\", \/\/ 2010 \u753b\u62a5\u84dd\/\u7eff\u677e\u77f3 (Turquoise)\r\n            \"14-0848\": \"#F0C05A\", \/\/ 2009 \u542b\u7f9e\u8349\u9ec4 (Mimosa)\r\n            \"18-3943\": \"#5A5B9F\", \/\/ 2008 \u9e22\u5c3e\u84dd (Blue Iris)\r\n            \"19-1557\": \"#9B1B30\", \/\/ 2007 \u8fa3\u6912\u7ea2 (Chili Pepper)\r\n\r\n            \/\/ === \u54c1\u724c\u4e0e\u5e38\u89c1 PMS (Solid Coated) \u7ecf\u5178\u8272 ===\r\n            \"185C\":    \"#E4002B\", \/\/ \u6f58\u901a\u7ecf\u5178\u7ea2 (\u5e38\u7528\u4e8e\u6807\u5fd7)\r\n            \"032C\":    \"#EF3340\", \/\/ \u6f58\u901a\u6b63\u7ea2\r\n            \"485C\":    \"#DA291C\", \/\/ \u4e5f\u662f\u6781\u4e3a\u5e38\u7528\u7684\u4eae\u7ea2\u8272\r\n            \"286C\":    \"#0033A0\", \/\/ \u6f58\u901a\u7ecf\u5178\u6d77\u6d0b\u84dd\r\n            \"300C\":    \"#005EB8\", \/\/ \u6f58\u901a\u5929\u84dd\r\n            \"348C\":    \"#00843D\", \/\/ \u6f58\u901a\u68ee\u6797\u7eff\r\n            \"376C\":    \"#84BD00\", \/\/ \u6f58\u901a\u5ae9\u7eff\/\u9ec4\u7eff\r\n            \"116C\":    \"#FFCD00\", \/\/ \u6f58\u901a\u5411\u65e5\u8475\u9ec4\r\n            \"123C\":    \"#FFC72C\", \/\/ \u6f58\u901a\u6696\u9ec4 (\u5e38\u7528\u4e8e\u5feb\u9910\u54c1\u724c)\r\n            \"021C\":    \"#FE5000\", \/\/ \u6f58\u901a\u6807\u51c6\u4eae\u6a59\u8272\r\n            \"137C\":    \"#FFA400\", \/\/ \u6f58\u901a\u5357\u74dc\u6a59\r\n            \"268C\":    \"#582C83\", \/\/ \u6f58\u901a\u6df1\u7d2b\u8272\r\n            \"212C\":    \"#F15A9A\", \/\/ \u6f58\u901a\u4eae\u7c89\u8272\r\n            \r\n            \/\/ === \u5e38\u89c1\u4e2d\u6027\u8272\u4e0e\u9ed1\u767d\u7070 ===\r\n            \"BLACK6C\": \"#101820\", \/\/ \u6f58\u901a\u6781\u81f4\u9ed1\r\n            \"426C\":    \"#25282B\", \/\/ \u6f58\u901a\u6728\u70ad\u9ed1\r\n            \"COOLGRAY9C\":\"#75787B\", \/\/ \u6f58\u901a\u51b7\u70709\u53f7\r\n            \"COOLGRAY1C\":\"#D9D9D6\", \/\/ \u6f58\u901a\u51b7\u70701\u53f7\r\n            \"WARMGRAY3C\":\"#BFB8AF\", \/\/ \u6f58\u901a\u6696\u70703\u53f7\r\n            \"WARMGRAY9C\":\"#83786F\", \/\/ \u6f58\u901a\u6696\u70709\u53f7\r\n            \r\n            \/\/ === \u5176\u5b83\u7528\u6237\u53ef\u80fd\u8f93\u5165\u7684\u70ed\u95e8\u8272 ===\r\n            \"18-1662\": \"#E2492F\", \/\/ \u706b\u7130\u7ea2 (Flame)\r\n            \"19-0303\": \"#212121\", \/\/ \u58a8\u7389\u9ed1 (Jet Black)\r\n            \"11-0601\": \"#F4F5F0\", \/\/ \u4eae\u767d (Bright White)\r\n            \"12-0736\": \"#F9E54E\", \/\/ \u67e0\u6aac\u9ec4 (Lemon Zest)\r\n        };\r\n\r\n        \/\/ \u521d\u59cb\u5316\r\n        widgetContainer.style.setProperty('--color-dfgery333', color1Input.value);\r\n        widgetContainer.style.setProperty('--color-lkjhgf333', color2Input.value);\r\n        widgetContainer.style.setProperty('--color-cvzxas333', color3Input.value);\r\n\r\n        \/\/ \u7edf\u4e00\u5904\u7406\u7ed1\u5b9a\u4e8b\u4ef6\u7684\u9ad8\u9636\u51fd\u6570\r\n        function bindColorControls(picker, textInput, cssVar) {\r\n            \r\n            \/\/ \u6838\u5fc3\u53d8\u8272\u6267\u884c\u903b\u8f91\r\n            function applyColor(val) {\r\n                widgetContainer.style.setProperty(cssVar, val);\r\n                picker.value = val;\r\n            }\r\n\r\n            \/\/ 1. \u76d1\u542c\u62fe\u8272\u5668\u6ed1\u52a8\u6539\u53d8\r\n            picker.addEventListener('input', (e) => {\r\n                const val = e.target.value;\r\n                textInput.value = val.toUpperCase();\r\n                applyColor(val);\r\n            });\r\n\r\n            \/\/ 2. \u76d1\u542c\u6587\u672c\u6846\u952e\u76d8\u8f93\u5165\u6f58\u901a\/\u8272\u53f7\r\n            textInput.addEventListener('input', (e) => {\r\n                let val = e.target.value.trim().toUpperCase();\r\n\r\n                \/\/ \u89c4\u5219A: \u6f58\u901a\u53f7\u7801\u5b57\u5178\u5339\u914d\u3002\u5982\u679c\u547d\u4e2d\u4e86\u9884\u8bbe\u540d\uff0c\u76f4\u63a5\u62ff\u5230\u5bf9\u5e94\u9884\u914d\u7f6e\u7684Hex\r\n                if (pantoneDictionary[val]) {\r\n                    val = pantoneDictionary[val].toUpperCase();\r\n                } \r\n                \r\n                \/\/ \u89c4\u5219B: \u5982\u679c\u7528\u6237\u6ca1\u6572\u4e95\u53f7(#)\uff0c\u4f46\u662f\u6253\u591f\u4e866\u4f4d\u5b57\u6bcd\u6570\u5b57\uff0c\u81ea\u52a8\u5e2e\u4ed6\u52a0\u4e0a\r\n                if (\/^[0-9A-F]{6}$\/i.test(val)) {\r\n                    val = '#' + val;\r\n                }\r\n\r\n                \/\/ \u89c4\u5219C: \u5f53\u5b83\u662f\u5408\u683c\u7684\u89c4\u8303 Hex (\u4f8b\u5982 #8A2424) \u65f6\uff0c\u6267\u884c\u53d8\u8272\r\n                if (\/^#[0-9A-F]{2,6}$\/i.test(val) && val.length === 7) {\r\n                    applyColor(val);\r\n                }\r\n            });\r\n\r\n            \/\/ 3. \u589e\u5f3a\u4f53\u9a8c\uff1a\u79bb\u5f00\u7126\u70b9\u65f6\u6807\u51c6\u5316\u8f93\u5165\u6587\u5b57\u683c\u5f0f\r\n            textInput.addEventListener('blur', (e) => {\r\n                let val = e.target.value.trim().toUpperCase();\r\n                \/\/ \u5982\u679c\u5f53\u524d\u6846\u5185\u5b57\u7b26\u65e0\u6548\u6216\u662f\u7a7a\u7684\uff0c\u5f3a\u884c\u91cd\u7f6e\u56de\u5f53\u524d\u62fe\u8272\u5668\u7684\u989c\u8272\r\n                if (!\/^#[0-9A-F]{6}$\/i.test(val) && !pantoneDictionary[val]) {\r\n                    e.target.value = picker.value.toUpperCase();\r\n                } else if (pantoneDictionary[val]) {\r\n                    \/\/ \u5982\u679c\u662f\u6f58\u901a\u8272\u540d\uff0c\u5931\u7126\u540e\u53d8\u4e3a\u5176\u5b9e\u9645Hex\u7801\uff08\u53ef\u9009\uff09\r\n                    e.target.value = pantoneDictionary[val].toUpperCase();\r\n                }\r\n            });\r\n        }\r\n\r\n        \/\/ \u628a\u62fe\u8272\u5668\u3001\u6587\u672c\u6846\u3001CSS\u53d8\u91cf\u5173\u8054\u8d77\u6765\r\n        bindColorControls(color1Input, txt1Input, '--color-dfgery333');\r\n        bindColorControls(color2Input, txt2Input, '--color-lkjhgf333');\r\n        bindColorControls(color3Input, txt3Input, '--color-cvzxas333');\r\n\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>","protected":false},"excerpt":{"rendered":"<p>Base Cap Bottle Cap Cap Base Middle Sleeve<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-4046","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.yccosmeticpack.com\/fr\/wp-json\/wp\/v2\/pages\/4046","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.yccosmeticpack.com\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.yccosmeticpack.com\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.yccosmeticpack.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.yccosmeticpack.com\/fr\/wp-json\/wp\/v2\/comments?post=4046"}],"version-history":[{"count":0,"href":"https:\/\/www.yccosmeticpack.com\/fr\/wp-json\/wp\/v2\/pages\/4046\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.yccosmeticpack.com\/fr\/wp-json\/wp\/v2\/media?parent=4046"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}