首先我們先來了解一下什么是雙色調(diào)，其實單從它的字面含義上就能理解，“雙色”是指兩種顏色，“調(diào)”就是指色調(diào)，也就是將一個圖像通過灰度分離出暗部、亮部和中間調(diào)，用一種顏色代替暗部，用另一種顏色代替亮部，中間調(diào)用這兩個顏色的過渡色代替。

我們用這張圖片來演示，通常一張正常的彩色圖片都具有色彩三要素：色相、純度、明度。

如果處理成黑白或灰度，也就意味著沒有了色相和純度，只是單純的明度表現(xiàn)，畫面分成了暗部、亮部以及中間的過渡地帶。

先替換暗色部分，選用的是一個藍色，于是圖片中的暗色部分就變成了藍色。

亮色部分選擇一個綠色，現(xiàn)在就實現(xiàn)了雙色調(diào)的效果，畫面中暗色的部分變成了藍色，亮色部分變成了綠色，中間過渡的灰色部分變成了藍綠之間的混合色。

如果反過來，將較暗的顏色替換亮色部分，較亮的顏色替換暗色部分，就會出現(xiàn)這種類似負(fù)片的效果。

雙色調(diào)和雙色的區(qū)別就在這個“調(diào)”上，這里不是在玩文字游戲，的確如此，因為雙色配色的畫面中只有兩種顏色，而雙色調(diào)除了這兩種顏色之外，還有它們之間的過渡色。

比如綠色和紅色這兩個顏色的搭配，毫無疑問是雙色。

但如果同樣是用綠色和紅色去進行雙色調(diào)搭配，那就是綠色、紅色以及它們之間的漸變。

拿這兩張海報舉例，它們所使用的色相差不多，但是左側(cè)的是雙色調(diào)，右側(cè)的是雙色，左側(cè)的海報中暗色和亮色部分分別填充了這兩個顏色，中間調(diào)部分是它們之間的過渡色，而右側(cè)的海報只有這兩種顏色。

既然提到了漸變，相信有人會有疑問，那雙色調(diào)和漸變又有什么區(qū)別呢？同樣我們還是用圖說話。

這里我們用這張圖片分別演示一下漸變和雙色調(diào)兩種效果。第一步先將圖片處理成黑白，左側(cè)從下往上是紅色到黃綠色的漸變，右側(cè)是使用這兩個顏色的雙色調(diào)效果。漸變相當(dāng)于在圖片上放了一塊有色玻璃，這塊玻璃是從紅色到綠色的漸變，透過玻璃看的效果只是對顏色產(chǎn)生了影響，并不會對圖片的細(xì)節(jié)產(chǎn)生改變；而右側(cè)的雙色調(diào)效果相當(dāng)于給圖片換了顏色，給人一種不真實的感覺，因為這是現(xiàn)實中我們不常見到的效果。

其實雙色調(diào)并非是設(shè)計中的產(chǎn)物，早在十九世紀(jì)末期就已經(jīng)存在了，就是利用相機產(chǎn)生的雙色調(diào)效果。

最初出現(xiàn)在棕褐色照片上，也是最常用的雙色調(diào)之一。一方面能夠保持工業(yè)時代未修飾的外觀，另一方面還能夠讓照片呈現(xiàn)出古色古香的感覺。

后來這一效果被印刷業(yè)借用過來，成為了一種經(jīng)濟有效的印刷方案，因為使用雙色調(diào)可以以較低的成本進行批量印刷，并且還可以為圖像增添藝術(shù)效果。

近些年來伴隨著新媒體的出現(xiàn)，雙色調(diào)的使用已逐漸普及，而且越來越受歡迎，受歡迎的原因已經(jīng)不是印刷成本低的問題了，更多地是跟現(xiàn)在的審美有關(guān)。

雙色調(diào)之所以能夠成為新趨勢，很多人認(rèn)為是音樂平臺“聲田”將這一趨勢帶回主流，所以一說到雙色調(diào)，大部分人腦海中的第一印象就是這種畫面，但其實這只是狹義上的雙色調(diào)，而廣義上的雙色調(diào)并非只有這一種色彩搭配形式。

