{"id":2578,"date":"2026-02-25T16:05:28","date_gmt":"2026-02-25T08:05:28","guid":{"rendered":"https:\/\/purestudio.com.tw\/official\/?p=2578"},"modified":"2026-03-23T14:39:16","modified_gmt":"2026-03-23T06:39:16","slug":"%e2%9c%a6-chromalogic-introduce","status":"publish","type":"post","link":"https:\/\/purestudio.com.tw\/official\/%e2%9c%a6-chromalogic-introduce\/","title":{"rendered":"\u2726 ChromaLogic \u91cf\u8272"},"content":{"rendered":"\n<div class=\"wp-block-group is-content-justification-center is-nowrap is-layout-flex wp-container-core-group-is-layout-ac719c21 wp-block-group-is-layout-flex\" style=\"margin-top:0;margin-bottom:0;padding-top:0px;padding-bottom:30px\">\n<h2 class=\"wp-block-heading has-x-large-font-size\">2026 \u8272\u5f69\u5206\u6790\u5f15\u64ce<\/h2>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<div id=\"cl-engine-wrapper\">\n    <style>\n        \/* 1. \u57fa\u790e\u5bb9\u5668 - \u7d71\u4e00 Padding *\/\n        #cl-engine-wrapper {\n            font-family: \"Inter\", \"PingFang TC\", \"Microsoft JhengHei\", sans-serif;\n            color: #2c2c2c;\n            line-height: 1.7;\n            max-width: 1000px;\n            margin: 0 auto;\n            padding: 20px;\n            background-color: #e2e2e2; \n            box-sizing: border-box;\n            position: relative;\n        }\n\n        #cl-engine-wrapper * { box-sizing: border-box; }\n\n        \/* \u9802\u90e8\u7cfb\u7d71\u72c0\u614b *\/\n        .cl-system-status {\n            display: flex;\n            align-items: center;\n            gap: 10px;\n            margin-bottom: 15px;\n            font-size: 0.8rem;\n            font-weight: 700;\n            color: #666;\n            letter-spacing: 1px;\n        }\n\n        .cl-status-dot {\n            width: 8px; height: 8px;\n            background-color: #00ff88;\n            border-radius: 50%;\n            box-shadow: 0 0 10px #00ff88;\n            animation: cl-pulse 2s infinite;\n        }\n\n        @keyframes cl-pulse {\n            0% { opacity: 1; transform: scale(1); }\n            50% { opacity: 0.4; transform: scale(1.2); }\n            100% { opacity: 1; transform: scale(1); }\n        }\n\n        \/* 2. \u6df1\u8272\u770b\u677f - \u5168\u5e73\u53f0\u5141\u8a31\u7834\u6846 *\/\n        .cl-hero-canvas {\n            position: relative;\n            width: 100%;\n            min-height: 400px;\n            border-radius: 20px;\n            margin-bottom: 25px;\n            background: radial-gradient(circle at 20% 30%, #2e121d 0%, transparent 40%),\n                        radial-gradient(circle at 80% 70%, #0d3240 0%, transparent 40%),\n                        linear-gradient(135deg, #13141f 0%, #1a1a1a 100%);\n            background-size: 200% 200%;\n            animation: cl-gradient-flow 10s ease infinite;\n            overflow: visible; \/* \u5168\u5e73\u53f0\u5141\u8a31\u7834\u6846 *\/\n            display: flex;\n            flex-direction: column;\n            justify-content: center;\n            padding: 50px;\n            cursor: crosshair;\n            box-shadow: 0 15px 35px rgba(0,0,0,0.25);\n            border: 1px solid rgba(255,255,255,0.1);\n            z-index: 5;\n        }\n\n        .cl-hero-canvas::after {\n            content: \"\";\n            position: absolute;\n            top: 0; left: 0; width: 100%; height: 100%;\n            background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%),\n                        linear-gradient(90deg, rgba(255, 0, 0, 0.02), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.02));\n            background-size: 100% 4px, 3px 100%;\n            pointer-events: none;\n            border-radius: 20px;\n        }\n\n        @keyframes cl-gradient-flow {\n            0% { background-position: 0% 50%; }\n            50% { background-position: 100% 50%; }\n            100% { background-position: 0% 50%; }\n        }\n\n        .cl-main-title {\n            font-size: clamp(1.8rem, 5vw, 3rem);\n            margin: 0 0 15px 0;\n            font-weight: 900;\n            color: #ffffff;\n            letter-spacing: -1px;\n            pointer-events: none;\n            text-shadow: 0 5px 15px rgba(0,0,0,0.3);\n            z-index: 2;\n        }\n\n        .cl-tagline {\n            font-size: 1rem;\n            line-height: 1.8;\n            max-width: 600px;\n            color: rgba(255, 255, 255, 0.8);\n            background: rgba(0, 0, 0, 0.4);\n            padding: 25px;\n            border-radius: 15px;\n            backdrop-filter: blur(15px);\n            -webkit-backdrop-filter: blur(15px);\n            pointer-events: none;\n            border: 1px solid rgba(255,255,255,0.1);\n            z-index: 2;\n            box-shadow: 0 10px 30px rgba(0,0,0,0.2);\n        }\n\n        \/* \u653e\u5927\u93e1 - \u878d\u5408\u611f\u8207\u56fa\u5b9a\u767d\u5b57\u5fae\u8abf *\/\n        #cl-magnifier {\n            position: absolute;\n            width: 110px;\n            height: 110px;\n            border-radius: 50%;\n            \/* \u4fee\u6b63\uff1a\u5916\u6846\u63a5\u8fd1\u767d\u8272\u5fae\u900f\u660e *\/\n            border: 4px solid rgba(255, 255, 255, 0.5); \n            pointer-events: none;\n            display: none;\n            z-index: 999;\n            box-shadow: 0 10px 30px rgba(0,0,0,0.5);\n            display: flex;\n            flex-direction: column;\n            justify-content: center;\n            align-items: center;\n            transition: transform 0.1s ease-out;\n            \/* \u80cc\u666f\u5c0d\u6bd4\u5ea6\u8207\u6a21\u7cca *\/\n            backdrop-filter: contrast(1.1) blur(2px);\n            -webkit-backdrop-filter: contrast(1.1) blur(2px);\n        }\n\n        #cl-hex-val {\n            font-size: 14px;\n            font-weight: 800;\n            font-family: 'Monaco', monospace;\n            \/* \u4fee\u6b63\uff1a\u56fa\u5b9a\u70ba\u767d\u8272 *\/\n            color: #ffffff !important; \n            text-shadow: 0 2px 4px rgba(0,0,0,0.8);\n        }\n\n        \/* 3. \u529f\u80fd\u7db2\u683c\u8207\u6d6e\u6846\u6548\u679c *\/\n        .cl-feature-grid {\n            display: grid;\n            grid-template-columns: repeat(2, 1fr);\n            gap: 20px;\n            position: relative;\n            z-index: 1;\n        }\n\n        .cl-card {\n            background: #ffffff;\n            border: 1px solid #ddd;\n            border-radius: 16px;\n            padding: 30px;\n            transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);\n            position: relative;\n        }\n\n        .cl-card:hover {\n            transform: translateY(-8px);\n            box-shadow: 0 15px 35px rgba(0,0,0,0.12);\n            border-color: #00ff88;\n            z-index: 10;\n        }\n\n        .cl-card-header { display: flex; align-items: center; margin-bottom: 15px; }\n\n        .cl-index-num {\n            background: #1a1a1a;\n            color: #00ff88;\n            width: 28px; height: 28px;\n            display: flex; align-items: center; justify-content: center;\n            font-size: 0.8rem; font-weight: 900; border-radius: 8px; margin-right: 12px;\n            box-shadow: 0 4px 10px rgba(0,0,0,0.1);\n        }\n\n        .cl-card-title { font-size: 1.2rem; font-weight: 800; color: #111; }\n        .cl-item-title {\n            font-weight: 800; display: flex; align-items: center; color: #333; font-size: 0.95rem; margin-top: 15px;\n        }\n        .cl-item-title::before {\n            content: \"\"; width: 4px; height: 4px; background: #00ff88; margin-right: 8px; border-radius: 50%;\n        }\n        .cl-item-desc { font-size: 0.85rem; color: #666; display: block; margin-top: 5px; padding-left: 12px; line-height: 1.6; }\n\n        \/* 4. \u5e95\u90e8\u8f38\u51fa\u5340 *\/\n        .cl-export-box {\n            margin-top: 30px;\n            background: #1a1a1a;\n            padding: 35px;\n            border-radius: 20px;\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            gap: 25px;\n            border: 1px solid rgba(255,255,255,0.05);\n        }\n\n        .cl-export-text h3 { color: #fff; margin: 0; }\n        .cl-export-text p { color: #999; margin: 5px 0 0 0; font-size: 0.9rem; }\n\n        .cl-btn {\n            background: #ffffff; color: #1a1a1a;\n            padding: 15px 35px; border-radius: 12px;\n            text-decoration: none; font-size: 1rem; font-weight: 800;\n            transition: 0.3s cubic-bezier(0.23, 1, 0.32, 1);\n            white-space: nowrap;\n            box-shadow: 0 4px 15px rgba(255,255,255,0.2);\n        }\n\n        .cl-btn:hover { \n            background: #00ff88; color: #000;\n            transform: scale(1.05);\n            box-shadow: 0 8px 25px rgba(0, 255, 136, 0.4);\n        }\n\n        .cl-copy-toast {\n            position: absolute; top: 25px; right: 25px;\n            background: #00ff88; color: #000;\n            padding: 8px 20px; border-radius: 8px;\n            font-size: 0.8rem; font-weight: 900;\n            display: none; z-index: 1001;\n            box-shadow: 0 5px 15px rgba(0,255,136,0.3);\n            animation: fadeIn 0.3s ease;\n        }\n\n        @keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }\n\n        \/* 5. \u624b\u6a5f\u7248\u512a\u5316 *\/\n       @media (max-width: 768px) {\n    \/* \u5916\u5c64\u5bb9\u5668\u53d6\u6d88\u591a\u9918 padding *\/\n    #cl-engine-wrapper {\n        padding: 0; \/* \u4fdd\u7559\u4e3b\u984c\u672c\u8eab padding *\/\n    }\n\n    \/* \u4e3b\u984c\u5340\u57df\u4fdd\u6301\u81ea\u8eab padding *\/\n    .cl-hero-canvas { \n        padding: 40px; \/* \u4fdd\u7559\u4e3b\u984c\u672c\u8eab\u9650\u5236 *\/\n        min-height: 380px; \n        overflow: visible; \n    }\n\n    \/* \u529f\u80fd\u7db2\u683c\u624b\u6a5f\u7248\u4e00\u884c\u4e00\u500b *\/\n    .cl-feature-grid { \n        grid-template-columns: 1fr; \n        gap: 20px; \/* \u4fdd\u7559\u9593\u8ddd *\/\n    }\n\n    \/* \u5e95\u90e8\u8f38\u51fa\u5340\u6539\u70ba\u5782\u76f4\u6392\u5217 *\/\n    .cl-export-box { \n        flex-direction: column; \n        text-align: center; \n        padding-left: 10;\n        padding-right: 10;\n    }\n\n    \/* \u6309\u9215\u5bec\u5ea6\u6eff\u7248 *\/\n    .cl-btn { \n        width: 75%; \n    }\n}\n    <\/style>\n\n    <div class=\"cl-system-status\">\n        <div class=\"cl-status-dot\"><\/div>\n        <span>SYSTEM ONLINE | SPECTRUM ANALYSIS ACTIVE<\/span>\n    <\/div>\n\n    <header class=\"cl-hero-canvas\" id=\"cl-wall\">\n        <div class=\"cl-copy-toast\" id=\"cl-toast\">\u2713 HEX COPIED<\/div>\n        <div id=\"cl-magnifier\">\n            <span id=\"cl-hex-val\">#FFFFFF<\/span>\n        <\/div>\n        <h1 class=\"cl-main-title\">\u8996\u89ba\u983b\u8b5c\u8207<br>\u611f\u6027\u77e9\u9663\u5206\u6790\u5100<\/h1>\n        <div class=\"cl-tagline\">\n            \u8d85\u8d8a\u50b3\u7d71\u8272\u78bc\u8f49\u63db\u3002\u690d\u57fa\u65bc\u7269\u7406\u5149\u5b78\u3001\u795e\u7d93\u751f\u7406\u5b78\u8207\u611f\u6027\u5de5\u5b78\uff0c\u5c07\u4e0d\u53ef\u898b\u7684\u8272\u5f69\u80fd\u91cf\u8f49\u5316\u70ba\u751f\u7406\u8207\u60c5\u7dd2\u6578\u64da\u3002\n        <\/div>\n    <\/header>\n\n    <div class=\"cl-feature-grid\">\n        <article class=\"cl-card\">\n            <div class=\"cl-card-header\">\n                <span class=\"cl-index-num\">A<\/span>\n                <div class=\"cl-card-title\">\u986f\u5fae\u7d1a\u8996\u89ba\u63a1\u6a23<\/div>\n            <\/div>\n            <span class=\"cl-item-title\">\u50cf\u7d20\u7d1a\u6e32\u67d3\u756b\u5e03<\/span>\n            <span class=\"cl-item-desc\">\u7cbe\u6e96\u6355\u6349 JPG\/PNG \u6bcf\u4e00\u9846\u50cf\u7d20\uff0c\u652f\u63f4\u6975\u81f4\u7e2e\u653e\u8207\u6d41\u66a2\u7684\u62d6\u66f3\u5e73\u79fb\u3002<\/span>\n            <span class=\"cl-item-title\">\u5373\u6642\u8272\u5f69\u63a2\u6e2c<\/span>\n            <span class=\"cl-item-desc\">\u6beb\u79d2\u7d1a\u63a1\u6a23\u56de\u994b\uff0c\u900f\u904e\u9ad8\u611f\u5ea6\u9810\u89bd\u93e1\u5448\u73fe\u6700\u771f\u5be6\u7684\u8272\u5f69\u6578\u503c\u3002<\/span>\n        <\/article>\n\n        <article class=\"cl-card\">\n            <div class=\"cl-card-header\">\n                <span class=\"cl-index-num\">B<\/span>\n                <div class=\"cl-card-title\">\u6df1\u5ea6\u7406\u8ad6\u5831\u544a<\/div>\n            <\/div>\n            <span class=\"cl-item-title\">\u7269\u7406\u5149\u5b78\u6f14\u7b97<\/span>\n            <span class=\"cl-item-desc\">\u8a08\u7b97\u6ce2\u9577\u8207\u80fd\u91cf\u5206\u4f48\uff0c\u9810\u5224\u5149\u6ef2\u6548\u61c9\u5c0d\u8a2d\u8a08\u7522\u751f\u7684\u7d30\u5fae\u5f71\u97ff\u3002<\/span>\n            <span class=\"cl-item-title\">\u795e\u7d93\u751f\u7406\u6620\u5c04<\/span>\n            <span class=\"cl-item-desc\">\u6a21\u64ec LMS \u7d30\u80de\u523a\u6fc0\u53cd\u61c9\uff0c\u9023\u7d50\u69ae\u683c\u5fc3\u7406\u5b78\u63a2\u7d22\u8272\u5f69\u80cc\u5f8c\u7684\u96c6\u9ad4\u6f5b\u610f\u8b58\u3002<\/span>\n        <\/article>\n\n        <article class=\"cl-card\">\n            <div class=\"cl-card-header\">\n                <span class=\"cl-index-num\">C<\/span>\n                <div class=\"cl-card-title\">\u611f\u6027\u806f\u89ba\u77e9\u9663<\/div>\n            <\/div>\n            <span class=\"cl-item-title\">\u97f3\u6a02\u806f\u89ba\u8f49\u63db<\/span>\n            <span class=\"cl-item-desc\">\u5c07\u5149\u983b\u7cbe\u78ba\u5c0d\u61c9\u81f3\u516b\u5ea6\u97f3\u968e\uff0c\u70ba\u8996\u89ba\u8272\u5f69\u914d\u5c0d\u5c08\u5c6c\u7684\u65cb\u5f8b\u6d41\u6d3e\u3002<\/span>\n            <span class=\"cl-item-title\">\u591a\u611f\u5b98\u91cf\u5316<\/span>\n            <span class=\"cl-item-desc\">\u91cf\u5316\u8272\u5f69\u7522\u751f\u7684\u91cd\u91cf\u611f\u3001\u6eab\u5ea6\u611f\u8207\u6642\u9593\u611f\uff0c\u8b93\u611f\u6027\u6578\u64da\u5316\u3002<\/span>\n        <\/article>\n\n        <article class=\"cl-card\">\n            <div class=\"cl-card-header\">\n                <span class=\"cl-index-num\">D<\/span>\n                <div class=\"cl-card-title\">\u667a\u6167\u8a2d\u8a08\u6574\u5408<\/div>\n            <\/div>\n            <span class=\"cl-item-title\">\u6b4c\u5fb7\u914d\u6bd4\u914d\u8272<\/span>\n            <span class=\"cl-item-desc\">\u81ea\u52d5\u751f\u6210\u516d\u5927\u548c\u8072\u65b9\u6848\uff0c\u4e26\u63d0\u4f9b\u5c08\u696d\u7684\u9762\u7a4d\u6bd4\u4f8b\u5e73\u8861\u5efa\u8b70\u3002<\/span>\n            <span class=\"cl-item-title\">\u85dd\u8853\u53f2\u5b9a\u4f4d<\/span>\n            <span class=\"cl-item-desc\">\u6f14\u7b97\u6cd5\u5206\u6790\u8272\u5f69\u7279\u5fb5\uff0c\u81ea\u52d5\u6a19\u8a18\u8a2d\u8a08\u6240\u5c6c\u7684\u85dd\u8853\u98a8\u683c\u6b77\u53f2\u8108\u7d61\u3002<\/span>\n        <\/article>\n    <\/div>\n\n    <section class=\"cl-export-box\">\n        <div class=\"cl-export-text\">\n            <h3>E. \u5c08\u696d\u8f38\u51fa\u6574\u5408\u6d41\u7a0b<\/h3>\n            <p>\u5b8c\u6574\u5206\u6790\u5831\u544a\u5c0e\u51fa\uff0c\u7121\u7e2b\u5c0d\u63a5 Adobe \u8207 Procreate \u8a2d\u8a08\u74b0\u5883\u3002<\/p>\n        <\/div>\n        <a href=\"https:\/\/apps.apple.com\/tw\/app\/%E9%87%8F%E8%89%B2\/id6759447930\" class=\"cl-btn\" target=\"_blank\">\u4e0b\u8f09\u5206\u6790\u5f15\u64ce \u2192<\/a>\n    <\/section>\n\n    <footer style=\"margin-top:40px; text-align:center; font-size:0.75rem; color:#999; letter-spacing: 2px;\">\n        \u00a9 CHROMALOGIC ENGINE | COLOR SCIENCE SOLUTIONS\n    <\/footer>\n\n    <script>\n        (function() {\n            const wall = document.getElementById('cl-wall');\n            const magnifier = document.getElementById('cl-magnifier');\n            const hexVal = document.getElementById('cl-hex-val');\n            const toast = document.getElementById('cl-toast');\n\n            function handleMove(clientX, clientY) {\n                magnifier.style.display = 'flex';\n                const rect = wall.getBoundingClientRect();\n                const x = clientX - rect.left;\n                const y = clientY - rect.top;\n                \n                \/\/ \u7f6e\u4e2d\u653e\u5927\u93e1\n                const size = magnifier.offsetWidth \/ 2;\n                magnifier.style.left = (x - size) + 'px';\n                magnifier.style.top = (y - size) + 'px';\n                \n                const r = Math.floor((x \/ wall.offsetWidth) * 150) + 50;\n                const g = Math.floor((y \/ wall.offsetHeight) * 100) + 50;\n                const b = 180; \n                const hex = \"#\" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase();\n                \n                hexVal.innerText = hex;\n                magnifier.style.backgroundColor = hex;\n            }\n\n            wall.addEventListener('mousemove', (e) => handleMove(e.clientX, e.clientY));\n            \n            \/\/ \u624b\u6a5f\u89f8\u63a7\u652f\u63f4\n            wall.addEventListener('touchmove', (e) => {\n                handleMove(e.touches[0].clientX, e.touches[0].clientY);\n            }, { passive: true });\n\n            wall.addEventListener('mouseleave', () => { magnifier.style.display = 'none'; });\n            wall.addEventListener('touchend', () => { magnifier.style.display = 'none'; });\n\n            wall.addEventListener('click', () => {\n                const code = hexVal.innerText;\n                navigator.clipboard.writeText(code).then(() => {\n                    toast.style.display = 'block';\n                    setTimeout(() => { toast.style.display = 'none'; }, 2000);\n                });\n            });\n        })();\n    <\/script>\n<\/div>\n<\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>2026 \u8272\u5f69\u5206\u6790\u5f15\u64ce<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-2578","post","type-post","status-publish","format-standard","hentry","category-recentposts"],"_links":{"self":[{"href":"https:\/\/purestudio.com.tw\/official\/wp-json\/wp\/v2\/posts\/2578","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/purestudio.com.tw\/official\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/purestudio.com.tw\/official\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/purestudio.com.tw\/official\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/purestudio.com.tw\/official\/wp-json\/wp\/v2\/comments?post=2578"}],"version-history":[{"count":22,"href":"https:\/\/purestudio.com.tw\/official\/wp-json\/wp\/v2\/posts\/2578\/revisions"}],"predecessor-version":[{"id":3064,"href":"https:\/\/purestudio.com.tw\/official\/wp-json\/wp\/v2\/posts\/2578\/revisions\/3064"}],"wp:attachment":[{"href":"https:\/\/purestudio.com.tw\/official\/wp-json\/wp\/v2\/media?parent=2578"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/purestudio.com.tw\/official\/wp-json\/wp\/v2\/categories?post=2578"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/purestudio.com.tw\/official\/wp-json\/wp\/v2\/tags?post=2578"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}