Web開發(fā)者色彩搭配快速指南

我從來都不是色彩理論的粉絲掉缺,想來大概是由于自己總是不得要領(lǐng)。我也希望自己能手執(zhí)色輪戈擒,挑選出令朋友眶明、客戶和家人都驚嘆的互補色、分散互補色和三色組合筐高。

但理論總令我費解搜囱,老實說,我從來不覺得色彩理論在我的項目中有什么作用柑土。多少有點諷刺的是蜀肘,我經(jīng)常發(fā)現(xiàn)在選擇和使用了不錯的色彩后,我才對其背后的理論有更好的認識冰单。在這篇文章中幌缝,你不會看到一個色輪,取而代之的是一種你可以拿來就用的簡單的色彩挑選流程诫欠。當(dāng)然涵卵,閱讀過程中凑懂,你的潛意識會學(xué)到一些色彩理論茵宪,我強烈建議你在幾個月后重新閱讀本文并體會其中的理論,我保證阅茶,你會有更深的理解被廓。

選擇基色

我們總是能碰到像是一千萬種色彩這類荒謬的事坏晦,想想吧,一千萬。而我們只需要選擇其中一種作為我們網(wǎng)站或品牌的基色昆婿∏虻铮基色可以說是萬物之源,因此非常重要仓蛆,但不用擔(dān)心睁冬,你不會選錯的。

如何選擇初始顏色

從無到有挑出一種顏色很簡單看疙,但那不是我們要做的豆拨。對于任何一個涉及到客戶的項目,你都應(yīng)該盡可能全面地驗證你的選擇能庆。否則施禾,事情將變成你喜歡的顏色挑戰(zhàn)他們喜歡的顏色,他們就是給你錢的客戶搁胆,所以他們總是贏弥搞。

但不要過于擔(dān)心,你只需要確保你的選擇是基于某種理由的渠旁。

選擇初始顏色的方法

利用手頭的素材

如果客戶有自己的Logo拓巧,logo 的主色通常就是你尋找的初始色

不要使用競爭對手的主色

如果你的競爭對手有很強的品牌主導(dǎo)顏色,你要做的就是在自己的產(chǎn)品中排除這些顏色

想想你的目標(biāo)用戶

一家殯儀館的網(wǎng)站與一家兒童俱樂部網(wǎng)站在色彩搭配上通常會有很大差異一死,想想誰是你的目標(biāo)用戶,你想讓他們有什么樣的感受(興奮傻唾、嚴肅投慈、被呵護等等)

不要局限于思維定勢

即使你是在為年輕女孩設(shè)計網(wǎng)站,也不必非要選用粉紅色冠骄,跳出思維定勢去獲取用戶的認可伪煤。

玩一個文字游戲

如果你糾結(jié)于色彩選擇,寫下所有與你客戶業(yè)務(wù)有關(guān)的詞語凛辣,這些詞語應(yīng)該能為你提供一些線索抱既。如果仍然糾結(jié),找一個介紹顏色含義的網(wǎng)站扁誓,看看哪一個最匹配防泵。

現(xiàn)在,你的腦子里面應(yīng)該有一個基色了蝗敢,它應(yīng)該一種簡單的顏色捷泞,像是紅色、綠色寿谴、藍色锁右、黃色或者粉紅色。接下來我們將會選合適的明暗度。

我們假設(shè)你的選擇是藍色咏瑟。

選擇漂亮的基色

與其在 Photoshop 提供的調(diào)色板中糾結(jié)拂到,不如像藝術(shù)家一樣去”盜取“他人的設(shè)計決策。

首先码泞,訪問DribbbleDesignspiration 并點擊“色彩”鏈接兄旬,你將看到兩個相似的界面:

到一些可以激發(fā)靈感的網(wǎng)站上為你的設(shè)計尋找正確的顏色

通過這種方法,你可以找到具有合適明暗度的藍色浦夷。

清新活力的品牌選擇明亮一些的藍色(下圖頂部5個中的一個)辖试,對于一些較商業(yè)和嚴肅的品牌,底部五個中的一個

不同明暗度的藍色有不同的含義

在前面介紹的兩個網(wǎng)站中選擇一種明暗度劈狐,看真實的網(wǎng)站是如何使用該顏色的罐孝。你可以用CSS-Tricks 中提到的任意一種顏色拾取技術(shù)在瀏覽器中獲取顏色的值。

這么多的藍色肥缔,你要做的就是選擇最適合你的那一款

看到基色有這么多明暗不同的版本只是第一步莲兢,你還將知道如何選擇適當(dāng)?shù)念伾珌泶钆淠愕幕?/p>

創(chuàng)建一套內(nèi)聚的色彩組合

現(xiàn)在你手上應(yīng)該有一個 HEX 值了,我的是#30c9e8⌒牛現(xiàn)在要做的是從該顏色出發(fā)改艇,創(chuàng)建一套色彩組合。

