色彩基礎(chǔ)

色彩學(xué)是一門綜合學(xué)科，春節(jié)利用閑暇時(shí)間看過幾本相關(guān)書籍，本打算寫一篇文章的，但是發(fā)現(xiàn)自己知道的東西太少，所以這里會(huì)做一些簡單的講解。首先，是大家都耳熟能詳?shù)囊粋€(gè)概念三原色。這里主要針對色光三原色，如圖：

也就是說屏幕上的任何一個(gè)像素點(diǎn)都是有紅綠藍(lán)三原色組成。在寫CSS時(shí)，通常會(huì)碰到rgb(0, 0, 0)之類的，其中值的范圍0-255，也就是說將紅綠藍(lán)各分成256進(jìn)行混合，表現(xiàn)出來的顏色足夠了，很多顏色人的肉眼也分不清楚。

伊頓色環(huán)

伊頓色環(huán)是色彩學(xué)家伊頓設(shè)計(jì)出來的一套色環(huán)，除此之外還有蒙塞爾色環(huán)等。

如圖所示，伊頓色環(huán)是由顏料的三原色以及三原色的復(fù)色組成的12色色環(huán)。這里有一些概念，相近色：相差30度范圍內(nèi)的色彩可以稱為相近色，在配色中一般可以用戶過渡協(xié)調(diào)。互補(bǔ)色：色環(huán)上相差180度顏色可以就叫做互補(bǔ)色，運(yùn)算上和255進(jìn)行位操作。一般用戶強(qiáng)烈的對比，谷歌微軟的品牌Logo都用雙互補(bǔ)色。有些人可能會(huì)奇怪，為什么圖中的色環(huán)沒有黑白？這里多提一句，因?yàn)楹诎撞粚儆陬伾?#xff0c;而是明度。將黑白分為12階，圖片分屬暗調(diào)、明調(diào)等。

調(diào)色的原理

調(diào)色的原理很簡單，就可以根據(jù)上面的色環(huán)進(jìn)行觀察，當(dāng)我們想要將圖片的綠色變?yōu)辄S色是，我們只需要加入等量的紅色即可。當(dāng)我們減少圖片中的紅色時(shí)，紅色的互補(bǔ)色綠色的視覺效果就會(huì)變強(qiáng)。對應(yīng)到色光三原色中，就是減少紅色，紅色的互補(bǔ)色青色就會(huì)增強(qiáng)。

PS圖片調(diào)色

PS 顏色相關(guān)的工具很多：色階、曲線、色相飽和度、色彩平衡、通道混合器、顏色查找等。這里主要介紹兩個(gè)工具進(jìn)行色彩調(diào)節(jié)：通道混合器、曲線。

通道混合器

下圖是通道混合器控制面板。通道混合器和其它色彩調(diào)節(jié)工具不太一樣：色相飽和度，色彩平衡的調(diào)色都是往里面加減顏色，但是通道混合器是通過借用其他通道的亮度來改變它的顏色，所以其它通道的顏色是不會(huì)被影響的。

下面可以通過一個(gè)列子說明這個(gè)問題，輸出通道為紅色時(shí)，紅色的亮度為100%，綠色和藍(lán)色分別為0%。當(dāng)我們把紅色滑動(dòng)到50%，綠色和藍(lán)色保持不變時(shí)，一張圖片中所有包含紅色的像素的紅色通道亮度都會(huì)減少50%，像素rgb整體的r的亮度會(huì)減少50%。

如下圖所示，我們輸出通道為紅色中的紅色減少到50%，可以看到上面紅色部分的亮度變低了一倍，其他包含紅色的部分色塊的紅色減少50%，色相會(huì)向紅色的互補(bǔ)色青色進(jìn)行偏移。

同時(shí)由于rab中的亮度變?yōu)榱?0%，100%， 100%，色彩的整體亮度失去平衡，所以無色系的部分也會(huì)向紅色的互補(bǔ)色青色進(jìn)行偏移，圖片整體看起來很怪，感覺像是有一個(gè)青色的蒙層。解決這個(gè)問題也很簡單，只需要將紅色輸出通道的整體亮度保持100%不變即可，這里直接增加50%的綠色如下圖。