首先第一種也是最基本的形式就是「黑白」?？赡苡械娜藭f黑白怎么能算雙色調(diào)呢？因為這里我們是從廣義上來講的，只要通過雙色調(diào)的手法能實現(xiàn)的效果都可以算是雙色調(diào)，無論是什么顏色。而黑白作品是可以通過雙色調(diào)實現(xiàn)的，只不過填充的顏色是黑色和白色。但是有一點需要提醒大家的是，如果想要得到非常具有質(zhì)感的黑白圖片，這個還跟攝影精修以及后期調(diào)色有關(guān)，而不是單純的雙色調(diào)就可以實現(xiàn)的。

「黑色和有彩色」。這種形式也就是在黑白的基礎(chǔ)上，暗色部分不變，亮色部分被替換成了一個有彩色。這種效果可以用漸變映射的手法實現(xiàn)，也可以直接用色塊疊加。

我們用這張圖片來演示，方法就是在圖片上添加一個色塊，填充綠色，圖層模式選擇正片疊底，也可以通過漸變映射來實現(xiàn)，實現(xiàn)的效果都是黑色和有彩色的搭配，最后配上文字。

「白色和有彩色」。也就是暗色部分填充一個有彩色，亮色部分不變。這種效果因為白色占主導(dǎo)，所以通常會有一種輕盈感、單純感，傳統(tǒng)上也叫做單色模式，但是在這里我們都給劃進了雙色調(diào)的范疇。

還是用這張圖片來演示，同樣疊加色塊，但圖層模式要選擇濾色，當(dāng)然也可以通過漸變映射來實現(xiàn)，兩種方法得到的效果雖然有微小差異，但是可以忽略不計。

「有彩色和它的不同色調(diào)」。這種形式就是暗色和亮色部分替換的都是同一個色相，只不過通過色調(diào)去表現(xiàn)明暗關(guān)系。

「有彩色和有彩色的搭配」。這也是我們平時對雙色調(diào)的基本印象，也是我們前面說的狹義上的雙色調(diào)。這種有彩色加有彩色的雙色形式，很難通過疊加色塊來實現(xiàn)，漸變映射是首選。

這里我們用這張圖片做了三組不同的雙色調(diào)配色。

這個系列海報是一個百人合唱團的視覺形象，海報的制作創(chuàng)意使用了經(jīng)典名畫來描繪音樂會的主題，效果圖中，背景是原畫作，而海報位于原畫作之上截取布局，分別用不同的色彩組合進行了雙色調(diào)處理，雖然每一個的色相不同，但因為都是雙色調(diào)的表現(xiàn)手法，所以整體看上去又是一個整體。

這個品牌的視覺形象使用的也是有彩色和有彩色的雙色調(diào)搭配，藍色和粉色組合在一起，給人一種年輕、時尚的感覺。

這是一部關(guān)于成長的經(jīng)典小說《失戀排行榜》，這是第3版的封面，鋪滿背景的人物圖片使用了紅色和黃色的雙色調(diào)搭配，雖然人物圖片的識別性降低了，但是視覺沖擊力和藝術(shù)效果提高了。

這是《夏日之戀》的封面，是法國新浪潮經(jīng)典電影《夏日之戀》的原著小說。色彩的選擇都是偏淡雅的色調(diào)，給人一種小清新文藝的感覺，只不過這里的雙色調(diào)圖片并非填充整個背景，而是截取的一個局部特寫。

雙色調(diào)使用的場景幾乎適用于所有媒介，網(wǎng)頁設(shè)計更是居多，而且因為印刷需要考慮色值的問題，而屏幕端不需要考慮這些，所以網(wǎng)頁UI上使用的雙色調(diào)色彩更加豐富，無論是鮮亮的還是黯淡的，都可以使用。

這里給大家推薦第三種實現(xiàn)雙色調(diào)的方法，就是網(wǎng)站工具，現(xiàn)在有很多這種網(wǎng)站可以幫助我們快速實現(xiàn)雙色調(diào)，這里給大家推薦一個比較主流的，就是這個網(wǎng)站。

https://duotone.shapefactory.co/

