{"id":382,"date":"2026-06-29T23:47:36","date_gmt":"2026-06-29T15:47:36","guid":{"rendered":"http:\/\/43.134.36.201\/?p=382"},"modified":"2026-06-30T08:59:02","modified_gmt":"2026-06-30T00:59:02","slug":"%e5%8c%96%e9%aa%8c%e5%ae%a4%e9%a2%9c%e8%89%b2%e7%9a%84%e8%ae%a4%e7%9f%a5","status":"publish","type":"post","link":"https:\/\/www.cpb-vip.com\/?p=382","title":{"rendered":"\u5316\u9a8c\u5ba4\u989c\u8272\u7684\u8ba4\u77e5"},"content":{"rendered":"\n<style data-wp-block-html=\"css\">\n\/* \u628a\u8fd9\u6bb5\u4ee3\u7801\u7c98\u8d34\u5230 WordPress \u81ea\u5b9a\u4e49 HTML \u5757\u7684\u3010CSS\u3011\u6807\u7b7e\u91cc *\/\n\/* ===== \u5168\u5c40\u53d8\u91cf & \u91cd\u7f6e ===== *\/\n:root{\n  --bg:#f8f6f3; --card:#ffffff; --ink:#2a2520; --muted:#7a7268;\n  --accent:#d4634c; --accent2:#3d8b6e; --gold:#c89942; --blue:#3a6ea5;\n  --border:#e8e2da; --shadow:0 4px 24px rgba(60,40,20,.07);\n  --radius:18px;\n}\n*{box-sizing:border-box;margin:0;padding:0}\nbody{\n  font-family:'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Segoe UI',sans-serif;\n  background:var(--bg); color:var(--ink); line-height:1.7;\n  -webkit-font-smoothing:antialiased;\n}\n\/* ===== \u5bfc\u822a ===== *\/\n.nav{position:sticky;top:0;z-index:100;background:rgba(248,246,243,.95);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:12px 24px;max-width:1100px;margin:0 auto}\n.nav-logo{font-weight:700;font-size:1.05rem;display:flex;align-items:center;gap:8px}\n.nav-links{display:flex;gap:18px;flex-wrap:wrap}\n.nav-links a{text-decoration:none;color:var(--muted);font-size:.85rem;transition:color .2s}\n.nav-links a:hover{color:var(--accent)}\n@media(max-width:600px){.nav-links{display:none}}\n.wrap{max-width:1100px;margin:0 auto;padding:0 24px}\n\/* ===== Hero ===== *\/\n.hero{text-align:center;padding:56px 24px 48px;background:linear-gradient(180deg,#fdfbf7,#f8f6f3)}\n.hero h1{font-size:2.2rem;font-weight:800;letter-spacing:-.5px;margin-bottom:12px}\n.hero .lead{font-size:1.05rem;color:var(--muted);max-width:580px;margin:0 auto 8px}\n.hero .tags{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:18px}\n.hero .tag{background:var(--card);border:1px solid var(--border);border-radius:99px;padding:5px 14px;font-size:.78rem;color:var(--muted)}\n\/* ===== Section \u901a\u7528 ===== *\/\nsection{padding:56px 0}\n.sec-head{text-align:center;margin-bottom:36px}\n.sec-head .num{display:inline-block;font-size:.75rem;font-weight:700;color:var(--accent);background:rgba(212,99,76,.1);padding:3px 12px;border-radius:99px;margin-bottom:10px}\n.sec-head h2{font-size:1.6rem;font-weight:700;margin-bottom:8px}\n.sec-head p{color:var(--muted);font-size:.95rem;max-width:560px;margin:0 auto}\n\/* ===== \u5361\u7247\u7f51\u683c ===== *\/\n.grid{display:grid;gap:16px}\n.grid-2{grid-template-columns:repeat(2,1fr)}\n.grid-3{grid-template-columns:repeat(3,1fr)}\n@media(max-width:800px){.grid-3{grid-template-columns:repeat(2,1fr)}}\n@media(max-width:560px){.grid-2,.grid-3{grid-template-columns:1fr}}\n.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}\n.card .icon{font-size:1.8rem;margin-bottom:10px;display:block}\n.card h3{font-size:1rem;font-weight:700;margin-bottom:8px}\n.card p{font-size:.88rem;color:#5a5248;line-height:1.65}\n.card .tip{margin-top:10px;padding:8px 12px;background:#faf7f2;border-radius:10px;font-size:.8rem;color:#8a7e6e;border-left:3px solid var(--gold)}\n\/* ===== \u7eafCSS\u8272\u8f6e ===== *\/\n.wheel-section{background:var(--card);border:1px solid var(--border);border-radius:24px;padding:36px;box-shadow:var(--shadow);margin:0 auto 20px}\n.wheel-layout{display:flex;gap:40px;align-items:center;flex-wrap:wrap;justify-content:center}\n.css-wheel{\n  width:300px;height:300px;border-radius:50%;position:relative;\n  background:radial-gradient(circle closest-side, #ffffff 30%, rgba(255,255,255,0) 100%),conic-gradient(hsl(0,80%,50%), hsl(15,80%,50%), hsl(30,80%,50%), hsl(45,80%,50%), hsl(60,80%,50%), hsl(75,80%,50%), hsl(90,80%,50%), hsl(105,80%,50%), hsl(120,80%,50%), hsl(135,80%,50%), hsl(150,80%,50%), hsl(165,80%,50%), hsl(180,80%,50%), hsl(195,80%,50%), hsl(210,80%,50%), hsl(225,80%,50%), hsl(240,80%,50%), hsl(255,80%,50%), hsl(270,80%,50%), hsl(285,80%,50%), hsl(300,80%,50%), hsl(315,80%,50%), hsl(330,80%,50%), hsl(345,80%,50%), hsl(360,80%,50%));\n  box-shadow:0 6px 28px rgba(0,0,0,.12), inset 0 0 40px rgba(255,255,255,.15);\n  flex-shrink:0;user-select:none;\n}\n.wheel-labels{position:absolute;inset:0;pointer-events:none}\n.wl{position:absolute;font-size:.72rem;font-weight:700;text-shadow:0 1px 4px rgba(0,0,0,.55);transform:translate(-50%,-50%);width:28px;text-align:center}\n.wl-red{top:7%;left:50%;color:#fff}\n.wl-org{top:21%;left:86.5%;color:#fff}\n.wl-yel{top:50%;left:93%;color:#333}\n.wl-grn{top:79%;left:86.5%;color:#fff}\n.wl-blu{top:93%;left:50%;color:#fff}\n.wl-vio{top:79%;left:13.5%;color:#fff}\n.wheel-center-hint{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:.68rem;color:var(--muted);text-align:center;width:90px;pointer-events:none}\n.wheel-info{text-align:center;min-width:200px}\n.preview-box{width:80px;height:80px;border-radius:18px;border:3px solid var(--border);margin:0 auto 14px;box-shadow:0 4px 16px rgba(0,0,0,.08);transition:background .15s}\n.code-row{font-family:'SF Mono','Fira Code',Consolas,monospace;font-size:.82rem;margin-bottom:6px;color:#5a5248}\n.code-row span.lbl{background:#f0ebe3;padding:2px 8px;border-radius:6px;margin-right:6px;font-weight:600;color:var(--ink)}\n.comp-row{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:12px;font-size:.82rem;color:var(--muted)}\n.comp-swatch{width:34px;height:34px;border-radius:9px;border:2px solid var(--border)}\n\/* ===== \u8c03\u8272\u5668 ===== *\/\n.mixer-section{background:linear-gradient(135deg,#fdfbf7,#f3ede4);border-radius:24px;padding:36px;border:1px solid var(--border)}\n.mixer-layout{display:flex;gap:36px;align-items:center;flex-wrap:wrap;justify-content:center}\n.mixer-controls{flex:1;min-width:280px;max-width:400px}\n.slider-group{margin-bottom:18px}\n.slider-group label{display:flex;justify-content:space-between;font-size:.85rem;font-weight:600;margin-bottom:6px}\n.slider-group .val{font-family:monospace;color:var(--muted)}\n.slider{width:100%;height:8px;border-radius:99px;-webkit-appearance:none;appearance:none;outline:none}\n.slider::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid currentColor;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.15)}\n.slider::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid currentColor;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.15)}\n.slider-r{background:linear-gradient(90deg,#fff,#e74c3c);color:#e74c3c}\n.slider-y{background:linear-gradient(90deg,#fff,#f1c40f);color:#c89942}\n.slider-b{background:linear-gradient(90deg,#fff,#3498db);color:#3498db}\n.mixer-result{flex:0 0 auto;text-align:center}\n.mix-preview{width:140px;height:140px;border-radius:24px;border:4px solid #fff;box-shadow:0 8px 32px rgba(0,0,0,.12);margin-bottom:12px;transition:background .2s}\n.mix-hex{font-family:'SF Mono',Fira Code,Consolas,monospace;font-size:1rem;font-weight:700}\n.mix-name{font-size:.85rem;color:var(--muted);margin-top:4px}\n.mix-hint{text-align:center;margin-top:20px;padding:12px 18px;background:rgba(255,255,255,.65);border-radius:12px;font-size:.84rem;color:#6a6258}\n\/* ===== \u5de5\u827a\u6d41\u7a0b ===== *\/\n.process-flow{display:flex;gap:0;flex-wrap:wrap;justify-content:center;margin-top:10px}\n.process-step{flex:1;min-width:130px;max-width:170px;text-align:center;position:relative;padding:0 8px}\n.step-circle{width:52px;height:52px;border-radius:50%;background:var(--card);border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:1.4rem;margin:0 auto 8px;position:relative;z-index:2}\n.step-title{font-weight:700;font-size:.84rem;margin-bottom:4px}\n.step-desc{font-size:.76rem;color:var(--muted);line-height:1.5}\n.step-arrow{position:absolute;top:26px;right:-6px;color:var(--border);font-size:1.2rem;z-index:1}\n@media(max-width:720px){.step-arrow{display:none}}\n\/* ===== \u67d3\u6599\u8272\u8c31 ===== *\/\n.dye-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(125px,1fr));gap:14px;margin-top:20px}\n.dye-card{background:var(--card);border:1px solid var(--border);border-radius:14px;overflow:hidden}\n.dye-swatch{height:76px;position:relative}\n.dye-swatch .dye-name{position:absolute;bottom:6px;left:8px;color:#fff;font-size:.78rem;font-weight:600;text-shadow:0 1px 4px rgba(0,0,0,.5)}\n.dye-info{padding:9px 11px}\n.dye-info .code{font-family:monospace;font-size:.73rem;color:var(--muted)}\n.dye-info .use{font-size:.74rem;color:#6a6258;margin-top:2px}\n\/* ===== \u672f\u8bed\u8868 ===== *\/\n.glossary{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}\n@media(max-width:600px){.glossary{grid-template-columns:1fr}}\n.gloss-item{display:flex;gap:12px;padding:14px 16px;background:var(--card);border:1px solid var(--border);border-radius:12px}\n.gloss-term{flex-shrink:0;font-weight:700;font-size:.88rem;color:var(--accent);min-width:70px}\n.gloss-def{font-size:.83rem;color:#5a5248;line-height:1.6}\n\/* ===== FAQ ===== *\/\n.faq-item{background:var(--card);border:1px solid var(--border);border-radius:14px;margin-bottom:10px;overflow:hidden}\n.faq-q{padding:16px 20px;font-weight:600;font-size:.92rem;cursor:pointer;display:flex;justify-content:space-between;align-items:center;user-select:none}\n.faq-q .arrow{transition:transform .25s;color:var(--muted);font-size:.85rem}\n.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease,padding .35s ease;padding:0 20px;font-size:.86rem;color:#5a5248;line-height:1.7}\n.faq-item.open .faq-q .arrow{transform:rotate(180deg)}\n.faq-item.open .faq-a{max-height:320px;padding:0 20px 16px}\n\/* ===== \u6e29\u5ea6\u8ba1 ===== *\/\n.temp-gauge{display:flex;align-items:flex-end;justify-content:center;gap:28px;margin:20px 0;flex-wrap:wrap}\n.temp-bar{width:50px;background:linear-gradient(180deg,#e74c3c,#f39c12,#3498db);border-radius:12px;position:relative;height:200px;overflow:hidden}\n.temp-marker{position:absolute;left:-8px;width:66px;height:4px;background:var(--ink);border-radius:2px}\n.temp-marker::after{content:attr(data-label);position:absolute;left:62px;top:-10px;white-space:nowrap;font-size:.77rem;font-weight:600;color:var(--ink)}\n.temp-labels{display:flex;flex-direction:column;justify-content:flex-end;height:200px;font-size:.77rem;color:var(--muted)}\n.temp-labels div{height:40px;display:flex;align-items:center}\n\/* ===== \u539f\u7406\u56fe ===== *\/\n.principle-diagram{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;margin:24px 0;padding:24px;background:#faf7f2;border-radius:16px}\n.principle-stage{text-align:center;flex:1;min-width:115px}\n.principle-visual{width:74px;height:74px;margin:0 auto 8px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:1.7rem}\n.principle-arrow{font-size:1.4rem;color:var(--border)}\n.principle-stage h4{font-size:.8rem;font-weight:700;margin-bottom:2px}\n.principle-stage p{font-size:.72rem;color:var(--muted)}\n\/* ===== Footer ===== *\/\nfooter{text-align:center;padding:36px 24px;border-top:1px solid var(--border);color:var(--muted);font-size:.82rem}\n\/* ===== \u951a\u70b9\u504f\u79fb ===== *\/\n.anchor{scroll-margin-top:70px}\n<\/style>\n\n<script data-wp-block-html=\"js\">\n\/* \u628a\u8fd9\u6bb5\u4ee3\u7801\u7c98\u8d34\u5230 WordPress \u81ea\u5b9a\u4e49 HTML \u5757\u7684\u3010JavaScript\u3011\u6807\u7b7e\u91cc *\/\n(function(){\n  'use strict';\n  \/\/ \u989c\u8272\u547d\u540d\n  function getColorName(r,g,b){\n    if(r>240&&g>240&&b>240)return'\u767d\u8272\uff08\u7a7a\u767d\uff09';\n    if(r<40&#038;&#038;g<40&#038;&#038;b<40)return'\u9ed1\u8272\/\u6df1\u7070';\n    if(Math.abs(r-g)<25&#038;&#038;Math.abs(g-b)<25&#038;&#038;r<100)return'\u7070\u8272';\n    var max=Math.max(r,g,b),diff=max-Math.min(r,g,b);\n    if(diff<30)return max>180?'\u6d45\u7070':'\u7070\u8272';\n    if(max===r){\n      if(g>r*0.75)return'\u6a59\u8272';\n      if(b>r*0.6)return'\u7d2b\u7ea2\/\u73ab\u7ea2';\n      return'\u7ea2\u8272';\n    }\n    if(max===g){\n      if(r>g*0.7)return'\u9ec4\u7eff\u8272';\n      if(b>g*0.7)return'\u9752\u7eff\u8272';\n      return'\u7eff\u8272';\n    }\n    if(max===b){\n      if(r>b*0.6)return'\u7d2b\u8272';\n      if(g>b*0.6)return'\u84dd\u7eff\/\u9752\u8272';\n      return'\u84dd\u8272';\n    }\n    return'\u6df7\u5408\u8272';\n  }\n  \/\/ \u67d3\u6599RGB\u503c\n  var dyeR=[231,76,60],dyeY=[241,196,15],dyeB=[52,152,219];\n  \/\/ \u66f4\u65b0\u8c03\u8272\u5668\n  function updateMixer(){\n    var sR=document.getElementById('sliderR'),sY=document.getElementById('sliderY'),sB=document.getElementById('sliderB');\n    if(!sR||!sY||!sB)return;\n    var r=parseInt(sR.value),y=parseInt(sY.value),b=parseInt(sB.value);\n    var rV=document.getElementById('rVal'),yV=document.getElementById('yVal'),bV=document.getElementById('bVal');\n    if(rV)rV.textContent=r;\n    if(yV)yV.textContent=y;\n    if(bV)bV.textContent=b;\n    var total=r+y+b,fR,fG,fB;\n    if(total===0){\n      fR=fG=fB=255;\n    }else{\n      fR=(dyeR[0]*r+dyeY[0]*y+dyeB[0]*b)\/total;\n      fG=(dyeR[1]*r+dyeY[1]*y+dyeB[1]*b)\/total;\n      fB=(dyeR[2]*r+dyeY[2]*y+dyeB[2]*b)\/total;\n      if(r>0&&y>0&&b>0){\n        var d=Math.min(r,y,b)\/total*0.4;\n        fR*=1-d;fG*=1-d;fB*=1-d;\n      }\n    }\n    fR=Math.round(fR);fG=Math.round(fG);fB=Math.round(fB);\n    var hex='#'+([fR,fG,fB].map(function(c){var s=c.toString(16);return s.length===1?'0'+s:s}).join('')).toUpperCase();\n    var pv=document.getElementById('mixPreview'),hx=document.getElementById('mixHex'),nm=document.getElementById('mixName'),ht=document.getElementById('mixHint');\n    if(pv)pv.style.background=hex;\n    if(hx)hx.textContent=hex;\n    if(nm)nm.textContent=getColorName(fR,fG,fB);\n    if(ht){\n      var parts=[];\n      if(r>0)parts.push('\u7ea2'+r);\n      if(y>0)parts.push('\u9ec4'+y);\n      if(b>0)parts.push('\u84dd'+b);\n      var hint='\ud83d\udca1 \u5f53\u524d\uff1a'+(parts.join(' + ')||'\u7a7a\u767d')+' = '+getColorName(fR,fG,fB);\n      if(r===0&&y===0&&b===0){\n        hint='\ud83d\udca1 \u62d6\u52a8\u6ed1\u5757\u52a0\u5165\u67d3\u6599\u8bd5\u8bd5\uff01';\n      }else if(r>0&&y>0&&b===0){\n        hint+='\u3002\u8bd5\u8bd5\u52a0\u4e00\u70b9\u84dd\u8272\u770b\u770b\u4f1a\u600e\u6837\uff1f';\n      }else if(r>0&&y>0&&b>0){\n        hint+='\u3002\u4e09\u8272\u90fd\u52a0\u4e86\u2014\u2014\u6ce8\u610f\u989c\u8272\u4f1a\u53d8\u6697\u53d8\u7070\uff01';\n      }else if(r===0&&y===0&&b>0){\n        hint+='\u3002\u7eaf\u84dd\u8272\uff0c\u8bd5\u8bd5\u52a0\u70b9\u9ec4\u8272\u53d8\u7eff\uff1f';\n      }\n      ht.textContent=hint;\n    }\n  }\n  \/\/ \u8bbe\u7f6e\u9884\u8bbe\n  function setMixer(r,y,b){\n    var sR=document.getElementById('sliderR'),sY=document.getElementById('sliderY'),sB=document.getElementById('sliderB');\n    if(sR)sR.value=r;\n    if(sY)sY.value=y;\n    if(sB)sB.value=b;\n    updateMixer();\n  }\n  \/\/ \u7ed1\u5b9a\u4e8b\u4ef6\n  document.querySelectorAll('[data-mixer]').forEach(function(el){\n    el.addEventListener('input',updateMixer);\n    el.addEventListener('change',updateMixer);\n  });\n  document.querySelectorAll('[data-preset]').forEach(function(btn){\n    btn.addEventListener('click',function(){\n      var v=this.getAttribute('data-preset').split(',');\n      setMixer(+v[0],+v[1],+v[2]);\n    });\n  });\n  document.querySelectorAll('[data-faq-toggle]').forEach(function(el){\n    el.addEventListener('click',function(){\n      this.classList.toggle('open');\n    });\n  });\n  \/\/ \u521d\u59cb\u5316\n  updateMixer();\n})();\n<\/script>\n\n<!-- \u628a\u8fd9\u6bb5\u4ee3\u7801\u7c98\u8d34\u5230 WordPress \u81ea\u5b9a\u4e49 HTML \u5757\u7684\u3010HTML\u3011\u6807\u7b7e\u91cc -->\n<!-- ==================== \u5bfc\u822a ==================== -->\n<nav class=\"nav\">\n  <div class=\"nav-logo\">\ud83c\udfa8 \u67d3\u8272\u5165\u95e8\u6307\u5357<\/div>\n  <div class=\"nav-links\">\n    <a href=\"#color\">\u989c\u8272\u57fa\u7840<\/a>\n    <a href=\"#mixer\">\u4e92\u52a8\u8c03\u8272<\/a>\n    <a href=\"#dye\">\u67d3\u6599\u539f\u7406<\/a>\n    <a href=\"#process\">\u51b7\u67d3\u5de5\u827a<\/a>\n    <a href=\"#practice\">\u62fc\u8272\u5b9e\u6218<\/a>\n    <a href=\"#faq\">\u5e38\u89c1\u95ee\u9898<\/a>\n  <\/div>\n<\/nav>\n<!-- ==================== Hero ==================== -->\n<div class=\"hero\">\n  <h1>\u67d3\u8272\u5230\u5e95\u662f\u600e\u4e48\u56de\u4e8b\uff1f<\/h1>\n  <p class=\"lead\">\u4ece\u989c\u8272\u7684\u672c\u8d28\uff0c\u5230\u67d3\u6599\u7684\u539f\u7406\uff0c\u518d\u5230\u51b7\u67d3\u5de5\u827a\u2014\u2014\u7528\u6700\u76f4\u767d\u7684\u65b9\u5f0f\uff0c\u5e26\u4f60\u4e00\u6b21\u770b\u61c2\u3002<\/p>\n  <div class=\"tags\">\n    <span class=\"tag\">\ud83d\udc54 \u96f6\u57fa\u7840\u53cb\u597d<\/span>\n    <span class=\"tag\">\ud83e\uddea \u5316\u9a8c\u5ba4\u5b9e\u6218<\/span>\n    <span class=\"tag\">\u2744\ufe0f \u51b7\u67d3\u4e13\u7528<\/span>\n  <\/div>\n<\/div>\n<!-- ==================== 01 \u989c\u8272\u57fa\u7840 ==================== -->\n<section id=\"color\" class=\"anchor\">\n  <div class=\"sec-head\">\n    <span class=\"num\">01<\/span>\n    <h2>\u989c\u8272\u662f\u600e\u4e48\u56de\u4e8b\uff1f<\/h2>\n    <p>\u5148\u641e\u61c2\u989c\u8272\u7684\u4e09\u4e2a&#8221;\u7ef4\u5ea6&#8221;\uff0c\u540e\u9762\u7684\u62fc\u8272\u5c31\u4e0d\u518d\u662f\u7384\u5b66\u3002<\/p>\n  <\/div>\n  <div class=\"wrap\">\n    <!-- \u4e09\u5c5e\u6027 -->\n    <div class=\"grid grid-3\" style=\"margin-bottom:28px\">\n      <div class=\"card\">\n        <span class=\"icon\">\ud83c\udf08<\/span>\n        <h3>\u8272\u76f8 \u2014 &#8220;\u662f\u4ec0\u4e48\u989c\u8272&#8221;<\/h3>\n        <p>\u5c31\u662f\u7ea2\u3001\u6a59\u3001\u9ec4\u3001\u7eff\u3001\u84dd\u3001\u7d2b\u8fd9\u4e9b&#8221;\u989c\u8272\u7684\u540d\u5b57&#8221;\u3002\u8272\u76f8\u7531\u5149\u7684\u6ce2\u957f\u51b3\u5b9a\uff0c\u662f\u533a\u5206\u4e0d\u540c\u989c\u8272\u7684\u7b2c\u4e00\u6807\u51c6\u3002<\/p>\n        <div class=\"tip\">\ud83d\udca1 \u5c31\u50cf\u95ee&#8221;\u8fd9\u4ef6\u8863\u670d\u4ec0\u4e48\u8272\uff1f&#8221;\u2014\u2014\u56de\u7b54&#8221;\u7ea2\u8272&#8221;\uff0c\u8bf4\u7684\u5c31\u662f\u8272\u76f8\u3002<\/div>\n      <\/div>\n      <div class=\"card\">\n        <span class=\"icon\">\u2600\ufe0f<\/span>\n        <h3>\u660e\u5ea6 \u2014 &#8220;\u4eae\u8fd8\u662f\u6697&#8221;<\/h3>\n        <p>\u540c\u4e00\u4e2a\u7ea2\u8272\uff0c\u53ef\u4ee5\u4eae\uff08\u504f\u7c89\u3001\u504f\u767d\uff09\uff0c\u4e5f\u53ef\u4ee5\u6697\uff08\u504f\u6df1\u3001\u504f\u9ed1\uff09\u3002\u660e\u5ea6\u5c31\u662f\u989c\u8272\u7684&#8221;\u660e\u4eae\u7a0b\u5ea6&#8221;\u3002<\/p>\n        <div class=\"tip\">\ud83d\udca1 \u52a0\u767d\u53d8\u4eae\uff0c\u52a0\u9ed1\u53d8\u6697\u2014\u2014\u4f46\u8272\u76f8\u6ca1\u53d8\uff0c\u8fd8\u662f&#8221;\u7ea2&#8221;\u3002<\/div>\n      <\/div>\n      <div class=\"card\">\n        <span class=\"icon\">\ud83d\udc8e<\/span>\n        <h3>\u9971\u548c\u5ea6 \u2014 &#8220;\u9c9c\u8273\u8fd8\u662f\u7070\u6697&#8221;<\/h3>\n        <p>\u9971\u548c\u5ea6\u9ad8 = \u9c9c\u8273\u593a\u76ee\uff1b\u9971\u548c\u5ea6\u4f4e = \u7070\u8499\u8499\u7684\u3001\u53d1\u65e7\u3002\u540c\u6837\u8272\u76f8\u548c\u660e\u5ea6\uff0c\u9971\u548c\u5ea6\u51b3\u5b9a\u4e86&#8221;\u8273\u4e0d\u8273&#8221;\u3002<\/p>\n        <div class=\"tip\">\ud83d\udca1 \u5ba2\u6237\u8bf4&#8221;\u8fd9\u4e2a\u7ea2\u592a\u8df3\u4e86&#8221;= \u9971\u548c\u5ea6\u592a\u9ad8\uff1b&#8221;\u592a\u95f7\u4e86&#8221;= \u9971\u548c\u5ea6\u592a\u4f4e\u3002<\/div>\n      <\/div>\n    <\/div>\n    <!-- \u7eafCSS\u8272\u8f6e -->\n    <div class=\"wheel-section\">\n      <h3 style=\"text-align:center;font-size:1.1rem;margin-bottom:6px\">\ud83c\udf9b\ufe0f \u8272\u8f6e \u2014 \u989c\u8272\u7684\u5168\u666f\u5730\u56fe<\/h3>\n      <p style=\"text-align:center;color:var(--muted);font-size:.85rem;margin-bottom:24px\">\n        \u5916\u5708\u4e00\u5708 = \u6240\u6709\u8272\u76f8\uff08\u7ea2\u6a59\u9ec4\u7eff\u84dd\u7d2b\uff09\uff5c \u4ece\u4e2d\u5fc3\u5411\u5916 = \u9971\u548c\u5ea6\u8d8a\u6765\u8d8a\u9ad8\n      <\/p>\n      <div class=\"wheel-layout\">\n        <div class=\"css-wheel\">\n          <div class=\"wheel-labels\">\n            <span class=\"wl wl-red\">\u7ea2<\/span>\n            <span class=\"wl wl-org\">\u6a59<\/span>\n            <span class=\"wl wl-yel\">\u9ec4<\/span>\n            <span class=\"wl wl-grn\">\u7eff<\/span>\n            <span class=\"wl wl-blu\">\u84dd<\/span>\n            <span class=\"wl wl-vio\">\u7d2b<\/span>\n          <\/div>\n          <div class=\"wheel-center-hint\">\u4e2d\u5fc3= \u767d\u8272<br>\u8fb9\u7f18= \u6700\u9c9c\u8273<\/div>\n        <\/div>\n        <div class=\"wheel-info\">\n          <div class=\"preview-box\" id=\"preview\" style=\"background:#3b82f6\"><\/div>\n          <div class=\"code-row\"><span class=\"lbl\">HEX<\/span><span id=\"hex\">#3B82F6<\/span><\/div>\n          <div class=\"code-row\"><span class=\"lbl\">RGB<\/span><span id=\"rgb\">59, 130, 246<\/span><\/div>\n          <div class=\"code-row\"><span class=\"lbl\">HSL<\/span><span id=\"hsl\">217\u00b0, 80%, 50%<\/span><\/div>\n          <div class=\"comp-row\">\n            <span>\u4e92\u8865\u8272<\/span>\n            <div class=\"comp-swatch\" id=\"compSwatch\" style=\"background:#f6a43b\"><\/div>\n            <span id=\"compHex\">#F6A43B<\/span>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n    <!-- \u4e09\u539f\u8272 & \u4e8c\u6b21\u8272 -->\n    <div class=\"grid grid-2\" style=\"margin-top:20px\">\n      <div class=\"card\">\n        <span class=\"icon\">\ud83d\udd34\ud83d\udfe1\ud83d\udd35<\/span>\n        <h3>\u4e09\u539f\u8272 \u2014 \u4e00\u5207\u7684\u8d77\u70b9<\/h3>\n        <p>\u5728\u67d3\u6599\u4e16\u754c\u91cc\uff0c<strong>\u7ea2\u3001\u9ec4\u3001\u84dd<\/strong>\u662f\u4e09\u79cd&#8221;\u65e0\u6cd5\u7528\u5176\u4ed6\u989c\u8272\u8c03\u51fa\u6765&#8221;\u7684\u57fa\u7840\u8272\u3002\u6240\u6709\u5176\u4ed6\u989c\u8272\uff0c\u90fd\u53ef\u4ee5\u7528\u8fd9\u4e09\u79cd\u6309\u4e0d\u540c\u6bd4\u4f8b\u6df7\u5408\u5f97\u5230\u3002<\/p>\n        <div class=\"tip\">\ud83c\udfaf \u67d3\u5382\u4ed3\u5e93\u91cc\u5e38\u5907\u7684&#8221;\u57fa\u8272\u67d3\u6599&#8221;\u5c31\u662f\u7ea2\u3001\u9ec4\u3001\u84dd\u4e09\u8272\uff0c\u7528\u6765\u62fc\u51fa\u5ba2\u6237\u8981\u7684\u4efb\u4f55\u989c\u8272\u3002<\/div>\n      <\/div>\n      <div class=\"card\">\n        <span class=\"icon\">\ud83c\udfa8<\/span>\n        <h3>\u4e8c\u6b21\u8272 \u2014 \u4e24\u4e24\u6df7\u5408<\/h3>\n        <p>\n          \ud83d\udd34\u7ea2 + \ud83d\udfe1\u9ec4 = \ud83d\udfe0<strong>\u6a59<\/strong><br>\n          \ud83d\udd34\u7ea2 + \ud83d\udd35\u84dd = \ud83d\udfe3<strong>\u7d2b<\/strong><br>\n          \ud83d\udfe1\u9ec4 + \ud83d\udd35\u84dd = \ud83d\udfe2<strong>\u7eff<\/strong>\n        <\/p>\n        <div class=\"tip\">\ud83c\udfaf \u518d\u7528\u4e8c\u6b21\u8272\u548c\u539f\u8272\u6df7\uff0c\u5c31\u80fd\u5f97\u5230\u4e09\u6b21\u8272\uff08\u7ea2\u6a59\u3001\u9ec4\u7eff\u3001\u84dd\u7d2b\u2026\u2026\uff09\uff0c\u8272\u8f6e\u5c31\u662f\u8fd9\u4e48\u6765\u7684\u3002<\/div>\n      <\/div>\n    <\/div>\n    <!-- \u4f59\u8272\u539f\u7406 -->\n    <div class=\"card\" style=\"margin-top:16px;border-left:4px solid var(--accent)\">\n      <h3 style=\"margin-bottom:10px\">\ud83d\udd01 \u4f59\u8272\u539f\u7406 \u2014 \u8c03\u8272\u7684&#8221;\u5239\u8f66\u7247&#8221;<\/h3>\n      <p style=\"margin-bottom:12px\">\u5728\u8272\u8f6e\u4e0a\u6b63\u5bf9\u9762\u7684\u4e24\u4e2a\u989c\u8272\u53eb<strong>\u4f59\u8272\uff08\u4e92\u8865\u8272\uff09<\/strong>\u3002\u5b83\u4eec\u6709\u4e2a\u91cd\u8981\u7279\u6027\uff1a<strong>\u4e92\u76f8\u62b5\u6d88<\/strong>\u3002<\/p>\n      <div style=\"display:flex;gap:16px;flex-wrap:wrap;margin:12px 0\">\n        <div style=\"display:flex;align-items:center;gap:8px\"><span style=\"width:24px;height:24px;border-radius:6px;background:#e74c3c;display:inline-block\"><\/span>\u7ea2 \u21c4 <span style=\"width:24px;height:24px;border-radius:6px;background:#27ae60;display:inline-block\"><\/span>\u7eff<\/div>\n        <div style=\"display:flex;align-items:center;gap:8px\"><span style=\"width:24px;height:24px;border-radius:6px;background:#f1c40f;display:inline-block\"><\/span>\u9ec4 \u21c4 <span style=\"width:24px;height:24px;border-radius:6px;background:#8e44ad;display:inline-block\"><\/span>\u7d2b<\/div>\n        <div style=\"display:flex;align-items:center;gap:8px\"><span style=\"width:24px;height:24px;border-radius:6px;background:#3498db;display:inline-block\"><\/span>\u84dd \u21c4 <span style=\"width:24px;height:24px;border-radius:6px;background:#e67e22;display:inline-block\"><\/span>\u6a59<\/div>\n      <\/div>\n      <div class=\"tip\">\ud83d\udca1 \u5b9e\u6218\u7528\u6cd5\uff1a\u67d3\u51fa\u6765\u7684\u7ea2\u8272&#8221;\u504f\u84dd\u5149&#8221;\u4e86\uff1f\u52a0\u4e00\u70b9\u70b9\u4f59\u8272\uff08\u7eff\u8272\u67d3\u6599\uff09\u5c31\u80fd\u628a\u84dd\u5149&#8221;\u5403\u6389&#8221;\uff0c\u8ba9\u7ea2\u8272\u53d8\u6b63\u3002\u52a0\u7684\u91cf\u6781\u5c11\uff0c\u591a\u4e86\u989c\u8272\u4f1a\u53d8\u7070\u3002<\/div>\n    <\/div>\n  <\/div>\n<\/section>\n<!-- ==================== 02 \u4e92\u52a8\u8c03\u8272\u5668 ==================== -->\n<section id=\"mixer\" class=\"anchor\" style=\"background:linear-gradient(180deg,#f8f6f3,#f3ede4)\">\n  <div class=\"sec-head\">\n    <span class=\"num\">02<\/span>\n    <h2>\u52a8\u624b\u8bd5\u8bd5\uff1a\u4e09\u539f\u8272\u600e\u4e48\u6df7\uff1f<\/h2>\n    <p>\u62d6\u52a8\u4e0b\u9762\u7684\u6ed1\u5757\uff0c\u8c03\u6574\u7ea2\u3001\u9ec4\u3001\u84dd\u4e09\u79cd&#8221;\u67d3\u6599&#8221;\u7684\u6bd4\u4f8b\uff0c\u770b\u770b\u80fd\u6df7\u51fa\u4ec0\u4e48\u989c\u8272\u3002<\/p>\n  <\/div>\n  <div class=\"wrap\">\n    <div class=\"mixer-section\">\n      <div class=\"mixer-layout\">\n        <div class=\"mixer-controls\">\n          <div class=\"slider-group\">\n            <label style=\"color:#e74c3c\">\ud83d\udd34 \u7ea2\u8272\u67d3\u6599 <span class=\"val\" id=\"rVal\">50<\/span><\/label>\n            <input type=\"range\" class=\"slider slider-r\" id=\"sliderR\" min=\"0\" max=\"100\" value=\"50\" data-mixer=\"r\">\n          <\/div>\n          <div class=\"slider-group\">\n            <label style=\"color:#c89942\">\ud83d\udfe1 \u9ec4\u8272\u67d3\u6599 <span class=\"val\" id=\"yVal\">0<\/span><\/label>\n            <input type=\"range\" class=\"slider slider-y\" id=\"sliderY\" min=\"0\" max=\"100\" value=\"0\" data-mixer=\"y\">\n          <\/div>\n          <div class=\"slider-group\">\n            <label style=\"color:#3498db\">\ud83d\udd35 \u84dd\u8272\u67d3\u6599 <span class=\"val\" id=\"bVal\">50<\/span><\/label>\n            <input type=\"range\" class=\"slider slider-b\" id=\"sliderB\" min=\"0\" max=\"100\" value=\"50\" data-mixer=\"b\">\n          <\/div>\n        <\/div>\n        <div class=\"mixer-result\">\n          <div class=\"mix-preview\" id=\"mixPreview\" style=\"background:#762d7a\"><\/div>\n          <div class=\"mix-hex\" id=\"mixHex\">#762D7A<\/div>\n          <div class=\"mix-name\" id=\"mixName\">\u7d2b\u8272<\/div>\n        <\/div>\n      <\/div>\n      <div class=\"mix-hint\" id=\"mixHint\">\n        \ud83d\udca1 \u5f53\u524d\uff1a\u7ea250 + \u84dd50 = \u7d2b\u8272\u3002\u8bd5\u8bd5\u8c03\u5230\u7ea2100+\u9ec4100\u770b\u770b\u4f1a\u53d8\u6210\u4ec0\u4e48\uff1f\n      <\/div>\n    <\/div>\n    <!-- \u9884\u8bbe\u6309\u94ae -->\n    <div style=\"margin-top:20px\">\n      <h4 style=\"text-align:center;font-size:.95rem;margin-bottom:14px\">\u26a1 \u4e00\u952e\u4f53\u9a8c\u7ecf\u5178\u914d\u65b9<\/h4>\n      <div style=\"display:flex;gap:10px;flex-wrap:wrap;justify-content:center\">\n        <button type=\"button\" data-preset=\"100,100,0\" style=\"background:#e67e22;color:#fff;border:none;padding:8px 18px;border-radius:99px;cursor:pointer;font-size:.85rem\">\n          \ud83d\udfe0 \u6a59\u8272 R+Y<\/button>\n        <button type=\"button\" data-preset=\"100,0,100\" style=\"background:#8e44ad;color:#fff;border:none;padding:8px 18px;border-radius:99px;cursor:pointer;font-size:.85rem\">\n          \ud83d\udfe3 \u7d2b\u8272 R+B<\/button>\n        <button type=\"button\" data-preset=\"0,100,100\" style=\"background:#27ae60;color:#fff;border:none;padding:8px 18px;border-radius:99px;cursor:pointer;font-size:.85rem\">\n          \ud83d\udfe2 \u7eff\u8272 Y+B<\/button>\n        <button type=\"button\" data-preset=\"100,100,100\" style=\"background:#555;color:#fff;border:none;padding:8px 18px;border-radius:99px;cursor:pointer;font-size:.85rem\">\n          \u26ab \u7070\u9ed1 \u4e09\u8272\u7b49\u91cf<\/button>\n        <button type=\"button\" data-preset=\"80,20,0\" style=\"background:#c0392b;color:#fff;border:none;padding:8px 18px;border-radius:99px;cursor:pointer;font-size:.85rem\">\n          \ud83c\udf45 \u7ea2\u6a59 R\u591aY\u5c11<\/button>\n        <button type=\"button\" data-preset=\"20,80,0\" style=\"background:#f39c12;color:#fff;border:none;padding:8px 18px;border-radius:99px;cursor:pointer;font-size:.85rem\">\n          \ud83c\udf3c \u9ec4\u6a59 Y\u591aR\u5c11<\/button>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n<!-- ==================== 03 \u67d3\u6599 \u2260 \u989c\u6599 ==================== -->\n<section id=\"dye\" class=\"anchor\">\n  <div class=\"sec-head\">\n    <span class=\"num\">03<\/span>\n    <h2>\u67d3\u6599 \u2260 \u989c\u6599<\/h2>\n    <p>\u5f88\u591a\u4eba\u5206\u4e0d\u6e05&#8221;\u67d3\u6599&#8221;\u548c&#8221;\u989c\u6599&#8221;\uff0c\u8fd9\u4e00\u6b65\u641e\u660e\u767d\u4e86\uff0c\u540e\u9762\u7684\u90fd\u597d\u7406\u89e3\u3002<\/p>\n  <\/div>\n  <div class=\"wrap\">\n    <div class=\"grid grid-2\" style=\"margin-bottom:20px\">\n      <div class=\"card\" style=\"border-top:4px solid var(--accent2)\">\n        <span class=\"icon\">\ud83e\uddea<\/span>\n        <h3>\u67d3\u6599 (Dye)<\/h3>\n        <p><strong>\u80fd\u6eb6\u89e3\u5728\u6c34\u91cc<\/strong>\u7684\u989c\u8272\u5206\u5b50\u3002\u6eb6\u89e3\u540e\u53d8\u6210&#8221;\u6709\u8272\u6c34&#8221;\uff0c\u5e03\u6ce1\u8fdb\u53bb\uff0c\u67d3\u6599\u5206\u5b50\u4f1a<strong>\u94bb\u8fdb\u7ea4\u7ef4\u5185\u90e8<\/strong>\u5e76\u56fa\u5b9a\u4f4f\u3002\u6d17\u4e0d\u6389\u3001\u4e0d\u6389\u8272\u3002<\/p>\n        <div class=\"tip\">\u2705 \u50cf\u6ce1\u8336\u2014\u2014\u8336\u53f6\u7684\u989c\u8272\u6eb6\u5230\u6c34\u91cc\uff0c\u767d\u5e03\u6d78\u8fdb\u53bb\u5c31\u67d3\u4e0a\u8272\u4e86\u3002<\/div>\n      <\/div>\n      <div class=\"card\" style=\"border-top:4px solid var(--gold)\">\n        <span class=\"icon\">\ud83d\udd8c\ufe0f<\/span>\n        <h3>\u989c\u6599 (Pigment)<\/h3>\n        <p><strong>\u4e0d\u6eb6\u4e8e\u6c34<\/strong>\u7684\u5f69\u8272\u7c89\u672b\u3002\u53ea\u80fd\u9760&#8221;\u80f6\u6c34&#8221;\uff08\u7c98\u5408\u5242\uff09\u7c98\u5728\u5e03\u7684\u8868\u9762\u3002\u6478\u8d77\u6765\u6709\u6d82\u5c42\u611f\uff0c\u5bb9\u6613\u6389\u3001\u5f00\u88c2\u3002<\/p>\n        <div class=\"tip\">\u2705 \u50cf\u753b\u753b\u2014\u2014\u989c\u6599\u662f\u6d82\u5728\u8868\u9762\u7684\uff0c\u6ca1\u6709\u6e17\u900f\u8fdb\u53bb\u3002<\/div>\n      <\/div>\n    <\/div>\n    <!-- \u67d3\u8272\u539f\u7406\u56db\u6b65 -->\n    <div class=\"card\">\n      <h3 style=\"text-align:center;margin-bottom:8px\">\ud83d\udd2c \u67d3\u8272\u539f\u7406\uff1a\u67d3\u6599\u600e\u4e48&#8221;\u94bb&#8221;\u8fdb\u5e03\u91cc\u7684\uff1f<\/h3>\n      <p style=\"text-align:center;color:var(--muted);font-size:.85rem;margin-bottom:8px\">\u7b80\u5316\u7248\u56db\u6b65\u56fe\u89e3<\/p>\n      <div class=\"principle-diagram\">\n        <div class=\"principle-stage\">\n          <div class=\"principle-visual\" style=\"background:#e8f4fd\">\ud83d\udca7<\/div>\n          <h4>1. \u6eb6\u89e3<\/h4>\n          <p>\u67d3\u6599\u52a0\u5165\u6c34\u4e2d\uff0c\u6405\u62cc\u6eb6\u89e3\u6210\u6709\u8272\u67d3\u6db2<\/p>\n        <\/div>\n        <div class=\"principle-arrow\">\u2192<\/div>\n        <div class=\"principle-stage\">\n          <div class=\"principle-visual\" style=\"background:#fef3e2\">\ud83e\uddf6<\/div>\n          <h4>2. \u5438\u9644<\/h4>\n          <p>\u5e03\u6d78\u5165\u67d3\u6db2\uff0c\u67d3\u6599\u5206\u5b50\u9644\u7740\u5230\u7ea4\u7ef4\u8868\u9762<\/p>\n        <\/div>\n        <div class=\"principle-arrow\">\u2192<\/div>\n        <div class=\"principle-stage\">\n          <div class=\"principle-visual\" style=\"background:#fde8e8\">\ud83d\udce5<\/div>\n          <h4>3. \u6e17\u900f<\/h4>\n          <p>\u67d3\u6599\u5206\u5b50\u6162\u6162\u6269\u6563\uff0c\u94bb\u8fdb\u7ea4\u7ef4\u5185\u90e8<\/p>\n        <\/div>\n        <div class=\"principle-arrow\">\u2192<\/div>\n        <div class=\"principle-stage\">\n          <div class=\"principle-visual\" style=\"background:#e8f8ef\">\ud83d\udd12<\/div>\n          <h4>4. \u56fa\u8272<\/h4>\n          <p>\u67d3\u6599\u4e0e\u7ea4\u7ef4\u7ed3\u5408\uff08\u5316\u5b66\u952e\/\u7269\u7406\u5438\u9644\uff09\uff0c\u6d17\u4e0d\u6389<\/p>\n        <\/div>\n      <\/div>\n      <div class=\"tip\" style=\"margin-top:16px\">\n        \ud83d\udca1 <strong>\u6253\u4e2a\u6bd4\u65b9<\/strong>\uff1a\u67d3\u8272\u5c31\u50cf\u814c\u54b8\u83dc\u2014\u2014\u76d0\u6c34\uff08\u67d3\u6db2\uff09\u6ce1\u7740\u83dc\uff08\u5e03\uff09\uff0c\u76d0\uff08\u67d3\u6599\u5206\u5b50\uff09\u6162\u6162\u6e17\u8fdb\u83dc\u91cc\u9762\uff0c\u6700\u540e\u814c\u900f\u4e86\uff0c\u6c34\u6d17\u4e5f\u6d17\u4e0d\u6389\u54b8\u5473\u3002\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n<!-- ==================== 04 \u51b7\u67d3\u5de5\u827a ==================== -->\n<section id=\"process\" class=\"anchor\" style=\"background:linear-gradient(180deg,#f3ede4,#f8f6f3)\">\n  <div class=\"sec-head\">\n    <span class=\"num\">04<\/span>\n    <h2>\u2744\ufe0f \u51b7\u67d3\uff1a\u4e0d\u52a0\u70ed\u4e5f\u80fd\u67d3\u8272\uff1f<\/h2>\n    <p>\u70ed\u67d3\u5728 60\u00b0C \u6052\u6e29\u4e0a\u8272\uff0c\u5c11\u6570\u5927\u5206\u5b50\u67d3\u6599\u6700\u9ad8\u7528\u5230 80\u00b0C\uff1b\u51b7\u67d3\u53ea\u8981 25-35\u00b0C\uff0c\u7701\u7535\u7701\u65f6\uff0c\u4f46\u539f\u7406\u4e0d\u540c\u3002<\/p>\n  <\/div>\n  <div class=\"wrap\">\n    <!-- \u5bf9\u6bd4 -->\n    <div class=\"grid grid-2\" style=\"margin-bottom:24px\">\n      <div class=\"card\" style=\"border-left:4px solid var(--blue)\">\n        <h3>\ud83d\udd25 \u4f20\u7edf\u70ed\u67d3<\/h3>\n        <p style=\"margin-bottom:10px\">\n          <strong>\u6e29\u5ea6\uff1a<\/strong>60\u00b0C \u6052\u6e29\u4e0a\u8272<br>\n          <span style=\"font-size:.82rem;color:var(--muted)\">\uff08\u5c11\u6570\u5927\u5206\u5b50\u67d3\u6599\u6700\u9ad8 80\u00b0C\uff09<\/span><br>\n          <strong>\u65f6\u95f4\uff1a<\/strong>30-60 \u5206\u949f<br>\n          <strong>\u80fd\u8017\uff1a<\/strong>\u9700\u6301\u7eed\u52a0\u70ed\u4fdd\u6e29<br>\n          <strong>\u9002\u5408\uff1a<\/strong>\u68c9\u5e03\u6d3b\u6027\u67d3\u6599\u5e38\u89c4\u67d3\u8272\n        <\/p>\n        <div class=\"tip\">\u26a0\ufe0f \u9700\u52a0\u70ed\u8bbe\u5907\uff0c\u5e03\u6599\u6709\u4e00\u5b9a\u70ed\u635f\u4f24\u98ce\u9669<\/div>\n      <\/div>\n      <div class=\"card\" style=\"border-left:4px solid var(--accent2)\">\n        <h3>\u2744\ufe0f \u51b7\u67d3\u5de5\u827a<\/h3>\n        <p style=\"margin-bottom:10px\">\n          <strong>\u6e29\u5ea6\uff1a<\/strong>25-35\u00b0C\uff08\u5ba4\u6e29\u9644\u8fd1\uff09<br>\n          <strong>\u65f6\u95f4\uff1a<\/strong>\u5806\u7f6e 12-24 \u5c0f\u65f6<br>\n          <strong>\u80fd\u8017\uff1a<\/strong>\u4f4e\uff08\u57fa\u672c\u4e0d\u52a0\u70ed\uff09<br>\n          <strong>\u9002\u5408\uff1a<\/strong>\u9488\u7ec7\u5e03\u3001\u654f\u611f\u9762\u6599\n        <\/p>\n        <div class=\"tip\">\u2705 \u8282\u80fd\u3001\u5e03\u6599\u635f\u4f24\u5c0f\u3001\u624b\u611f\u597d<\/div>\n      <\/div>\n    <\/div>\n    <!-- \u6e29\u5ea6\u8ba1 -->\n    <div class=\"card\" style=\"margin-bottom:24px\">\n      <h3 style=\"text-align:center;margin-bottom:16px\">\ud83c\udf21\ufe0f \u6e29\u5ea6\u5bf9\u6bd4\uff1a\u76f4\u89c2\u611f\u53d7\u5dee\u8ddd<\/h3>\n      <div class=\"temp-gauge\">\n        <div style=\"text-align:center\">\n          <div class=\"temp-bar\">\n            <div class=\"temp-marker\" data-label=\"80\u00b0C \u5927\u5206\u5b50\u67d3\u6599\" style=\"top:20%\"><\/div>\n            <div class=\"temp-marker\" data-label=\"60\u00b0C \u70ed\u67d3\u5e38\u89c4 \u2190\" style=\"top:40%;background:var(--accent);width:76px;left:-14px\"><\/div>\n          <\/div>\n          <div style=\"margin-top:8px;font-size:.82rem;font-weight:600\">\ud83d\udd25 \u70ed\u67d3<\/div>\n        <\/div>\n        <div style=\"text-align:center\">\n          <div class=\"temp-bar\">\n            <div class=\"temp-marker\" data-label=\"30\u00b0C \u5ba4\u6e29 \u2190\" style=\"top:70%;background:var(--accent2);width:76px;left:-14px\"><\/div>\n          <\/div>\n          <div style=\"margin-top:8px;font-size:.82rem;font-weight:600\">\u2744\ufe0f \u51b7\u67d3<\/div>\n        <\/div>\n        <div class=\"temp-labels\">\n          <div>100\u00b0C \u6cb8\u6c34<\/div>\n          <div>80\u00b0C \u5927\u5206\u5b50\u67d3\u6599<\/div>\n          <div>60\u00b0C \u70ed\u67d3\u5e38\u89c4<\/div>\n          <div>30\u00b0C \u51b7\u67d3\u6e29\u5ea6<\/div>\n          <div>0\u00b0C \u51b0\u6c34<\/div>\n        <\/div>\n      <\/div>\n      <p style=\"text-align:center;color:var(--muted);font-size:.82rem;margin-top:8px\">\n        \u70ed\u67d3\u9700\u6052\u6e2960\u00b0C\uff08\u5c11\u6570\u67d3\u659980\u00b0C\uff09\uff1b\u51b7\u67d3\u65e0\u9700\u52a0\u70ed\uff0c\u5229\u7528\u76d0\/\u78b1\u50ac\u5316\u5728\u5ba4\u6e29\u4e0b\u5b8c\u6210\u56fa\u8272\u3002\n      <\/p>\n    <\/div>\n    <!-- \u5de5\u827a\u6d41\u7a0b\u516d\u6b65 -->\n    <div class=\"card\">\n      <h3 style=\"text-align:center;margin-bottom:20px\">\ud83d\udccb \u51b7\u67d3\u5de5\u827a\u6d41\u7a0b\uff08\u516d\u6b65\u8d70\uff09<\/h3>\n      <div class=\"process-flow\">\n        <div class=\"process-step\">\n          <div class=\"step-circle\">\ud83e\uddea<\/div>\n          <div class=\"step-arrow\">\u2192<\/div>\n          <div class=\"step-title\">1. \u6253\u5e95<\/div>\n          <div class=\"step-desc\">\u5e03\u6d78\u5165\u78b1\u6db2\uff0c\u8ba9\u7ea4\u7ef4&#8221;\u51c6\u5907\u597d&#8221;\u63a5\u4f4f\u67d3\u6599<\/div>\n        <\/div>\n        <div class=\"process-step\">\n          <div class=\"step-circle\">\ud83c\udfa8<\/div>\n          <div class=\"step-arrow\">\u2192<\/div>\n          <div class=\"step-title\">2. \u67d3\u8272<\/div>\n          <div class=\"step-desc\">\u5e03\u6d78\u5165\u67d3\u6db2\uff0c\u67d3\u6599\u5438\u9644\u5230\u7ea4\u7ef4\u4e0a<\/div>\n        <\/div>\n        <div class=\"process-step\">\n          <div class=\"step-circle\">\ud83d\udce6<\/div>\n          <div class=\"step-arrow\">\u2192<\/div>\n          <div class=\"step-title\">3. \u5806\u7f6e<\/div>\n          <div class=\"step-desc\">\u5377\u8d77\u6765\u653e12-24\u5c0f\u65f6\uff0c\u8ba9\u67d3\u6599\u6162\u6162\u6e17\u900f\u56fa\u8272<\/div>\n        <\/div>\n        <div class=\"process-step\">\n          <div class=\"step-circle\">\ud83d\udebf<\/div>\n          <div class=\"step-arrow\">\u2192<\/div>\n          <div class=\"step-title\">4. \u6c34\u6d17<\/div>\n          <div class=\"step-desc\">\u51b2\u6389\u672a\u56fa\u5b9a\u7684\u6d6e\u8272\uff0c\u76f4\u5230\u6c34\u53d8\u6e05<\/div>\n        <\/div>\n        <div class=\"process-step\">\n          <div class=\"step-circle\">\ud83e\uddf4<\/div>\n          <div class=\"step-arrow\">\u2192<\/div>\n          <div class=\"step-title\">5. \u7682\u6d17<\/div>\n          <div class=\"step-desc\">\u52a0\u7682\u6db2\u9ad8\u6e29\u6d17\uff0c\u53bb\u6389\u6b8b\u7559\u67d3\u6599<\/div>\n        <\/div>\n        <div class=\"process-step\">\n          <div class=\"step-circle\">\u2600\ufe0f<\/div>\n          <div class=\"step-title\">6. \u70d8\u5e72<\/div>\n          <div class=\"step-desc\">\u4f4e\u6e29\u70d8\u5e72\uff0c\u5b8c\u6210\uff01<\/div>\n        <\/div>\n      <\/div>\n      <div class=\"tip\" style=\"margin-top:20px\">\n        \ud83d\udca1 <strong>\u5173\u952e\u5728&#8221;\u5806\u7f6e&#8221;<\/strong>\u2014\u2014\u51b7\u67d3\u4e0d\u9760\u6e29\u5ea6\u50ac\u53cd\u5e94\uff0c\u9760\u7684\u662f\u957f\u65f6\u95f4\u5806\u7f6e\u8ba9\u67d3\u6599\u6162\u6162\u6e17\u8fdb\u53bb\u3002\u6240\u4ee5\u51b7\u67d3\u867d\u7136\u6e29\u5ea6\u4f4e\uff0c\u4f46\u8017\u65f6\u957f\uff0c\u901a\u5e38\u5b89\u6392\u5728\u751f\u4ea7\u95f4\u9699\u6216\u5206\u6279\u6b21\u8fdb\u884c\u3002\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n<!-- ==================== 05 \u62fc\u8272\u5b9e\u6218 ==================== -->\n<section id=\"practice\" class=\"anchor\">\n  <div class=\"sec-head\">\n    <span class=\"num\">05<\/span>\n    <h2>\ud83c\udfaf \u62fc\u8272\u5b9e\u6218\uff1a\u600e\u4e48\u8c03\u51fa\u5ba2\u6237\u8981\u7684\u989c\u8272\uff1f<\/h2>\n    <p>\u5ba2\u6237\u62ff\u6765\u4e00\u5757\u8272\u6837\u8bf4&#8221;\u5c31\u8981\u8fd9\u4e2a\u8272&#8221;\u2014\u2014\u5316\u9a8c\u5ba4\u600e\u4e48\u7528\u67d3\u6599\u62fc\u51fa\u6765\uff1f<\/p>\n  <\/div>\n  <div class=\"wrap\">\n    <div class=\"grid grid-3\" style=\"margin-bottom:20px\">\n      <div class=\"card\">\n        <span class=\"icon\">\ud83d\udc41\ufe0f<\/span>\n        <h3>\u7b2c\u4e00\u6b65\uff1a\u770b\u8272<\/h3>\n        <p>\u62ff\u8272\u6837\u5728\u81ea\u7136\u5149\u4e0b\u89c2\u5bdf\uff1a\u4e3b\u8272\u76f8\u662f\u4ec0\u4e48\uff1f\u504f\u7ea2\u8fd8\u662f\u504f\u84dd\uff1f\u660e\u6697\u5982\u4f55\uff1f\u9971\u548c\u5ea6\u9ad8\u4e0d\u9ad8\uff1f<\/p>\n        <div class=\"tip\">\u5148\u5224\u65ad&#8221;\u5927\u65b9\u5411&#8221;\uff0c\u522b\u6025\u7740\u52a8\u624b\u3002<\/div>\n      <\/div>\n      <div class=\"card\">\n        <span class=\"icon\">\ud83e\uddee<\/span>\n        <h3>\u7b2c\u4e8c\u6b65\uff1a\u9009\u67d3\u6599<\/h3>\n        <p>\u6839\u636e\u8272\u76f8\u9009 2-3 \u79cd\u67d3\u6599\u7ec4\u5408\u3002\u4e00\u822c\u7528\u76f8\u90bb\u8272\u62fc\uff0c\u907f\u514d\u7528\u4f59\u8272\uff08\u4f1a\u53d8\u7070\uff09\u3002<\/p>\n        <div class=\"tip\">\u5982\u76ee\u6807\u6a59\u8272 \u2192 \u9009\u7ea2+\u9ec4\uff0c\u4e0d\u7528\u7ea2+\u7eff\u3002<\/div>\n      <\/div>\n      <div class=\"card\">\n        <span class=\"icon\">\u2696\ufe0f<\/span>\n        <h3>\u7b2c\u4e09\u6b65\uff1a\u6253\u6837<\/h3>\n        <p>\u6309\u4f30\u7b97\u6bd4\u4f8b\u914d\u4e00\u5c0f\u676f\u67d3\u6db2\uff0c\u67d3\u4e00\u5c0f\u5757\u5e03\uff0c\u70d8\u5e72\u540e\u548c\u8272\u6837\u5bf9\u6bd4\u3002<\/p>\n        <div class=\"tip\">\u4e0d\u53ef\u80fd\u4e00\u6b21\u5c31\u4e2d\u2014\u2014\u8981\u53cd\u590d\u5fae\u8c03\u3002<\/div>\n      <\/div>\n    <\/div>\n    <!-- \u62fc\u8272\u914d\u65b9 -->\n    <div class=\"card\">\n      <h3 style=\"margin-bottom:16px\">\ud83d\udcd6 \u5e38\u89c1\u62fc\u8272\u914d\u65b9\u53c2\u8003<\/h3>\n      <div class=\"dye-grid\">\n        <div class=\"dye-card\">\n          <div class=\"dye-swatch\" style=\"background:#e63946\"><span class=\"dye-name\">\u756a\u8304\u7ea2<\/span><\/div>\n          <div class=\"dye-info\"><div class=\"code\">\u7ea2 85% + \u9ec4 15%<\/div><div class=\"use\">\u504f\u9ec4\u5149\u7684\u7ea2<\/div><\/div>\n        <\/div>\n        <div class=\"dye-card\">\n          <div class=\"dye-swatch\" style=\"background:#f4a261\"><span class=\"dye-name\">\u6a58\u8272<\/span><\/div>\n          <div class=\"dye-info\"><div class=\"code\">\u7ea2 50% + \u9ec4 50%<\/div><div class=\"use\">\u6807\u51c6\u6a59\u8272<\/div><\/div>\n        <\/div>\n        <div class=\"dye-card\">\n          <div class=\"dye-swatch\" style=\"background:#4a5d23\"><span class=\"dye-name\" style=\"color:#eee\">\u519b\u7eff<\/span><\/div>\n          <div class=\"dye-info\"><div class=\"code\">\u9ec4 60% + \u84dd 30% + \u7ea2 10%<\/div><div class=\"use\">\u6697\u9ec4\u7eff\u8272<\/div><\/div>\n        <\/div>\n        <div class=\"dye-card\">\n          <div class=\"dye-swatch\" style=\"background:#2a9d8f\"><span class=\"dye-name\">\u6e56\u84dd<\/span><\/div>\n          <div class=\"dye-info\"><div class=\"code\">\u84dd 70% + \u9ec4 30%<\/div><div class=\"use\">\u504f\u7eff\u84dd\u8272<\/div><\/div>\n        <\/div>\n        <div class=\"dye-card\">\n          <div class=\"dye-swatch\" style=\"background:#c9184a\"><span class=\"dye-name\">\u73ab\u7ea2<\/span><\/div>\n          <div class=\"dye-info\"><div class=\"code\">\u7ea2 80% + \u84dd 20%<\/div><div class=\"use\">\u504f\u84dd\u7d2b\u7684\u7ea2<\/div><\/div>\n        <\/div>\n        <div class=\"dye-card\">\n          <div class=\"dye-swatch\" style=\"background:#a4ac86\"><span class=\"dye-name\" style=\"color:#333\">\u5361\u5176<\/span><\/div>\n          <div class=\"dye-info\"><div class=\"code\">\u9ec4 40% + \u7ea2 30% + \u84dd 30%<\/div><div class=\"use\">\u4f4e\u9971\u548c\u9ec4\u68d5<\/div><\/div>\n        <\/div>\n        <div class=\"dye-card\">\n          <div class=\"dye-swatch\" style=\"background:#722f37\"><span class=\"dye-name\">\u9152\u7ea2<\/span><\/div>\n          <div class=\"dye-info\"><div class=\"code\">\u7ea2 70% + \u84dd 25% + \u9ec4 5%<\/div><div class=\"use\">\u6df1\u6697\u7ea2\u8272<\/div><\/div>\n        <\/div>\n        <div class=\"dye-card\">\n          <div class=\"dye-swatch\" style=\"background:#1b3a5c\"><span class=\"dye-name\">\u85cf\u9752<\/span><\/div>\n          <div class=\"dye-info\"><div class=\"code\">\u84dd 80% + \u7ea2 18% + \u9ec4 2%<\/div><div class=\"use\">\u6781\u6df1\u84dd\u8272<\/div><\/div>\n        <\/div>\n      <\/div>\n      <div class=\"tip\" style=\"margin-top:16px\">\n        \u26a0\ufe0f <strong>\u6ce8\u610f<\/strong>\uff1a\u4ee5\u4e0a\u6bd4\u4f8b\u4ec5\u4f9b\u53c2\u8003\uff0c\u5b9e\u9645\u8981\u6839\u636e\u67d3\u6599\u529b\u4efd\uff08\u6d53\u5ea6\uff09\u3001\u5e03\u79cd\u3001\u6c34\u8d28\u7b49\u8c03\u6574\u3002\u6253\u6837\u6c38\u8fdc\u4ee5&#8221;\u5c0f\u6837\u6bd4\u5bf9&#8221;\u4e3a\u51c6\u3002\n      <\/div>\n    <\/div>\n    <!-- \u4e09\u5927\u5fcc -->\n    <div class=\"card\" style=\"margin-top:16px;border-left:4px solid #e74c3c\">\n      <h3 style=\"margin-bottom:10px\">\ud83d\udeab \u62fc\u8272\u4e09\u5927\u5fcc<\/h3>\n      <div style=\"display:flex;flex-direction:column;gap:10px\">\n        <div style=\"display:flex;gap:10px;align-items:flex-start\">\n          <span style=\"font-size:1.2rem\">\u2460<\/span>\n          <div><strong>\u5fcc\u7528\u4f59\u8272\u62fc\u8272<\/strong>\u2014\u2014\u7ea2+\u7eff\u3001\u9ec4+\u7d2b\u3001\u84dd+\u6a59\u76f4\u63a5\u62fc\uff0c\u989c\u8272\u4f1a\u53d1\u7070\u53d1\u6697\uff0c\u9971\u548c\u5ea6\u66b4\u8dcc\u3002<\/div>\n        <\/div>\n        <div style=\"display:flex;gap:10px;align-items:flex-start\">\n          <span style=\"font-size:1.2rem\">\u2461<\/span>\n          <div><strong>\u5fcc\u67d3\u6599\u592a\u591a<\/strong>\u2014\u2014\u8d85\u8fc75\u79cd\u67d3\u6599\u6df7\u5728\u4e00\u8d77\uff0c\u989c\u8272\u6d51\u6d4a\u96be\u63a7\uff0c\u4e14\u6d6a\u8d39\u6210\u672c\u3002\u4e00\u822c2-3\u79cd\u8db3\u77e3\u3002<\/div>\n        <\/div>\n        <div style=\"display:flex;gap:10px;align-items:flex-start\">\n          <span style=\"font-size:1.2rem\">\u2462<\/span>\n          <div><strong>\u5fcc\u4e0d\u770b\u67d3\u6599\u529b\u4efd<\/strong>\u2014\u2014\u4e0d\u540c\u6279\u6b21\u67d3\u6599\u6d53\u5ea6\u4e0d\u540c\uff0c\u7167\u642c\u914d\u65b9\u4f1a\u504f\u8272\u3002\u6bcf\u6b21\u6253\u6837\u524d\u5148\u786e\u8ba4\u529b\u4efd\u3002<\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n<!-- ==================== 06 \u67d3\u6599\u8272\u8c31 ==================== -->\n<section style=\"background:linear-gradient(180deg,#f8f6f3,#f3ede4)\">\n  <div class=\"sec-head\">\n    <span class=\"num\">06<\/span>\n    <h2>\ud83c\udfa8 \u51b7\u67d3\u5e38\u7528\u67d3\u6599\u8272\u8c31<\/h2>\n    <p>\u51b7\u67d3\u5e38\u7528\u6d3b\u6027\u67d3\u6599\uff0c\u4ee5\u4e0b\u4e3a\u5e38\u89c1\u57fa\u8272\u53ca\u5176\u5178\u578b\u7528\u9014\u3002<\/p>\n  <\/div>\n  <div class=\"wrap\">\n    <div class=\"dye-grid\">\n      <div class=\"dye-card\">\n        <div class=\"dye-swatch\" style=\"background:#e74c3c\"><span class=\"dye-name\">\u6d3b\u6027\u7ea2<\/span><\/div>\n        <div class=\"dye-info\"><div class=\"code\">Red 3BS<\/div><div class=\"use\">\u4e3b\u7ea2\u8272\uff0c\u62fc\u8272\u57fa\u8272<\/div><\/div>\n      <\/div>\n      <div class=\"dye-card\">\n        <div class=\"dye-swatch\" style=\"background:#f1c40f\"><span class=\"dye-name\" style=\"color:#333\">\u6d3b\u6027\u9ec4<\/span><\/div>\n        <div class=\"dye-info\"><div class=\"code\">Yellow 3RS<\/div>\n<div class=\"use\">\u4e3b\u9ec4\u8272\uff0c\u62fc\u8272\u57fa\u8272<\/div><\/div>\n      <\/div>\n      <div class=\"dye-card\">\n        <div class=\"dye-swatch\" style=\"background:#2980b9\"><span class=\"dye-name\">\u6d3b\u6027\u84dd<\/span><\/div>\n        <div class=\"dye-info\"><div class=\"code\">Blue 2BN<\/div><div class=\"use\">\u4e3b\u84dd\u8272\uff0c\u62fc\u8272\u57fa\u8272<\/div><\/div>\n      <\/div>\n      <div class=\"dye-card\">\n        <div class=\"dye-swatch\" style=\"background:#e67e22\"><span class=\"dye-name\">\u6d3b\u6027\u6a59<\/span><\/div>\n        <div class=\"dye-info\"><div class=\"code\">Orange 2R<\/div><div class=\"use\">\u7ea2+\u9ec4\u62fc\u8272<\/div><\/div>\n      <\/div>\n      <div class=\"dye-card\">\n        <div class=\"dye-swatch\" style=\"background:#8e44ad\"><span class=\"dye-name\">\u6d3b\u6027\u7d2b<\/span><\/div>\n        <div class=\"dye-info\"><div class=\"code\">Violet 5R<\/div><div class=\"use\">\u7ea2+\u84dd\u62fc\u8272<\/div><\/div>\n      <\/div>\n      <div class=\"dye-card\">\n        <div class=\"dye-swatch\" style=\"background:#27ae60\"><span class=\"dye-name\">\u6d3b\u6027\u7eff<\/span><\/div>\n        <div class=\"dye-info\"><div class=\"code\">Green 6B<\/div><div class=\"use\">\u9ec4+\u84dd\u62fc\u8272<\/div><\/div>\n      <\/div>\n      <div class=\"dye-card\">\n        <div class=\"dye-swatch\" style=\"background:#1a1a2e\"><span class=\"dye-name\">\u6d3b\u6027\u9ed1<\/span><\/div>\n        <div class=\"dye-info\"><div class=\"code\">Black 5B<\/div><div class=\"use\">\u4e09\u8272\u7b49\u91cf\u6216\u4e13\u7528\u9ed1<\/div><\/div>\n      <\/div>\n      <div class=\"dye-card\">\n        <div class=\"dye-swatch\" style=\"background:#1b3a5c\"><span class=\"dye-name\">\u6d3b\u6027\u85cf\u9752<\/span><\/div>\n        <div class=\"dye-info\"><div class=\"code\">Navy B<\/div><div class=\"use\">\u6df1\u84dd\u8272\uff0c\u5de5\u4f5c\u670d\u5e38\u7528<\/div><\/div>\n      <\/div>\n      <div class=\"dye-card\">\n        <div class=\"dye-swatch\" style=\"background:#1abc9c\"><span class=\"dye-name\">\u6d3b\u6027\u7fe0\u84dd<\/span><\/div>\n        <div class=\"dye-info\"><div class=\"code\">Turquoise B<\/div><div class=\"use\">\u9c9c\u8273\u9752\u7eff\u8272<\/div><\/div>\n      <\/div>\n      <div class=\"dye-card\">\n        <div class=\"dye-swatch\" style=\"background:#c0392b\"><span class=\"dye-name\">\u6d3b\u6027\u5927\u7ea2<\/span><\/div>\n        <div class=\"dye-info\"><div class=\"code\">Scarlet 3R<\/div><div class=\"use\">\u504f\u9ec4\u5149\u7684\u4eae\u7ea2<\/div><\/div>\n      <\/div>\n      <div class=\"dye-card\">\n        <div class=\"dye-swatch\" style=\"background:#fff176\"><span class=\"dye-name\" style=\"color:#555\">\u6d3b\u6027\u5ae9\u9ec4<\/span><\/div>\n        <div class=\"dye-info\"><div class=\"code\">Yellow 4GL<\/div><div class=\"use\">\u9ad8\u660e\u5ea6\u6d45\u9ec4<\/div><\/div>\n      <\/div>\n      <div class=\"dye-card\">\n        <div class=\"dye-swatch\" style=\"background:#7f8c8d\"><span class=\"dye-name\">\u6d3b\u6027\u7070<\/span><\/div>\n        <div class=\"dye-info\"><div class=\"code\">Grey B<\/div><div class=\"use\">\u4f4e\u9971\u548c\u5ea6\u4fee\u8272\u7528<\/div><\/div>\n      <\/div>\n    <\/div>\n    <div class=\"tip\" style=\"margin-top:16px;background:var(--card);border-left-color:var(--blue)\">\n      \ud83d\udca1 \u6d3b\u6027\u67d3\u6599\u547d\u540d\u89c4\u5219\uff1a\u524d\u7f00\uff08\u54c1\u724c\/\u7cfb\u5217\uff09+ \u8272\u76f8 + \u5c3e\u7f00\uff08\u8272\u5149\u504f\u5411\uff09\u3002\u4f8b\u5982&#8221;\u6d3b\u6027\u7ea2 3BS&#8221;\u4e2d\uff0c3BS \u8868\u793a\u504f\u84dd\u5149\u7684\u7ea2\u8272\u3002\n    <\/div>\n  <\/div>\n<\/section>\n<!-- ==================== 07 \u672f\u8bed\u8868 ==================== -->\n<section class=\"anchor\">\n  <div class=\"sec-head\">\n    <span class=\"num\">07<\/span>\n    <h2>\ud83d\udcda \u672f\u8bed\u901f\u67e5\u8868<\/h2>\n    <p>\u5de5\u5382\u91cc\u5e38\u8bf4\u7684&#8221;\u9ed1\u8bdd&#8221;\uff0c\u5728\u8fd9\u91cc\u7ffb\u8bd1\u6210\u4eba\u8bdd\u3002<\/p>\n  <\/div>\n  <div class=\"wrap\">\n    <div class=\"glossary\">\n      <div class=\"gloss-item\"><div class=\"gloss-term\">\u8272\u5149<\/div><div class=\"gloss-def\">\u989c\u8272\u7684\u7ec6\u5fae\u504f\u5411\u3002\u5982&#8221;\u7ea2\u5e26\u84dd\u5149&#8221;= \u504f\u7d2b\u7684\u7ea2\u3002\u8c03\u8272\u6838\u5fc3\u5c31\u662f\u8c03\u8272\u5149\u3002<\/div><\/div>\n      <div class=\"gloss-item\"><div class=\"gloss-term\">\u529b\u4efd<\/div><div class=\"gloss-def\">\u67d3\u6599\u7684&#8221;\u6d53\u5ea6\u5f3a\u5ea6&#8221;\u3002100%\u529b\u4efd\u4e3a\u6807\u51c6\uff0c\u529b\u4efd\u8d8a\u9ad8\u7528\u91cf\u8d8a\u5c11\u3002\u4e0d\u540c\u6279\u6b21\u8981\u6d4b\u529b\u4efd\u3002<\/div><\/div>\n      <div class=\"gloss-item\"><div class=\"gloss-term\">\u6253\u6837<\/div><div class=\"gloss-def\">\u6b63\u5f0f\u751f\u4ea7\u524d\u5148\u67d3\u4e00\u5c0f\u5757\u5e03\u8bd5\u8272\uff0c\u786e\u8ba4\u914d\u65b9\u6ca1\u95ee\u9898\u518d\u653e\u5927\u751f\u4ea7\u3002<\/div><\/div>\n      <div class=\"gloss-item\"><div class=\"gloss-term\">\u56fa\u8272<\/div><div class=\"gloss-def\">\u8ba9\u67d3\u6599\u7262\u7262&#8221;\u9501&#8221;\u5728\u7ea4\u7ef4\u4e0a\uff0c\u4e0d\u4f1a\u6c34\u6d17\u892a\u8272\u3002\u51b7\u67d3\u9760\u5806\u7f6e\u65f6\u95f4\u56fa\u8272\u3002<\/div><\/div>\n      <div class=\"gloss-item\"><div class=\"gloss-term\">\u6d6e\u8272<\/div><div class=\"gloss-def\">\u67d3\u5b8c\u540e\u6ca1\u56fa\u5b9a\u4f4f\u3001\u6d6e\u5728\u5e03\u9762\u7684\u67d3\u6599\u3002\u8981\u6c34\u6d17\/\u7682\u6d17\u53bb\u6389\uff0c\u5426\u5219\u4f1a\u6389\u8272\u3002<\/div><\/div>\n      <div class=\"gloss-item\"><div class=\"gloss-term\">\u6d74\u6bd4<\/div><div class=\"gloss-def\">\u5e03\u7684\u91cd\u91cf\u548c\u67d3\u6db2\u4f53\u79ef\u4e4b\u6bd4\u3002\u5982\u6d74\u6bd41:10 = 1kg\u5e03\u914d10L\u67d3\u6db2\u3002<\/div><\/div>\n      <div class=\"gloss-item\"><div class=\"gloss-term\">\u8f67\u4f59\u7387<\/div><div class=\"gloss-def\">\u5e03\u6d78\u67d3\u6db2\u540e\u62e7\u51fa\u6765\u7684\u5e26\u6db2\u91cf\u767e\u5206\u6bd4\u3002\u51b7\u67d3\u901a\u5e38\u63a7\u5236\u572860-100%\u3002<\/div><\/div>\n      <div class=\"gloss-item\"><div class=\"gloss-term\">\u5bf9\u8272<\/div><div class=\"gloss-def\">\u628a\u67d3\u597d\u7684\u5e03\u548c\u5ba2\u6237\u8272\u6837\u653e\u5728\u4e00\u8d77\u6bd4\uff0c\u770b\u989c\u8272\u5bf9\u4e0d\u5bf9\u3002\u8981\u5728\u6807\u51c6\u5149\u6e90\u4e0b\u770b\u3002<\/div><\/div>\n      <div class=\"gloss-item\"><div class=\"gloss-term\">\u4fee\u8272<\/div><div class=\"gloss-def\">\u67d3\u51fa\u6765\u504f\u8272\u4e86\uff0c\u52a0\u5c11\u91cf\u67d3\u6599\u5fae\u8c03\u3002\u7528\u4f59\u8272\u539f\u7406&#8221;\u5403\u6389&#8221;\u591a\u4f59\u8272\u5149\u3002<\/div><\/div>\n      <div class=\"gloss-item\"><div class=\"gloss-term\">\u6e17\u900f<\/div><div class=\"gloss-def\">\u67d3\u6599\u4ece\u5e03\u9762\u6269\u6563\u5230\u5e03\u5185\u90e8\u3002\u6e17\u900f\u4e0d\u597d = \u5e03\u9762\u6709\u8272\u3001\u91cc\u9762\u662f\u767d\u7684\u3002<\/div><\/div>\n    <\/div>\n  <\/div>\n<\/section>\n<!-- ==================== 08 FAQ ==================== -->\n<section id=\"faq\" class=\"anchor\" style=\"background:linear-gradient(180deg,#f3ede4,#f8f6f3)\">\n  <div class=\"sec-head\">\n    <span class=\"num\">08<\/span>\n    <h2>\u2753 \u5e38\u89c1\u95ee\u9898<\/h2>\n    <p>\u5916\u884c\u6700\u5e38\u95ee\u7684\u90a3\u4e9b\u95ee\u9898\u3002<\/p>\n  <\/div>\n  <div class=\"wrap\" style=\"max-width:760px\">\n    <div class=\"faq-item\" data-faq-toggle=\"\">\n      <div class=\"faq-q\">\u4e3a\u4ec0\u4e48\u6211\u5bb6\u7684\u7ea2\u8863\u670d\u6d17\u4e86\u51e0\u6b21\u5c31\u53d8\u7c89\u4e86\uff1f <span class=\"arrow\">\u25be<\/span><\/div>\n      <div class=\"faq-a\">\u53ef\u80fd\u662f\u56fa\u8272\u4e0d\u5f7b\u5e95\u2014\u2014\u67d3\u6599\u6ca1\u5b8c\u5168\u56fa\u5b9a\u5728\u7ea4\u7ef4\u4e0a\uff0c\u6d6e\u8272\u6162\u6162\u88ab\u6d17\u6389\u4e86\u3002\u4e5f\u53ef\u80fd\u662f\u67d3\u6599\u672c\u8eab\u8010\u6d17\u6027\u5dee\u3002\u51b7\u67d3\u5982\u679c\u5806\u7f6e\u65f6\u95f4\u4e0d\u591f\uff08\u5c11\u4e8e12\u5c0f\u65f6\uff09\uff0c\u56fa\u8272\u7387\u4f1a\u660e\u663e\u4e0b\u964d\u3002\u6b63\u89c4\u6d41\u7a0b\u4f1a\u505a\u7682\u6d17\u53bb\u9664\u6d6e\u8272\uff0c\u4e4b\u540e\u5c31\u4e0d\u5bb9\u6613\u892a\u4e86\u3002<\/div>\n    <\/div>\n    <div class=\"faq-item\" data-faq-toggle=\"\">\n      <div class=\"faq-q\">\u51b7\u67d3\u548c\u70ed\u67d3\u505a\u51fa\u6765\u7684\u5e03\uff0c\u8d28\u91cf\u6709\u533a\u522b\u5417\uff1f <span class=\"arrow\">\u25be<\/span><\/div>\n      <div class=\"faq-a\">\u5404\u6709\u5229\u5f0a\u3002\u70ed\u67d3\uff0860\u00b0C\u6052\u6e29\uff09\u56fa\u8272\u7262\u5ea6\u9ad8\u3001\u989c\u8272\u9971\u6ee1\uff0c\u4f46\u9700\u52a0\u70ed\u8bbe\u5907\uff0c\u5e03\u6599\u6709\u4e00\u5b9a\u70ed\u635f\u4f24\u98ce\u9669\u3002\u51b7\u67d3\u65e0\u9700\u52a0\u70ed\uff0c\u8282\u80fd\u4e14\u5e03\u6599\u624b\u611f\u67d4\u8f6f\u3001\u4e0d\u6613\u7f29\u6c34\u53d8\u5f62\uff0c\u4f46\u56fa\u8272\u65f6\u95f4\u957f\u8fbe12-24\u5c0f\u65f6\uff0c\u56fa\u8272\u7387\u76f8\u5bf9\u7565\u4f4e\u3002\u9009\u62e9\u54ea\u79cd\u53d6\u51b3\u4e8e\u9762\u6599\u7c7b\u578b\u548c\u5ba2\u6237\u9700\u6c42\u3002\u9488\u7ec7\u5e03\uff08T\u6064\u9762\u6599\uff09\u5e38\u7528\u51b7\u67d3\u3002<\/div>\n    <\/div>\n    <div class=\"faq-item\" data-faq-toggle=\"\">\n      <div class=\"faq-q\">\u4e3a\u4ec0\u4e48\u8c03\u51fa\u6765\u7684\u989c\u8272\u548c\u8272\u6837\u603b\u6709\u5dee\u8ddd\uff1f <span class=\"arrow\">\u25be<\/span><\/div>\n      <div class=\"faq-a\">\u539f\u56e0\u5f88\u591a\uff1a\u2460\u67d3\u6599\u6279\u6b21\u529b\u4efd\u4e0d\u540c\uff1b\u2461\u6c34\u8d28\uff08\u786c\u5ea6\u3001pH\uff09\u5f71\u54cd\u53d1\u8272\uff1b\u2462\u70d8\u5e72\u6e29\u5ea6\u4e0d\u540c\u5bfc\u81f4\u8272\u53d8\uff1b\u2463\u5bf9\u8272\u5149\u6e90\u4e0d\u540c\uff08\u65e5\u5149\u706fvs\u81ea\u7136\u5149\uff09\u770b\u5230\u7684\u989c\u8272\u4e0d\u540c\u3002\u4e13\u4e1a\u505a\u6cd5\u662f\u56fa\u5b9a\u5149\u6e90\u5bf9\u8272\u3001\u6bcf\u6279\u67d3\u6599\u6d4b\u529b\u4efd\u3001\u6c34\u8d28\u7a33\u5b9a\u5904\u7406\u3002<\/div>\n    <\/div>\n    <div class=\"faq-item\" data-faq-toggle=\"\">\n      <div class=\"faq-q\">&#8220;\u8fd9\u4e2a\u989c\u8272\u592a\u8df3\u4e86&#8221;\u662f\u4ec0\u4e48\u610f\u601d\uff1f <span class=\"arrow\">\u25be<\/span><\/div>\n      <div class=\"faq-a\">&#8220;\u8df3&#8221; = \u9971\u548c\u5ea6\u592a\u9ad8\u3001\u592a\u9c9c\u8273\u3001\u592a\u624e\u773c\u3002\u89e3\u51b3\u65b9\u6cd5\u662f\u52a0\u4e00\u70b9\u70b9\u4f59\u8272\uff08\u4e92\u8865\u8272\uff09\u6765\u964d\u4f4e\u9971\u548c\u5ea6\uff0c\u8ba9\u989c\u8272\u53d8&#8221;\u6c89\u7a33&#8221;\u3002\u6bd4\u5982\u592a\u8df3\u7684\u7ea2\u8272\uff0c\u53ef\u4ee5\u52a0\u6781\u5c11\u91cf\u7eff\u8272\u67d3\u6599\u3002\u6ce8\u610f\uff1a\u4f59\u8272\u7528\u91cf\u6781\u5c11\uff08\u901a\u5e380.1%\u4ee5\u4e0b\uff09\uff0c\u52a0\u591a\u4e86\u4f1a\u53d8\u7070\u3002<\/div>\n    <\/div>\n    <div class=\"faq-item\" data-faq-toggle=\"\">\n      <div class=\"faq-q\">\u51b7\u67d3\u5806\u7f6e\u65f6\u4e3a\u4ec0\u4e48\u8981\u5305\u5851\u6599\u819c\uff1f <span class=\"arrow\">\u25be<\/span><\/div>\n      <div class=\"faq-a\">\u9632\u6b62\u6c34\u5206\u84b8\u53d1\u3002\u5806\u7f6e12-24\u5c0f\u65f6\u671f\u95f4\uff0c\u5e03\u5377\u5982\u679c\u66b4\u9732\u5728\u7a7a\u6c14\u4e2d\uff0c\u8868\u9762\u6c34\u5206\u84b8\u53d1\u4f1a\u5bfc\u81f4\u67d3\u6599\u8fc1\u79fb\u3001\u4ea7\u751f\u8272\u82b1\uff08\u989c\u8272\u4e0d\u5747\u5300\uff09\u3002\u5305\u819c\u4fdd\u6301\u6e7f\u5ea6\uff0c\u8ba9\u67d3\u6599\u5728\u6052\u5b9a\u6761\u4ef6\u4e0b\u5747\u5300\u6e17\u900f\u56fa\u8272\u3002<\/div>\n    <\/div>\n    <div class=\"faq-item\" data-faq-toggle=\"\">\n      <div class=\"faq-q\">\u4e3a\u4ec0\u4e48\u5316\u9a8c\u5ba4\u6253\u6837\u548c\u5927\u8d27\u751f\u4ea7\u989c\u8272\u4e0d\u4e00\u6837\uff1f <span class=\"arrow\">\u25be<\/span><\/div>\n      <div class=\"faq-a\">\u8fd9\u662f\u6700\u5e38\u89c1\u7684\u75db\u70b9\u3002\u6253\u6837\u662f\u624b\u5de5\u5c0f\u64cd\u4f5c\uff0c\u5927\u8d27\u662f\u673a\u5668\u5927\u6279\u91cf\u2014\u2014\u6d74\u6bd4\u4e0d\u540c\u3001\u6405\u62cc\u7a0b\u5ea6\u4e0d\u540c\u3001\u70d8\u5e72\u6761\u4ef6\u4e0d\u540c\uff0c\u90fd\u4f1a\u5bfc\u81f4\u989c\u8272\u504f\u5dee\u3002\u4e13\u4e1a\u505a\u6cd5\u662f\u7528\u4e0e\u5927\u8d27\u76f8\u540c\u6761\u4ef6\u7684\u6253\u6837\u673a\uff0c\u5e76\u5728\u914d\u65b9\u4e2d\u9884\u7559\u5fae\u8c03\u4f59\u91cf\u3002<\/div>\n    <\/div>\n  <\/div>\n<\/section>\n<!-- ==================== 09 \u51b7\u77e5\u8bc6 ==================== -->\n<section>\n  <div class=\"sec-head\">\n    <span class=\"num\">09<\/span>\n    <h2>\ud83e\udde0 \u4f60\u53ef\u80fd\u4e0d\u77e5\u9053\u7684\u67d3\u8272\u51b7\u77e5\u8bc6<\/h2>\n  <\/div>\n  <div class=\"wrap\">\n    <div class=\"grid grid-2\">\n      <div class=\"card\">\n        <span class=\"icon\">\ud83d\udd75\ufe0f<\/span>\n        <h3>\u5bf9\u8272\u8981\u5728&#8221;\u6807\u51c6\u5149\u6e90\u7bb1&#8221;\u91cc\u770b<\/h3>\n        <p>\u540c\u4e00\u4e2a\u989c\u8272\uff0c\u5728\u65e5\u5149\u706f\u4e0b\u548c\u8282\u80fd\u706f\u4e0b\u770b\u8d77\u6765\u53ef\u80fd\u5b8c\u5168\u4e0d\u540c\u3002\u4e13\u4e1a\u5bf9\u8272\u5fc5\u987b\u7528\u6807\u51c6\u5149\u6e90\u7bb1\uff08D65\u65e5\u5149\uff09\uff0c\u5426\u5219\u4e24\u4e2a\u4eba\u770b\u5230\u7684\u989c\u8272\u4e0d\u4e00\u6837\uff0c\u6c38\u8fdc\u5bf9\u4e0d\u4e0a\u3002<\/p>\n      <\/div>\n      <div class=\"card\">\n        <span class=\"icon\">\ud83e\uddc2<\/span>\n        <h3>\u78b1\u662f\u51b7\u67d3\u7684&#8221;\u50ac\u5316\u5242&#8221;<\/h3>\n        <p>\u6d3b\u6027\u67d3\u6599\u51b7\u67d3\u8981\u52a0\u78b1\uff08\u56fa\u8272\uff0c\u8ba9\u67d3\u6599\u548c\u7ea4\u7ef4\u7ed3\u5408\uff09\u3002\u6ca1\u6709\u78b1\u67d3\u6599\u4e0d\u56fa\u8272\u3002<\/p>\n      <\/div>\n      <div class=\"card\">\n        <span class=\"icon\">\ud83d\udca7<\/span>\n        <h3>\u6c34\u8d28\u786c\u5ea6\u76f4\u63a5\u5f71\u54cd\u67d3\u8272\u8d28\u91cf<\/h3>\n        <p>\u6c34\u91cc\u9499\u9541\u79bb\u5b50\u592a\u591a\uff0c\u4f1a\u548c\u67d3\u6599\u53cd\u5e94\u4ea7\u751f\u6c89\u6dc0\uff0c\u5bfc\u81f4\u8272\u82b1\u3001\u8272\u6d45\u3002\u5927\u578b\u67d3\u5382\u90fd\u6709\u6c34\u5904\u7406\u8bbe\u5907\uff0c\u628a\u6c34\u8d28\u786c\u5ea6\u63a7\u5236\u5728\u5408\u7406\u8303\u56f4\u3002<\/p>\n      <\/div>\n      <div class=\"card\">\n        <span class=\"icon\">\ud83d\udcca<\/span>\n        <h3>\u989c\u8272\u53ef\u4ee5\u7528\u6570\u5b57\u7cbe\u786e\u63cf\u8ff0<\/h3>\n        <p>\u9664\u4e86HEX\/RGB\uff0c\u67d3\u5382\u5e38\u7528 Lab \u8272\u5ea6\u7a7a\u95f4\uff1aL=\u660e\u6697\uff0ca=\u7ea2\u7eff\u8f74\uff08+\u7ea2-\u7eff\uff09\uff0cb=\u9ec4\u84dd\u8f74\uff08+\u9ec4-\u84dd\uff09\u3002\u4e24\u4e2a\u989c\u8272\u7684\u0394E\u503c\uff1c1\u65f6\uff0c\u4eba\u773c\u51e0\u4e4e\u770b\u4e0d\u51fa\u5dee\u522b\u3002<\/p>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n<footer>\n  <p>\u67d3\u8272\u5165\u95e8\u6307\u5357 \u00b7 \u51b7\u67d3\u5382\u5316\u9a8c\u5ba4\u5185\u90e8\u79d1\u666e\u8d44\u6599<\/p>\n  <p style=\"margin-top:6px\">\u53c2\u8003\u6765\u6e90\uff1a\u51b7\u67d3\u5de5\u827a\u53c2\u6570\u6765\u6e90\u4e8e\u751f\u4ea7\u5b9e\u8df5 \u00b7 \u67d3\u6599\u8272\u8c31\u4e3a\u793a\u610f<\/p>\n<\/footer>\n","protected":false},"excerpt":{"rendered":"<p>\ud83c\udfa8 \u67d3\u8272\u5165\u95e8\u6307\u5357 \u989c\u8272\u57fa\u7840 \u4e92\u52a8\u8c03\u8272 \u67d3\u6599\u539f\u7406 \u51b7..<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,10],"tags":[],"class_list":["post-382","post","type-post","status-publish","format-standard","hentry","category-uncategorized","category-10"],"_links":{"self":[{"href":"https:\/\/www.cpb-vip.com\/index.php?rest_route=\/wp\/v2\/posts\/382","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cpb-vip.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cpb-vip.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cpb-vip.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cpb-vip.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=382"}],"version-history":[{"count":9,"href":"https:\/\/www.cpb-vip.com\/index.php?rest_route=\/wp\/v2\/posts\/382\/revisions"}],"predecessor-version":[{"id":396,"href":"https:\/\/www.cpb-vip.com\/index.php?rest_route=\/wp\/v2\/posts\/382\/revisions\/396"}],"wp:attachment":[{"href":"https:\/\/www.cpb-vip.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=382"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cpb-vip.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=382"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cpb-vip.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=382"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}