配色技巧,給初學(xué)者的6條網(wǎng)頁(yè)設(shè)計(jì)安全配色指南

2023-07-01 23:05:12 來源/作者: / 己有:2人學(xué)習(xí)過

配色技巧,給初學(xué)者的6條網(wǎng)頁(yè)設(shè)計(jì)安全配色指南

 

唉媽呀我的眼睛!如果你確定不想燒焦訪問者的眼睛,遵循一般的指南避開顏色面板上右上角的位置來進(jìn)行調(diào)色。

你剛剛學(xué)會(huì)了:

在上兩個(gè)部分你已經(jīng)學(xué)會(huì)了運(yùn)用色彩理論的幾個(gè)不同的方面。您學(xué)會(huì)了如何使用:

飽和度和明度

當(dāng)你在顏色選擇器上拖動(dòng)選色點(diǎn)的時(shí)候,你會(huì)看到“S”和“B”的值在改變,這分別代表“飽和度”和“亮度”。同時(shí)你會(huì)也看到色相的值保持不變。所以你是通過改變基礎(chǔ)色的飽和度和亮度來創(chuàng)建變色的。

 

配色技巧,給初學(xué)者的6條網(wǎng)頁(yè)設(shè)計(jì)安全配色指南

 

飽和度和色彩

飽和度生動(dòng)地表達(dá)了你的顏色。舉個(gè)例子來說,想象一下“我的白襯衫被溢出的紅酒滲透了”。在顏色選擇器上,飽和度取決于有多少的白色與你的基本色進(jìn)行混合。白色越少,飽和度越高。

當(dāng)你向右拖動(dòng)選色點(diǎn)的時(shí)候,你減少了白色的量,提高了飽和度,因此“S”值上升了。當(dāng)你向左拖動(dòng)選色點(diǎn)的時(shí)候,你增加了白色的量,降低了飽和度,因此“S”值下降了。

 

配色技巧,給初學(xué)者的6條網(wǎng)頁(yè)設(shè)計(jì)安全配色指南

 

這種將基本色與白色混合的方式也叫做創(chuàng)建一種“色彩”。這個(gè)詞來自于顏料混合,就是將白色的顏料與彩色的顏料進(jìn)行混合。

亮度與色度

亮度是往你的顏色中混合多少黑色。黑色越少,亮度越大。

當(dāng)你向上拖動(dòng)選擇點(diǎn)的時(shí)候,你減少了黑色的量,提高了亮度,因此,拾色器上的“B”值就上升了。當(dāng)向下拖動(dòng)選擇點(diǎn)的時(shí)候,你增加了黑色,“B”值就下降了。

 

配色技巧,給初學(xué)者的6條網(wǎng)頁(yè)設(shè)計(jì)安全配色指南

 

這種將基本色與黑色混合的方式也叫做創(chuàng)建“色度”。這同樣來自于顏料混合,就是將黑色的顏料與彩色的顏料進(jìn)行混合。

色調(diào)

當(dāng)你用灰色混合基本色時(shí)就創(chuàng)建了“色調(diào)”。當(dāng)你從色板的右上角挪出的時(shí)候,你同時(shí)降低了飽和度和亮度,也就是同時(shí)增加了白色和黑色(灰色),也就創(chuàng)建了色調(diào)。因此基本上任何時(shí)候只要你的飽和度和亮度都不到100%,這就是一種色調(diào)。

同樣,這個(gè)術(shù)語來自于顏料混合,將灰色顏料與一種彩色顏料混合。這也就是詞語“調(diào)淡”的由來。很酷吧?

單色配色方案

“單色”配色方案是你使用基本色以及基于基本色調(diào)整顏色的濃淡、陰影及色調(diào)來進(jìn)行擴(kuò)展。你剛剛已經(jīng)學(xué)習(xí)過了所有這些術(shù)語在實(shí)踐設(shè)置中的含義。因此通過挑選一種強(qiáng)調(diào)色以及它的變色,你實(shí)際上已經(jīng)創(chuàng)建了單色的配色方案。

 

配色技巧,給初學(xué)者的6條網(wǎng)頁(yè)設(shè)計(jì)安全配色指南

 

接下來呢?

在灰度基礎(chǔ)上繼續(xù)練習(xí)你的單色配色方案直到你已經(jīng)非常自信。試著用不同的色相作為你的強(qiáng)調(diào)色來進(jìn)行創(chuàng)作,嘗試在使用中改變飽和度和亮度。

當(dāng)你覺得得心應(yīng)手的時(shí)候,繼續(xù)添加一個(gè)額外的強(qiáng)調(diào)色。我建議你在第一次嘗試的時(shí)候使用橙色和藍(lán)色,因?yàn)樗鼈兪窍嗵幾詈椭C的“二人組”。然后嘗試綠色和藍(lán)色,在我的經(jīng)驗(yàn)中,這是第二簡(jiǎn)單的。這些組合是最容易打動(dòng)客戶的。

為了幫助你更好地理解網(wǎng)頁(yè)設(shè)計(jì)的配色方案,你能做的最好的事絕對(duì)是利用瀏覽器擴(kuò)展插件顏色取樣器來抓取顏色樣例,比如說Colorzilla,通過它來開始研究經(jīng)驗(yàn)豐富的設(shè)計(jì)師是怎么做的。當(dāng)你瀏覽網(wǎng)頁(yè)時(shí),看到一個(gè)非常棒的配色方案,用顏色取樣器將配色方案分離出來。分析樣例中每個(gè)色相,看看什么飽和度和亮度水平效果最好。也要注意這些顏色都是怎么相互搭配的。

如果有疑問,你可以求助于你的“安全第一”指南,這樣你就能遠(yuǎn)離“慘不忍睹”了。

 

 

**********************************************

 

 

樓主翻閱大量的詞典,參考專業(yè)術(shù)語翻譯此文

如果你覺得文章對(duì)你有幫助,請(qǐng)點(diǎn)贊讓更多的人看到