進入網(wǎng)站會顯示一些提供的圖片，我們可以通過左側(cè)這里調(diào)整顏色，可以選擇默認(rèn)的幾組搭配，也可以單獨去調(diào)整，所有的調(diào)整效果都是實時顯示的。

點擊上傳，界面就變成了你的圖片，選擇你想要的效果，最后點擊下載就可以了，這種方法也是比較好用的。

剛剛我們了解了雙色調(diào)的一些色彩組合形式，下面我們來看看雙色調(diào)在設(shè)計中都有哪些表現(xiàn)手法。

第一種就是「多個單色形成系列」，也就是每一個單獨的畫面使用一種色相下的不同色調(diào)，但是放在一起又會形成系列，整體來看既有很好的統(tǒng)一感，同時又有很好的區(qū)分，統(tǒng)一感來自于整體都使用的雙色調(diào)配色，區(qū)分是來自于每一個的色相都是不同的。下面我們嘗試使用一下這三組配色。

我們用這三張圖片來做一個系列的感覺，配色上就用剛才那三組配色。

首先是第一張圖片，因為整體我都想居中編排，所以先調(diào)整圖片在版面中的位置，然后對圖片進行漸變映射形成雙色調(diào)，最后編排文字。

然后是第二張，也是先調(diào)整圖片位置，填充第二組配色，但是因為圖片本身的原因有些背景還存在，所以需要手動擦掉，版式保持不變。

第三張同樣也是調(diào)整位置，然后處理成雙色調(diào)，擦去背景，放上文字。

原本三張不太好統(tǒng)一的圖片，僅僅通過位置的統(tǒng)一和雙色調(diào)的填充，就能快速出效果。通常這種成系列的設(shè)計，除了雙色調(diào)起到一定的作用外，文字編排也是很關(guān)鍵的，通常情況下版式都是不變的，如果版式相差太多，也是很難讓人看上去像是一個系列的，這一點大家需要注意。

這個畫冊雜志的封面，同樣也是使用的多個單色形成系列的手法。

「單色和單色」。這種手法就是將畫面中的色彩分成兩部分，每一個部分都是一個單色的雙色調(diào)形式，然后組合在一起，整體就是雙色調(diào)的效果。但是因為這里的三個相關(guān)作品在版式上都比較復(fù)雜，所以怕給大家造成誤解，以為單色加單色的形式只適合復(fù)雜的文字編排，其實不是的。

比如這里給大家做一個演示，這是我們要用到的圖片。

先將兩個人物圖片置入到橢圓形中，然后搭建版式，因為我們的重點是講色彩，所以版式部分就不過多討論。黑白的配色其實也是可以的，但是因為是黑白，所以整體上就是中規(guī)中矩的感覺，而如果想增加一些藝術(shù)效果，我們可以嘗試使用雙色調(diào)。

先對兩個人物進行雙色調(diào)處理，使用的就是單色加單色的表現(xiàn)手法，男生用藍色，女生用紅色，其余元素可以交叉使用這兩種顏色，這個版面就完成了，也非常的簡單，目的就是告訴大家單色加單色的形式并非只能用于復(fù)雜的版面。

「局部應(yīng)用」。雙色調(diào)并非只能用在整個畫面上，也可以用在畫面的局部，如果是整個版面的雙色調(diào)，給人的感覺特別強烈，如果想降低這種感覺，那就可以在局部上應(yīng)用。

下一種表現(xiàn)形式是「色彩透疊」，比如這三個海報就是用色塊進行疊加，相交的部分就會形成雙色調(diào)的效果。

這兩個海報，給人的第一印象就是綠色和粉色的雙色調(diào)效果，但是這里它并不是直接將人物圖片調(diào)整成雙色調(diào)，而是將圖片處理成綠色調(diào)，通過疊加粉色的色塊來實現(xiàn)的，由于有相交的部分和不相交的部分，所以還會形成一種靈動多變的交錯感。

可以疊色塊當(dāng)然也可以疊文字，需要注意的是文字的面積要足夠大，不能太小，如果面積太小相交的部分就會不夠明顯。