這樣，上圖的操作就是把圖片中所有色塊中的紅色部分降低50%，綠色部分加50%的紅色，上圖中明顯變化的色塊有紅色的亮度降低了50%。顏色由rgb(255, 0, 0)變?yōu)閞gb(125, 0, 0)，相當(dāng)于明度降低一半，將rgb模式轉(zhuǎn)化為hsl模式可以明顯的看出倍數(shù)關(guān)系。綠色部分紅色降低50%，綠色中加50%的紅色，顏色由rgb(0, 255, 0)變?yōu)閞gb(125, 255, 0)，相當(dāng)于綠色中加50%的紅色，其他顏色以此次類推。

通道混合器處理圖片

通過上面的例子，我們知道了通道混合器的原理，結(jié)合前面所講的色光的基礎(chǔ)知識(shí)，就可以對一張真實(shí)的圖片進(jìn)行顏色處理了。比如我們可以快速的將一張夏天拍攝的照片轉(zhuǎn)換成秋天的場景。

上圖是團(tuán)隊(duì)夏天outing時(shí)在張家界拍攝的一張圖片。簡單分析下，圖片基本是由綠色和藍(lán)色組成。秋天和夏天色彩上的差別主要就是綠色的樹葉會(huì)變?yōu)辄S色。我們希望圖片中的綠色可以變成黃色，其他色彩保持不變（PS中有其他工具可以直接將綠色色相轉(zhuǎn)化成黃色），這個(gè)用上面介紹的知識(shí)，綠色中加入紅色可以讓綠色變?yōu)辄S色，也就是說我們在紅色輸出通道中將綠色向右移動(dòng)，紅色和藍(lán)色向做左移動(dòng)保持總量為100%即可實(shí)現(xiàn)。這里將輸出通道為紅色中的紅色由100%變?yōu)?30%，綠色由0%變?yōu)?00%，藍(lán)色由0%變?yōu)?70%，總量保持100% 不變。如下圖：

曲線處理圖片

下面是曲線控制面板。曲線和通道混合器類似，對rgb通道亮度進(jìn)行調(diào)節(jié)。曲線的橫軸是原圖的亮度分布，從左到右依次是0值純黑，1-254的中間灰色值，以及最右邊255的純白最亮值。橫軸上疊加著一個(gè)直方圖，顯示出原圖各個(gè)亮度上，分別存在著多少像素。

當(dāng)我們在曲線上任意取一個(gè)點(diǎn)，它的“輸入值”就是它橫軸對應(yīng)的值，即原圖中的亮度，它的“輸出值”就是它縱軸中的數(shù)值，也就是調(diào)整后它的亮度值。那么下圖中橫軸128位置原來的rgb亮度為128，通過曲線調(diào)整后，現(xiàn)在的亮度變成了178。同時(shí)，PS中的曲線采用的是spine曲線，曲線其他位置進(jìn)行了平滑調(diào)整。所以，添加完這個(gè)曲線之后，圖片的整體亮度會(huì)有一個(gè)提亮的效果。

同樣，以上面那張圖為例，我們發(fā)現(xiàn)照片的整體亮度偏低，所以加一個(gè)曲線可以迅速的將照片的整體亮度提高。我們平時(shí)處理圖片時(shí)都會(huì)根據(jù)具體的圖片去調(diào)整曲線參數(shù)，平時(shí)較常用的有提亮壓暗曲線，黑白場曲線，對比度曲線等。

feColorMatrix處理圖片

feColorMatrix 顧名思義是一個(gè)色彩矩陣，fe代表的意思是svg濾鏡。feColorMatrix則可以完全的類比到上面PS中的通道混合器。下面簡單的介紹一下svg feColorMatrix的用法：

<filter id="filterName"> <feColorMatrixtype="matrix" values="R 0 0 0 0 0 G 0 0 0 0 0 B 0 0 0 0 0 A 0"/> </feColorMatrix> </filter>

在SVG中，你可以聲明一個(gè)filter。在大多數(shù)情況之下，可以使用SVG的defs來聲明你想要的filter，然后可以在CSS這樣使用聲明的filter。

.filter-me { filter: url('#filterName'); }

type設(shè)置為matrix（type是其他類型時(shí)可以認(rèn)為內(nèi)置好的values模版）的時(shí)候，values值則可以完全類比PS中的通道混合器。第一行第一列代表的就是紅色輸出通道，第一行第二列則可以理解為上面的紅色輸出通道中綠色加入紅色的比例。那么我們上圖中的最后那張圖片由SVG feColorMatrix處理時(shí)，只需要簡單的修改values就可以達(dá)到相同的效果：

