12.2日(rì)音(yīn)訊，不©÷(bù)得(de)不(bù)知(zhī)<δ≠'的(de)網頁配色小(xiǎo)常識，網頁視(sh§→β₽ì)覺層面主要(yào)是(shì)由形式（或叫布局）、色彩、€≤ ₩圖片和(hé)文(wén)字信息組成，設計(jδ≈ì)師(shī)通(tōng)常對(duì)形式感關注的(de)比較↕¥多(duō)，因為(wèi)視(shì)覺沖擊力、設計(jì)差異性或Ω↑×創新大(dà)多(duō)都(dōu)仰賴形式呈現(xiàn)，而色彩β>主要(yào)影(yǐng)響整體(tǐ)觀感、÷Ω$±設計(jì)品質以及受衆情緒，很(hěn)多×σ(duō)時(shí)候我們設計(jì)了(le)一(yī)個(gè) σΩ 不(bù)錯(cuò)的(de)形式卻未能(néng)做(zuò)'β出這(zhè)個(gè)稿子(zǐ)應有(yǒu)的(de)σ"§品質，會(huì)不(bù)會(huì)太可(kě)惜？
形式需要(yào)思考創造，圖片素材需•♣¥要(yào)學習(xí)處理(lǐ)，文(wén)字需要(yào)梳理(®↔γ≥lǐ)編排，但(dàn)網頁色彩是(shì)不(bù)是(shì)一(yī↓ )定需要(yào)有(yǒu)天生(shēng)的(d↑∞↕&e)色感、豐富的(de)理(lǐ)論和(hé)多(du↔♦♦≥ō)年(nián)經驗沉澱才能(néng)運用(y₩βòng)自(zì)如(rú)？
當然不(bù)！
網頁配色的(de)文(wén)章(zhāng)在網絡上(shàng)很(✔₽✔hěn)多(duō)，甚至有(yǒu)些(xiē)泛 ≤§ 濫，稍微(wēi)關注過的(de)同學應該都(dōu)知( βzhī)道(dào)“色輪”、&≤βldquo;色卡”等輔助性配色§±工(gōng)具，但(dàn)那(nà)更多(duΩ₹Ωō)都(dōu)是(shì)從(cóng)印刷介質上(shàngσσ✘)的(de)色彩系統延伸出來(lái)的(de)，不(bù)完全适♥≈≥用(yòng)于網頁，甚至造成很(hěn)大(dà)的(de)局限，比♥π如(rú)你(nǐ)會(huì)較真的(de)通(tōng)過色輪來(lá±≈☆i)選用(yòng)網頁色彩嗎(ma)？再比如(rú← )通(tōng)過下(xià)面提供的(de)配色組σ∞φ合，你(nǐ)能(néng)自(zì)由的(de)應對(duì<♣)一(yī)個(gè)又(yòu)一(yī)個(gè)的(de)類型相(x•€₽iàng)若的(de)網頁設計(jì)需求嗎(ma)？
由于CMYK與RGB色彩模式不(bù)同，網頁的δ♠←(de)色彩呈現(xiàn)數(shù)量要(yào)龐大(dà)的'€(de)多(duō)，選用(yòng)也(yě)應該更自(zì)由，但(Ω☆'€dàn)在配色上(shàng)卻常碰到(←≈dào)設計(jì)作(zuò)品偏髒、發灰、花(>™☆≠huā)哨等大(dà)問(wèn)題，這(zhè)事(shì)兒(é® r)得(de)解決。
網頁案例剖析
“網頁配色不(bù)宜≥↔ε↓超過三種。”
真理(lǐ)，這(zhè)沒錯(cuò)，但(dàn∞≈<)更多(duō)是(shì)從(cóng)色相(xiàng)（赤橙黃©✔(huáng)綠(lǜ)青藍(lán)紫等不(bù)同顔色）™β★上(shàng)來(lái)說(shuō)的(de)∏→<。
色相(xiàng)差異明(míng♣®)顯，主要(yào)色彩的(de)選取就(jiù)比較好(hǎφ♣₩o)辦，常見(jiàn)的(de)有(yǒu)對(duì£₹§)比色、臨近(jìn)色、冷(lěng)暖色調互補等方式，可(kě£ε® )以簡單設定，或直接從(cóng)成功作(zuò)₩∏↕品中借鑒主輔色配比都(dōu)可(kě)以，比如(rú)常見(®∞♦jiàn)的(de)朱紅(hóng)點綴深↑∑藍(lán)、明(míng)黃(huáng)點綴深綠(lǜ∏₩↕)等。
但(dàn)通(tōng)常，我們需要(yào)面對(duì)的(d↕÷e)設計(jì)需求在色彩分(fēn)配上(shàng)會(huì)有(yǒuγ∏)更多(duō)的(de)問(wèn)題出現(x•σ≤iàn)：
邯鄲網絡公司首創網絡，根據網頁信息的(de)多(duō)寡，會(h₹₽<♦uì)有(yǒu)更多(duō)色彩區(qū)域的(de)層級劃分(₩¥₩fēn)和(hé)文(wén)字信息層級區(qū)分(fēn)需求，↕'®♣那(nà)麽在守住“網頁色彩（'♣相(xiàng)）不(bù)超過三種”的(de)原則下(xià)≤σ♥，隻能(néng)尋找更多(duō)同色系的(de)色彩來(lái)完善設σ ↑π計(jì)，也(yě)就(jiù)是(shì)在“飽和(δ hé)度”和(hé)“明(míng)度”上≠•σ(shàng)做(zuò)文(wén)章(zhān∑×g)。
這(zhè)也(yě)就(jiù)是(shì)本文(wén)為(wè≤ i)解決這(zhè)一(yī)問(wèn)題所要(yào)分(fēn≥δ₩★)享的(de)“天然”配色技(jì)巧：疊柔配 <φ≠色法。
疊柔配色技(jì)巧分(fēn)享（☆'∏$這(zhè)裡(lǐ)才是(shì)正文(wén)，上(shàng)面都(₽¶® dōu)是(shì)廢話(huà)）
這(zhè)個(gè)方法非常簡單，無需知(zhī)道(dào)三"✘角函數(shù)、四則運算(suàn)，無₩→≈δ需理(lǐ)解色彩指數(shù)和(hé)直方圖，αΩ×'甚至不(bù)用(yòng)了(le)解色階曲線和(hé)€€β亮(liàng)度強弱......甚至，≥φφ你(nǐ)可(kě)以對(duì)色彩毫無知(zhī)覺。
★隻需要(yào)明(míng)白(báiγ₽)三個(gè)關鍵詞：疊加、柔光(guāng)和(hé)透明©γφ$(míng)度（填充）。
如(rú)果連這(zhè)三個(gè)♣←關鍵詞都(dōu)不(bù)甚明(mín®✘÷g)了(le)，那(nà)就(jiù)記住他(tā)們所♥αλ☆在的(de)位置：
注意：透明(míng)度與填充略有(yǒu)不(bù)同，填充不≥>(bù)會(huì)影(yǐng)響到(dào)“混合選項ε₹•<”的(de)效果，而透明(míng)度則是(shì)作(zu♥δβò)用(yòng)于整個(gè)圖層。
順便，花(huā)幾分(fēn)鐘(z δhōng)時(shí)間(jiān)了(le)解一(yī✘γ₩£)下(xià)這(zhè)個(gè)配色技(j£<ì)巧的(de)原理(lǐ)：
即：用(yòng)純白(bái)色（#ffffff）和(≤hé)純黑(hēi)色（#000000）通(€∏tōng)過“疊加”和(hé)&π→☆αldquo;柔光(guāng)”的(de)混合模式（效果φ•∏類似調整飽和(hé)度和(hé)明(míng)度），在任意一(yī¥₩)個(gè)色彩上(shàng)得(de)到(dào)最匹配的(₩≤de)顔色（然後通(tōng)過調整透明(míng)度選取最适π♦合的(de)輔色）。
（上(shàng)圖示例中，調整疊/柔模式的(de)黑(hēi)白(b× ái)色塊的(de)不(bù)同透明(míng)度（取10%到(dào)10₩♣★•0%整數(shù)值為(wèi)例）就('®≠↓jiù)可(kě)以得(de)到(dào)差異較明(mí≤Ω>ng)顯的(de)40種配色，通(tōng)過這(zhè)種技(jì)巧，♣®↓理(lǐ)論上(shàng)每一(yī)種顔色都(dōu)可(kě)以輕易獲得γγ≤←(de)無窮盡的(de)“天然配色”，并且是(shì)βγ “0失誤”！）
★由于疊加和(hé)柔光(guāng)模式對(duì)圖像內(ε↑ε♦nèi)的(de)最高(gāo)亮(liàng)部分∑ ★(fēn)和(hé)最陰影(yǐng)部分(fēn)無調整，因此該配色方法₩對(duì)純黑(hēi)色和(hé)純白(&∞bái)色不(bù)起作(zuò)用(yòng)。
設計(jì)實戰演示：
要(yào)不(bù)要(yào)像上(sh↓ •↔àng)面圖示看(kàn)起來(lái)的(de)那(n≈₩δ₽à)樣複雜(zá)？
不(bù)用(yòng)，隻需要(yào)理(lǐ)解了(le)上(sh'₽™àng)面的(de)方法，就(jiù)可(kě)以忘記圖示，在你∞'ε(nǐ)的(de)設計(jì)工(gōng)作(zuò)中自(zì)由發∏®$φ揮！
簡單三步：
①一(yī)個(gè)黑(hēi)或白(±₩"™bái)色，或黑(hēi)白(bái)漸變（可(kě)以€♠↕是(shì)點、線、面...甚至字體(tǐ¶× ±)）
②混合模式選擇疊加或柔光(guān✘☆★∞g)
③調整透明(míng)度（1%-100€←∞'%随意，省心的(de)做(zuò)法是(↕∑shì)直接鍵入一(yī)個(gè)整數(shù)值，比如(rú)∞≠♣：輕質感類頁面可(kě)以選擇20%-4$↔Ω0%，重質感感類可(kě)以鍵入60%或↕×£↕以上(shàng)）