這組海報是將圖片置入到文字中，然后在文字的上方再疊一層文字，通過兩種色彩的疊加形成雙色調(diào)的效果。

「單色組合成多色」。雙色調(diào)也可以實現(xiàn)色彩豐富的畫面，方法就是在每一個局部使用不同的雙色調(diào)效果，然后組合在一起，最后就會呈現(xiàn)出一種多色配色的效果。

最后就是通過「手動調(diào)整藝術(shù)效果」，這種形式就并非單純的去填充雙色調(diào)就可以了，變成雙色調(diào)之后還需要自己進行一些手動的修飾，例如局部上色、添加紋理、手繪、拼貼、裁切等等，總之可以進行任何形式的創(chuàng)作。

最后我用一個案例給大家演示一下，今年八月份，我們研習(xí)設(shè)舉辦了一個內(nèi)部活動，活動的主題是每個人挑選學(xué)生時代自己喜歡的一個科目進行教科書設(shè)計，相當(dāng)于一個致敬。這次活動中我們團隊進行的創(chuàng)作，后續(xù)會發(fā)布一篇推文進行詳細(xì)的介紹，感興趣的話可以留意一下我們的公眾號。而我自己設(shè)計的，在這里就提前給大家劇透了。

我選的是語文，這是最終的效果圖。很明顯使用的就是雙色調(diào)，但是這里我并非直接找了四張圖片然后進行雙色調(diào)處理，那樣太簡單了，當(dāng)然我的意思并不是說簡單就不好，復(fù)雜的就一定好，如果你能找到你想要的圖片那也是可以的，而我想要的這四個畫面是需要自己去創(chuàng)作出來的。

我們一個個來看，首先是第一個，先添加一個紋理充當(dāng)?shù)孛?，接著添加一個山和天空的圖片，然后添加一個月亮，最后添加一棵樹和一頭牛作為主體?？梢钥吹饺绻乾F(xiàn)在這樣的畫面，風(fēng)格是很不搭的，不過沒關(guān)系，接著做第二個。

同樣也是找一個木板的紋理，然后上方添加天空，木板紋理是充當(dāng)水面效果的，所以這里我們添加一個船，最后添加幾只摳好的海鷗素材。

然后是第三個，先添加一個水面，然后同樣是天空，接著中間可以添加一些山，進行疊加，目的是形成一種錯落的感覺，最后加添一個主體，這張我們選擇兩只鶴，這樣大體上就可以了。

最后一個，同樣也是添加一個木板紋理，這個我想做一個夜晚的效果，所以找了一個夜晚星空的圖片，然后添加幾匹馬，正好這個馬奔跑的路線與木板的路線相吻合，也算是也一個很好的巧合。

放在一起來看一下，現(xiàn)在的畫面其實是不符合合成的，因為這里面的圖片風(fēng)格很混亂，有的是偏真實的，有的是插畫，根本沒法去調(diào)整，這時候就是展現(xiàn)雙色調(diào)強大濾鏡魅力的時候了。

這里我們就用這四組顏色對畫面進行雙色調(diào)處理。

大家看，通過雙色調(diào)的添加，讓原本非?；靵y的一個畫面一下子就統(tǒng)一了，并且還很有意境。但是大家應(yīng)該注意到了，這里的主體元素沒有跟著一起變成雙色調(diào)，因為主體一定要和畫面區(qū)分開，如果主體元素也調(diào)整成雙色調(diào)的話就會被淹沒掉了，添加的就沒什么意義了。

所以對于主體的處理，我這里添加了黑色形成類似剪影的效果，但是這里不是單純的黑色，而是有一定的肌理在里面。

最后編排文字，也就是最開始大家看到的效果，既不屬于合成也不屬于插畫的這么一個感覺，我為什么說雙色調(diào)是配色的美顏濾鏡，我想現(xiàn)在大家應(yīng)該徹底明白了吧，原本那樣的畫面，僅僅通過雙色調(diào)這么非常簡單的一步，就可以讓它變得很統(tǒng)一，而且畫面的色相感更強，更加具有設(shè)計感和藝術(shù)效果。最后我們來看一下效果圖。