當(dāng)提到創(chuàng)建色彩組合的時候坟岔,你可能會聯(lián)想到一些類似如下的圖片

[圖片上傳失敗...(image-a92d69-1525677589902)]](https://upload-images.jianshu.io/upload_images/306465-3284c48d063d0bcd.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

這類色彩組合的問題是它們通常不太實際谒兄,大多數(shù)的色彩組合包含了太多你根本用不上的顏色,尤其是考慮到我們始終會用到三種中性的顏色:

  • 白色
  • 深灰色
  • 淺灰色(可選)

如果你執(zhí)意要把中性顏色增加到8種或者9種社付,結(jié)果將會是一團糟承疲。其實你只需要再增加兩種顏色:

  • 基色 (本文中是#30c9e8)
  • 強調(diào)色

如果你能將網(wǎng)站所用顏色控制在上面提到的5中顏色中,你將會得到一個遠好于混雜了各類互補色的網(wǎng)站

你不需要一套復(fù)雜的色彩組合才能有一個漂亮的網(wǎng)站

尋找你的強調(diào)色

強調(diào)色在你的網(wǎng)站中只占很少一部分比例鸥咖,通常是為了引導(dǎo)用戶行動燕鸽,因此需要醒目。

你下一步要做的是打開Paletton并輸入基色的 HEX 值啼辣。

輸入你基色 的HEX 值

然后啊研,點擊“添加互補色”按鈕,然后你就得到你的強調(diào)色了——橙色

Paletton 自動為你挑選了一個不錯的強調(diào)色

如果你對自動產(chǎn)生的強調(diào)色不滿意鸥拧,你還可以下圖左上角的按鈕進行微調(diào)

我個人而言党远,我非常喜歡點擊三角按鈕產(chǎn)生的紅色,所以紅色將會是我的強調(diào)色富弦。當(dāng)然麸锉,Paletton自動挑選顏色的背后是有科學(xué)理論可依的,但我們暫按不表舆声。

好了花沉,下面就是我們的色彩組合了柳爽,漂亮的藍色,醒目的紅色以及搭什么都漂亮的白色碱屁。


到目前為止我們的色彩組合

現(xiàn)在唯一還缺的就是一些灰色磷脯。

添加灰色

在我的大多數(shù)項目中,我發(fā)現(xiàn)2種明暗度的灰色非常有用——深灰和淺灰娩脾,你會經(jīng)常用到他們赵誓。

深灰通常是用在文字上,淺灰則是在你需要與白色有細微差異的時候使用(白色通常都是背景色)柿赊。

你可以通過下面兩種方式中的任意一種選擇你要的灰色:

  • 還是通過 Dribbble 和Designspiration俩功,你可以在前面的搜索結(jié)果中尋找,或者采用另一種更簡單的方法碰声,輸入“藍色 網(wǎng)站”然后點擊搜索诡蜓。
  • 如果你有 Photoshop 或者類似的圖像處理軟件,可以采用 Erica Schoonmaker’s technique 方法找到適合你基色的灰色胰挑。

創(chuàng)建和諧的灰色

這里我們采用 Erica Schoonmaker’s technique 方法蔓罚,首先隨意選擇兩種灰色(一明一暗,這里我們選擇使用#424242和#fafafa)瞻颂,然后按下面的步驟操作:

  1. 創(chuàng)建兩個形狀豺谈,分別用#424242和 #fafafa 填充
  2. 插入一個顏色填充圖層在兩個形狀之上
  3. 用基色填充上一步提到的圖層
  4. 將混合模式(Blending model)設(shè)置為重疊(overlay),將不透明度調(diào)低至5%到40%之間(這里我們將其設(shè)置為40%)
  5. 用顏色拾取軟件獲取兩種新灰色的數(shù)值

我要指出的是當(dāng)基色為藍色的時候贡这,該方法效果最好茬末。基色為其他顏色時最好將不透明度調(diào)低至5%到10%之間盖矫,或者直接選出兩種灰色团南。

選擇與基色搭配的灰色雖然只是細節(jié),卻能給整體效果帶來很大提升

搞定炼彪!

到此我們的色彩搭配宣告完成, 希望你為此感到驕傲正歼!

使用你的色彩組合

我們已經(jīng)有了一套色彩組合辐马,現(xiàn)在的工作是將其應(yīng)用到你的網(wǎng)站上,這完全是另一個話題了局义,不過為了讓你有個概念喜爷,簡單舉個例子。下面分別是一網(wǎng)頁的灰度設(shè)計稿和著色后版本萄唇。

小貼士:如果你糾結(jié)網(wǎng)站的色彩檩帐,可以先通過灰度設(shè)計稿確定布局,弄清楚元素間的層級關(guān)系另萤,然后嘗試不同的顏色搭配湃密。

灰度設(shè)計稿有助你應(yīng)用色彩組合

可以看出藍色是主色诅挑,占了大量的篇幅,而且圖標(biāo)中也有采用泛源。

我們的強調(diào)色拔妥,漂亮且醒目的占據(jù)了很小的一塊區(qū)域。對強調(diào)色的使用越少达箍,其突出没龙。

深灰色用在了文字,標(biāo)志和圖標(biāo)輪廓上(即使是細小如圖標(biāo)這樣的元素缎玫,也值得去研究色彩的搭配硬纤,記住細節(jié)決定整體)。

白色和淺灰色組成了背景色赃磨。實際上可以不用淺灰色筝家,不過我發(fā)現(xiàn)這一細節(jié)的處理讓整個網(wǎng)站更加的賞心悅目。

需要強調(diào)的是煞躬,文字的顏色務(wù)必要與背景形成足夠的反差肛鹏,這樣才不會對色盲和弱視人士造成困擾。有許多工具可以幫助你尋找符合WCAG Guidelines.的顏色恩沛。兩個流行的工具分別是 WebAim Color Contrast Checker 以及 Lea VerouContrast Ratio在扰。

后記

如你所見,無需更多的色彩雷客,今天我們創(chuàng)建的這款色彩組合就能打造出漂亮的網(wǎng)頁芒珠。但這并不意味你的選擇要局限在這幾種顏色中。

如果需要搅裙,你可以將本文介紹的技巧應(yīng)用到更多顏色上

在設(shè)計過程當(dāng)中皱卓,你可能會說引入更多的顏色是合理的,這當(dāng)然沒問題部逮,只要細心娜汁,你完全可以利用本文介紹的技巧為你的色彩組合找到更多顏色。

重要的是兄朋,在色彩選擇這件事上掐禁,你做的越多就會變得越擅長,你會漸漸知道哪些顏色可以在一起颅和,哪些不能傅事。有時候,本文介紹的方法可能會產(chǎn)生低于你期望的結(jié)果峡扩,請隨意調(diào)整蹭越。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市教届,隨后出現(xiàn)的幾起案子响鹃,更是在濱河造成了極大的恐慌驾霜,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,843評論 6 502
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件茴迁,死亡現(xiàn)場離奇詭異寄悯,居然都是意外死亡,警方通過查閱死者的電腦和手機堕义,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,538評論 3 392
  • 文/潘曉璐 我一進店門猜旬,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人倦卖,你說我怎么就攤上這事洒擦。” “怎么了怕膛?”我有些...
    開封第一講書人閱讀 163,187評論 0 353
  • 文/不壞的土叔 我叫張陵熟嫩,是天一觀的道長。 經(jīng)常有香客問我褐捻,道長掸茅,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,264評論 1 292
  • 正文 為了忘掉前任柠逞,我火速辦了婚禮昧狮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘板壮。我一直安慰自己逗鸣,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 67,289評論 6 390
  • 文/花漫 我一把揭開白布绰精。 她就那樣靜靜地躺著撒璧,像睡著了一般。 火紅的嫁衣襯著肌膚如雪笨使。 梳的紋絲不亂的頭發(fā)上卿樱,一...
    開封第一講書人閱讀 51,231評論 1 299
  • 那天,我揣著相機與錄音硫椰,去河邊找鬼繁调。 笑死,一個胖子當(dāng)著我的面吹牛最爬,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播门岔,決...
    沈念sama閱讀 40,116評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼爱致,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了寒随?” 一聲冷哼從身側(cè)響起糠悯,我...
    開封第一講書人閱讀 38,945評論 0 275
  • 序言:老撾萬榮一對情侶失蹤帮坚,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后互艾,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體试和,經(jīng)...
    沈念sama閱讀 45,367評論 1 313
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,581評論 2 333
  • 正文 我和宋清朗相戀三年纫普,在試婚紗的時候發(fā)現(xiàn)自己被綠了阅悍。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,754評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡昨稼,死狀恐怖节视,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情假栓,我是刑警寧澤寻行,帶...
    沈念sama閱讀 35,458評論 5 344
  • 正文 年R本政府宣布,位于F島的核電站匾荆,受9級特大地震影響拌蜘,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜牙丽,卻給世界環(huán)境...
    茶點故事閱讀 41,068評論 3 327
  • 文/蒙蒙 一简卧、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧剩岳,春花似錦贞滨、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,692評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至绰播,卻和暖如春骄噪,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背蠢箩。 一陣腳步聲響...
    開封第一講書人閱讀 32,842評論 1 269
  • 我被黑心中介騙來泰國打工链蕊, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人谬泌。 一個月前我還...
    沈念sama閱讀 47,797評論 2 369
  • 正文 我出身青樓滔韵,卻偏偏與公主長得像,于是被迫代替她去往敵國和親掌实。 傳聞我的和親對象是個殘疾皇子陪蜻,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,654評論 2 354

推薦閱讀更多精彩內(nèi)容