<filter id="filterName"> <feColorMatrixtype="matrix" values="-1 3 -1 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/> </feColorMatrix> </filter>

效果如下圖：

feComponentTransfer處理圖片

<feComponentTransfer> SVG濾鏡基元對每個(gè)像素執(zhí)行顏色分量的數(shù)據(jù)重映射.它允許進(jìn)行像亮度調(diào)整,對比度調(diào)整,色彩平衡或閾值的操作。其實(shí)就可以類比成PS中的曲線，不同的是PS中的曲線是spine曲線，而feComponentTransfer可以通過table或者line模擬出來。feComponentTransfer也可以設(shè)置冪曲線，但通常是作為gamma校正用。下面簡單介紹下feComponentTransfer的用法：

<filter id="table"><feComponentTransfer><feFuncR type="table" tableValues="0.0 0.7 0.9 1.0"/><feFuncG type="table" tableValues=".2 0.7 0.9 1.0"/><feFuncB type="table" tableValues=".2 0.7 0.9 1.0"/></feComponentTransfer> </filter> .filter-me { filter: url('#table'); }

feComponentTransfer重的type類型有四種，table其中一種。如下圖，將 tableValues="0.0 0.7 0.9 1.0" 時(shí)，橫軸會(huì)分為三等份：0.0 0.33 0.66 1，分別對應(yīng)的縱軸為 0.0 0.7 0.9 1.0。

同樣，以曲線那個(gè)圖片處理為例，我們在PS曲線中增加了一個(gè)輸入為128，輸出為178的點(diǎn)。那么用table表示就是：

<filter id="table"><feComponentTransfer><feFuncR type="table" tableValues="0.0 0.7 1.0"/><feFuncG type="table" tableValues="0.0 0.7 1.0"/><feFuncB type="table" tableValues="0.0 0.7 1.0"/></feComponentTransfer> </filter>

上面那張圖是沒有加濾鏡的效果，下面那張圖是加了濾鏡的效果，可以明顯的看到下面那張圖整體亮度提升了。上面的例子中只是feComponentTransfer對rgb整體做了調(diào)節(jié)，和曲線一樣它可以對每個(gè)通道進(jìn)行調(diào)節(jié)，從而實(shí)現(xiàn)和PS曲線一樣的各種效果。

CSS filter

CSS中的濾鏡效果基本都可以用svg濾鏡快速實(shí)現(xiàn)，而CSS無法實(shí)現(xiàn)的濾鏡效果，SVG基本也能快速實(shí)現(xiàn)。下面簡單的列舉幾個(gè)CSS 濾鏡，并且用svg濾鏡實(shí)現(xiàn)一遍。

filter: brightness(0.5)

上面是對明度的控制，也就是將rgb的總體明度調(diào)整到50%，而每個(gè)通道的比例保持不變。通過feColorMatrix快速實(shí)現(xiàn)：

<filter id="filterName"> <feColorMatrixtype="matrix" values="0.5 0 0 0 0 0 0.5 0 0 0 0 0 0.5 0 0 0 0 0 1 0"/> </feColorMatrix> </filter>

對應(yīng)到PS通道混合通道中的操作就是紅色輸出通道中的紅色降低50%，綠色輸出通道中的綠色降低50%，藍(lán)色輸出通道中的藍(lán)色降低50%。整體rgb亮度也會(huì)降低50%，效果如下：

同樣通feComponentTransfer也可以快速實(shí)現(xiàn)：

<filter id="brightness"><feComponentTransfer><feFuncR type="linear" slope="[amount]"/><feFuncG type="linear" slope="[amount]"/><feFuncB type="linear" slope="[amount]"/></feComponentTransfer> </filter>

上面調(diào)整的是直線的斜率，類比到PS中的效果如下：

結(jié)束語

SVG中的濾鏡很強(qiáng)大，上面列舉的兩個(gè)濾鏡可以輕松的處理圖片，但一般對圖片的處理還是會(huì)借助專業(yè)的處理軟件。通過類比，我們可以更加容易理解濾鏡的原理，也可以通過編程的方式實(shí)現(xiàn)對圖片的動(dòng)態(tài)處理。CSS filter 是一個(gè)中內(nèi)置了一些常用的濾鏡，也通過SVG濾鏡可以輕松的實(shí)現(xiàn)那些濾鏡效果。

總結(jié)

以上是生活随笔為你收集整理的SVG滤镜对图片调色的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。