本期教程到這里就結(jié)束了，我們帶大家了解了什么是雙色調(diào)，通過一些相關(guān)設(shè)計作品，讓大家了解了雙色調(diào)的色彩組合形式和雙色調(diào)的設(shè)計表現(xiàn)手法，然后教給大家三種實現(xiàn)雙色調(diào)的方法，最后用一個案例為大家演示了雙色調(diào)的強大之處。雙色調(diào)雖然是一種實現(xiàn)起來比較簡單的手法，但是因為它應(yīng)用領(lǐng)域的廣泛，以及本身并沒有特別明顯的缺點，從而讓雙色調(diào)的上限很高，因為它可以和任何設(shè)計形式相結(jié)合。教給大家的只是最基本的方法，至于做出什么樣的效果，還需要大家自己去潛心研究和發(fā)掘。今天的內(nèi)容就先到這里，希望對大家有所幫助，我是無我，我們下期再見。

原文地址：研習(xí)設(shè)（公眾號）

雙色調(diào)通過兩種顏色來改變原本圖像的色調(diào)，不同的雙色搭配會產(chǎn)生不一樣的調(diào)性氛圍。如果涉及到印刷成本的話，雙色調(diào)設(shè)計也是一種非常經(jīng)濟實惠的設(shè)計方案。

不同色調(diào)的畫面效果

雙色調(diào)風(fēng)格能運用到多種設(shè)計的領(lǐng)域當(dāng)中，例如印刷品、出版物、網(wǎng)頁設(shè)計、界面設(shè)計、插畫等等，都能看到雙色調(diào)的應(yīng)用，畢竟雙色調(diào)能帶來強烈的視覺吸引力，讓設(shè)計變得更加有個性有趣。

書籍設(shè)計

海報設(shè)計

網(wǎng)頁設(shè)計

上面說過，雙色調(diào)是通過兩種顏色來改變原本圖像的色調(diào)。關(guān)于配色，總是離不開色彩關(guān)系。所謂色彩關(guān)系，就必須有兩種以上顏色，才能形成的關(guān)系。所以，色彩關(guān)系有這些，同類色、鄰近色、互補色、對比色等等。雙色調(diào)風(fēng)格一般會選擇對比色和鄰近色。

對比色的雙色調(diào)

對比色就是基色起120°～180°的顏色，能給畫面帶來一定的視覺沖擊力和較強的色彩張力，有強烈的個性感。

紅色的對比色，從藍色到綠色之間的顏色

結(jié)合圖像和圖形的特點，表達出合適的氛圍和情感。但如果對比色使用不當(dāng)?shù)脑挘苋菀自斐蓵炗暗默F(xiàn)象。這時候可以結(jié)合黑白來使用，調(diào)和對比色的沖撞，也能帶來一種平衡。

對比色：深藍色和橙色

對比色：青綠色和紫紅色

鄰近色的雙色調(diào)

鄰近色是基色起60°之內(nèi)的顏色。由于鄰近色的色相差比較小，過渡比較柔和，所以搭配起來非常簡單，也不容易出錯。

綠色的鄰近色

由綠色到黃色，或綠色到青色之間的顏色

所以初學(xué)者用這種方法配色也比較容易接受。而運用在雙色調(diào)中，鄰近色也不會容易干擾到信息的傳達和識別。

鄰近色：紫色和紫紅

鄰近色：黃色和綠色

對于雙色調(diào)的面積處理，可以選擇大面積和小面積處理。

大面積處理

一般情況下，通常會將圖像進行大面積處理?？赡芫托枰獪p少不必要的細(xì)節(jié)內(nèi)容，概括地展現(xiàn)圖像，傳達整體的氛圍和情感。

小面積處理

如果想要小面積的雙色調(diào)處理，可以從一些文字、形狀作為裝飾性的元素進行雙色，都可以起到重整圖像和圖形的色彩關(guān)系，帶來新的視覺感受，吸引用戶注意的作用。

網(wǎng)站自動生成

首先奉上兩個自動生成雙色調(diào)圖片的網(wǎng)站，方便又快捷，適合在短時間內(nèi)完成的方法。

https://duotone.shapefactory.co

https://medialoot.com/duotones/

這兩個網(wǎng)站都可以上傳圖片，也可以選擇網(wǎng)站給的圖片，再選擇配色方案。如果要在限定的時間內(nèi)快速產(chǎn)出雙色調(diào)風(fēng)格的圖片，那么這兩個網(wǎng)站最適合不過了。而且不需要梯子，親測有效。

PS 軟件步驟那么在ps軟件中怎樣做出雙色調(diào)？其實有很多種方式，但我一般會用漸變映射。因為它對應(yīng)的是照片光暗部進行著色的。而不是單純的混合模式。

在漸變映射中有一個顏色漸變條，這個顏色漸變條從左到右對應(yīng)的就是照片暗部、中間調(diào)和高光區(qū)域。

也就是說越靠近左邊的顏色就對應(yīng)照片暗部的地方，越靠近右邊的顏色就對應(yīng)照片高光的地方，那么根據(jù)這個原理就可以進行漸變映射。

關(guān)于這個漸變映射的操作，如何還是看不懂，可以點擊此文章【我想要一個不辣眼，又有點高級的漸變！】回顧一下的。

什么情況使用雙色調(diào)？

?雙色調(diào)能優(yōu)化質(zhì)量較差的圖像，形成一個全新的視覺畫面。當(dāng)你的素材比較糟糕的時候，選擇雙色調(diào)能瞬間提升逼格，這也是拯救爛圖的方法之一。

改前

改后

?雙色調(diào)比較適合修飾性效果的畫面，較為有趣個性的設(shè)計。對于產(chǎn)品展示，嚴(yán)肅的主題項目，就不太適合使用雙色調(diào)風(fēng)格。

最后，我們來總結(jié)一下。雖然雙色調(diào)設(shè)計不是一件新鮮的嘗試，但對于設(shè)計來說也是一種趨勢，依然具有很強的視覺吸引力。希望今天的文章，能帶給你一點新的想法。

來源：版式設(shè)計很簡單

形式需要思考創(chuàng)造，圖片素材需要學(xué)習(xí)處理，文字需要梳理編排，但網(wǎng)頁色彩是不是一定需要有天生的色感、豐富的理論和多年經(jīng)驗沉淀才能運用自如？

當(dāng)然不！

關(guān)于網(wǎng)頁配色

網(wǎng)頁配色的文章在網(wǎng)絡(luò)上很多，甚至有些泛濫，稍微關(guān)注過的同學(xué)應(yīng)該都知道“色輪”、“色卡”等輔助性配色工具，但那更多都是從印刷介質(zhì)上的色彩系統(tǒng)延伸出來的，不完全適用于網(wǎng)頁，甚至造成很大的局限，比如你會較真的通過色輪來選用網(wǎng)頁色彩嗎？再比如通過下面提供的配色組合，你能自由的應(yīng)對一個又一個的類型相若的網(wǎng)頁設(shè)計需求嗎？

由于CMYK與RGB色彩模式不同，網(wǎng)頁的色彩呈現(xiàn)數(shù)量要龐大的多，選用也應(yīng)該更自由，但在配色上卻常碰到設(shè)計作品偏臟、發(fā)灰、花哨等大問題，這事兒得解決。

網(wǎng)頁案例剖析

“網(wǎng)頁配色不宜超過三種。”

真理，這沒錯，但更多是從色相（赤橙黃綠青藍紫等不同顏色）上來說的。

色相差異明顯，主要色彩的選取就比較好辦，常見的有對比色、臨近色、冷暖色調(diào)互補等方式，可以簡單設(shè)定，或直接從成功作品中借鑒主輔色配比都可以，比如常見的朱紅點綴深藍、明黃點綴深綠等。

但通常，我們需要面對的設(shè)計需求在色彩分配上會有更多的問題出現(xiàn)：

（由于本人從事游戲網(wǎng)頁視覺設(shè)計工作，故案例均以游戲網(wǎng)頁做示意說明，其他網(wǎng)頁類型可以做延伸思考或僅作參閱）

如上所示，根據(jù)網(wǎng)頁信息的多寡，會有更多色彩區(qū)域的層級劃分和文字信息層級區(qū)分需求，那么在守住“網(wǎng)頁色彩（相）不超過三種”的原則下，只能尋找更多同色系的色彩來完善設(shè)計，也就是在“飽和度”和“明度”上做文章。

這也就是本文為解決這一問題所要分享的“天然”配色技巧：疊柔配色法。

疊柔配色技巧分享（這里才是正文，上面都是廢話）

這個方法非常簡單，無需知道三角函數(shù)、四則運算，無需理解色彩指數(shù)和直方圖，甚至不用了解色階曲線和亮度強弱……甚至，你可以對色彩毫無知覺。

★只需要明白三個關(guān)鍵詞：疊加、柔光和透明度（填充）。

如果連這三個關(guān)鍵詞都不甚明了，那就記住他們所在的位置（下圖）：

注意：透明度與填充略有不同，填充不會影響到“混合選項”的效果，而透明度則是作用于整個圖層。

順便，花幾分鐘時間了解一下這個配色技巧的原理：

即：用純白色（#ffffff）和純黑色（#000000）通過“疊加”和“柔光”的混合模式（效果類似調(diào)整飽和度和明度），在任意一個色彩上得到最匹配的顏色（然后通過調(diào)整透明度選取最適合的輔色）。

（上圖示例中，調(diào)整疊/柔模式的黑白色塊的不同透明度（取10%到100%整數(shù)值為例）就可以得到差異較明顯的40種配色，通過這種技巧，理論上每一種顏色都可以輕易獲得無窮盡的“天然配色”，并且是“0失誤”?。?/p>

★ 由于疊加和柔光模式對圖像內(nèi)的最高亮部分和最陰影部分無調(diào)整，因此該配色方法對純黑色和純白色不起作用。

設(shè)計實戰(zhàn)演示：

要不要像上面圖示看起來的那樣復(fù)雜？
不用，只需要理解了上面的方法，就可以忘記圖示，在你的設(shè)計工作中自由發(fā)揮！

簡單三步：
①  一個黑或白色，或黑白漸變（可以是點、線、面…甚至字體）
②  混合模式選擇疊加或柔光
③  調(diào)整透明度（1%-100%隨意，省心的做法是直接鍵入一個整數(shù)值，比如：輕質(zhì)感類頁面可以選擇20%-40%，重質(zhì)感感類可以鍵入60%或以上）

如下圖：

（無論你采用何種主色，用黑白色彩疊加或柔光，你都可以輕松自如的獲得完美匹配的整套色系。）

這并不僅僅適用于色域劃分或提取幾個輔色，如下圖：字體顏色、細(xì)節(jié)線條、按鈕漸變、邊角高光、描邊陰影……都可以用黑白色肆意揮灑！

方法延伸（細(xì)節(jié)篇）

假如將該方法運用到一個按鈕上……

通過混合選項中的“陰影、外發(fā)光、描邊（不適用疊柔法）、內(nèi)陰影、內(nèi)發(fā)光”可以自由的刻畫5層像素級細(xì)節(jié)（當(dāng)然，通常在實際的使用中刻畫1到3層即可）。

且無論形狀、色彩如何變化，這些細(xì)節(jié)都如影隨形、色彩都隨變而變~可節(jié)省大量重調(diào)細(xì)節(jié)或盲目選取配色的時間！

細(xì)節(jié)、品質(zhì)和效率，一石三鳥，兼而得之！

（近期看到設(shè)計圈有討論“網(wǎng)頁雕花不可取”的課題，假如讓細(xì)節(jié)成為習(xí)慣，讓美感成為直覺，雕花也便只是普通設(shè)計行為而已。）

案例歷練：

后記：

疊柔配色法：無招勝有招~把抓不住的感覺交給精密的計算機，科學(xué)化進行你的設(shè)計。
更短的時間，更高的品質(zhì)，你，值得擁有~……
另：方法是死的，人是活的，配合色階、曲線、色彩平衡等，還可以玩出更多花樣來……

分享來自：TGideas-騰訊游戲官方設(shè)計團隊