當(dāng)你在設(shè)計(jì)網(wǎng)站時(shí)，采用的顏色會(huì)傳達(dá)出截然不同的思想和情感，所以為你的品牌選取適合的顏色極其的緊要。例如，如果你給美國(guó)的頂級(jí)沙灘設(shè)計(jì)網(wǎng)站，和你創(chuàng)作一個(gè)像Groppon一樣的在線商城，你肯定希望用不同的配色設(shè)計(jì)它們，由于它們傳達(dá)的是不同的信息——一個(gè)網(wǎng)站傳達(dá)的是讓人心情放松，而另一網(wǎng)站傳達(dá)的是因?yàn)樽隽艘淮螛O其棒的交易而讓心跳加速興奮。
本指南討論的主題是關(guān)于網(wǎng)站和平面設(shè)計(jì)的色彩。進(jìn)修先進(jìn)的色彩理論最佳的手法，是通過實(shí)踐，而不是理論。但是為了提升，你必須有一個(gè)起點(diǎn)。除了有用的配色技法和觀念，你還能夠發(fā)現(xiàn)眾多寶貴的資源散落在整篇文章中。
顏色的宗旨
從藝術(shù)的角度來探索色彩，它能夠使主題更加鮮明。這就是一張繪圖和一幅繪畫緊要的差別，盡管它們能傳達(dá)相似的信息。這個(gè)原理適用于任何設(shè)計(jì)包含網(wǎng)站設(shè)計(jì)。
平面設(shè)計(jì)和網(wǎng)頁設(shè)計(jì)配色計(jì)劃技法指南
將色彩添加到設(shè)計(jì)中使畫面的表達(dá)更加豐富。圖形、字體、按鈕和超鏈接，一切都能夠在某種程度上匹配總體的基調(diào)。例如，葡萄園網(wǎng)站的顏色和水族館網(wǎng)站的顏色是不同的。為何呢？由于這是兩種完全不同類別的網(wǎng)站，它們?cè)噲D傳達(dá)不同意義、宗旨或者感情給自己的目標(biāo)受眾。
因此，當(dāng)在思考顏色時(shí)，記住，顏色很少用來做頁面的構(gòu)架的區(qū)分和創(chuàng)建。你應(yīng)當(dāng)用灰色來構(gòu)建一個(gè)部署，就能夠讓人理解到界面的整體構(gòu)架關(guān)聯(lián)。訪問者在瀏覽網(wǎng)站界面時(shí)，色彩能夠帶給訪問者更加豐富的信息內(nèi)容。
HSV色彩模型
大多數(shù)色彩理論文章探討的觀念是，每種色彩背后的思想和它們表現(xiàn)出的情感。我覺得感情的話題太主觀，固然它是準(zhǔn)確的。選取一個(gè)配色計(jì)劃，不僅僅是憑情感，相反，我要研討顏色是怎樣工作的，以及怎樣著手自己練習(xí)。
一個(gè)優(yōu)秀的開端是色相(Hue)、飽和度(Saturation)、明度(Value)（或HSV）。你可能了解這些測(cè)量顏色的術(shù)語，但是我想告訴你這些值確實(shí)極其緊要。明度是你在黑白照片上獲取的信息——就是不同色度的灰色。把一個(gè)網(wǎng)站截圖,將它轉(zhuǎn)化為灰度圖，你就會(huì)看到它的原始值。
這就是說，明度是明暗程度，表示顏色的明與暗，也被稱作亮度。色相是最基礎(chǔ)的顏色術(shù)語，通慣用來衡量實(shí)際的顏色，如藍(lán)色、紅色或黃色。色相是相當(dāng)簡(jiǎn)易的，你能夠通過記傳統(tǒng)的色輪來記住它的規(guī)律。
飽和度（或純度）與一個(gè)顏色的純度和鮮艷度關(guān)聯(lián)。能夠把飽和度看成是色調(diào)的強(qiáng)與弱、濁與清。大多數(shù)人辨別飽和度就是通過對(duì)照香蕉黃和粉筆黃的差別。粉筆色更為“發(fā)白”，似乎缺少鮮艷度，由于它的飽和度更低。從下圖的Munsell color system（孟塞爾顏色系統(tǒng)）圖表中，能夠獲取更好的了解：
孟塞爾顏色系統(tǒng)圖
這個(gè)圖是值得我們?nèi)チ私獾模捎陬伾际窍鄬?duì)的。所以，一個(gè)“冷”色，像藍(lán)色用在淺色中就不那么冷了，同樣的“暖”色，在暗色中也就不那么暖了。顏色系統(tǒng)是一個(gè)奇怪的話題，由于它常常與其它顏色相互用途。這樣聽起來好像是沒有意義的，但你能夠把它作為進(jìn)修的例子，在實(shí)際的項(xiàng)目中不斷練習(xí)。
Harmonic形式
當(dāng)選取一個(gè)配色計(jì)劃時(shí)，你有許多不同的形式能夠遵循。誠(chéng)然不是每個(gè)人都學(xué)會(huì)怎樣篩選顏色，幸好網(wǎng)絡(luò)上有許多方便的資源，來幫助我們完成這個(gè)任務(wù)。我認(rèn)為這些色彩調(diào)和的網(wǎng)頁做的很出色，但是讓我們探討有些更有意思的選取吧。
互補(bǔ)色是色輪上相對(duì)的兩個(gè)顏色，它們之間的色彩對(duì)照極其強(qiáng)烈。例如，紫色按鈕在黃色背景上極其的突出，由于它們是高對(duì)照度的配色。當(dāng)然，這還取決于每一種顏色的飽和度，通過實(shí)踐來了解是最佳的。請(qǐng)記?。簩?duì)立對(duì)照！
互補(bǔ)色
相近色在色輪上緊鄰彼此。很顯然這樣的配色計(jì)劃不會(huì)形成高對(duì)照度。但在設(shè)計(jì)圖形、banner、紋理或者背景，這些需要匹配整個(gè)網(wǎng)頁色系的元素時(shí)，這是極其實(shí)用的。畢竟在總體部署上，并非一切都應(yīng)當(dāng)是需要高對(duì)照度。
三色式是在色輪上等距隔開三個(gè)單獨(dú)的顏色，三種顏色在色輪上要呈正三角分布。當(dāng)要擺弄這種配色計(jì)劃時(shí)，務(wù)必要選出一種色彩作為主色，另外兩種作為輔助色，平衡色彩，決定它們應(yīng)當(dāng)怎樣融合整體部署。飽和度在其中扮演緊要的角色，但是整體的配色計(jì)劃仍然不會(huì)因此發(fā)生大的變動(dòng)。
三色式
分裂互補(bǔ)色極其像之前的互補(bǔ)色計(jì)劃，但稍微一些變動(dòng)。該配色計(jì)劃是從色輪上的一個(gè)點(diǎn)著手，搭配與它相對(duì)的兩個(gè)相鄰色，操作相近色來代替互補(bǔ)色中的一個(gè)。分裂互補(bǔ)色的對(duì)照依然極其強(qiáng)烈，但它并不會(huì)像互補(bǔ)色搭配那樣刺目，使人感覺不舒服，它給色彩的選取提供了一點(diǎn)回旋余地。
分裂互補(bǔ)色
四色式（矩形搭配）是最難以調(diào)和的，平衡的適當(dāng)會(huì)使畫面顯得絢麗多彩。這種配色計(jì)劃借助兩對(duì)互補(bǔ)色，它們之間隔兩個(gè)色格，這四種顏色在色環(huán)上的連線產(chǎn)生一個(gè)矩形。在設(shè)計(jì)進(jìn)程中若讓一個(gè)顏色成為主色，效益會(huì)更加，同時(shí)要留意冷暖色的平衡。我不建議在一著手就采用這種配色計(jì)劃，由于如果沒有經(jīng)驗(yàn)，很難去控制它。但是它在較大的設(shè)計(jì)中操作會(huì)顯得極其漂亮，所以它值得被牢記。
四色式
顏色對(duì)照
對(duì)照是網(wǎng)站設(shè)計(jì)的永恒話題。對(duì)照度是頁面上的兩個(gè)對(duì)象之間的清晰程度。最值得留意的包含段落、鏈接和標(biāo)題文本。如果文本和背景顏色之間沒有足夠的對(duì)照，那么文字就很難閱讀(太亮或太暗)。
最安全的選取是始終退回到一個(gè)明暗尺度——灰色在白色上或白色在灰色上。深色的文字在亮色的背景上更加明顯，反之亦然。然而，有些顏色時(shí)常形成一種不和諧的效益，如紅色和綠色。這種對(duì)照在某些情形下是精美的藝術(shù)， 但不是任何情形下。在部署當(dāng)中，如果遭遇顏色豐富的地方，在給鏈接和按鈕用色時(shí)要極其小心。
顏色對(duì)照
看Duplos的網(wǎng)頁，你能夠看到有些顏色不同的對(duì)話氣泡，操作相同的白色文字。因?yàn)楸尘邦伾珘蛏?，文字在種種顏色背景下都可讀。這種不是單一的基于文本的界面，值得我們?cè)谠O(shè)計(jì)中去進(jìn)修追求。
考慮一下，圖標(biāo)或具備行徑召喚能力的按鈕，在設(shè)計(jì)中所需要的對(duì)照度級(jí)別。和諧的高對(duì)照度元素，自然能引起人們地關(guān)注。當(dāng)某個(gè)按鈕或者注冊(cè)區(qū)域需要更多的關(guān)注，高對(duì)照度往往是一個(gè)很好的修復(fù)計(jì)劃。顏色如果操作得當(dāng)，能形成均衡的對(duì)照。
防止純黑
從美學(xué)界獲取有些建議，就是防止純黑色。當(dāng)你看到現(xiàn)實(shí)生活中的物體，你幾乎看不到純黑色。實(shí)際看起來很暗，但它的HEX色值（十六進(jìn)制）不太可能是＃000。你甚至能夠試試拍攝照片，并在Photoshop中檢測(cè)它的HEX色值。
近期我發(fā)現(xiàn)了Ian Storm Taylor寫的一篇文章， ，題目叫做《不要操作黑色》。它指出，通過防止在界面上操作純黑色，能更真實(shí)地反映現(xiàn)實(shí)世界。這可能是一個(gè)有偏差的說法，不過近些年來，我發(fā)現(xiàn)這是一個(gè)極好的建議。
為了實(shí)踐這一觀念，盡量防止在較亮的背景上操作＃000。取而代之，選取一個(gè)暗灰色，可能是混合色（深藍(lán)色，深綠色，深橙色等）。我一直覺得，在白色背景上的深灰色文字，比純黑色文字的可讀性高出10倍。
純黑色與其它顏色相比，反差極其大。這一點(diǎn)讓我很苦惱，但即使是一點(diǎn)積極的差別，還是有差別的，所以我的建議是防止操作＃000。
提煉配色計(jì)劃
入門色彩理論，最簡(jiǎn)易的手法可能是從一個(gè)單純的顏色著手著手，并操作在線指導(dǎo)工具。沒有人與生俱來就了解色彩的選取。但隨著不斷的重復(fù)，它就變成了你的第二天性。
選取配色計(jì)劃的時(shí)間，會(huì)在啟動(dòng)一個(gè)Web項(xiàng)目并收集想法（線框圖，草圖，頁面元素）之后。這可能發(fā)生在設(shè)計(jì)一個(gè)簡(jiǎn)易的模型以前或者之后，但手法仍然是相同的。只需選取一種顏色，能夠與基于內(nèi)容、模式、風(fēng)格或情感的部署很好地工作。
提煉配色計(jì)劃
在線web應(yīng)用，如Paletton是早期的計(jì)劃設(shè)計(jì)中不可或缺的。你輸入一個(gè)單色，然后選取你喜愛的（相近色，三色式，四色式等）匹配計(jì)劃。每種配色計(jì)劃允許額外補(bǔ)充一個(gè)，與你選取的顏色相反的顏色。
Paletton是我個(gè)人最喜愛的，由于它提供了一系列基于調(diào)整飽和度的相對(duì)色。它還提供了基于你所選取的顏色，相同的顏色范圍的預(yù)設(shè)計(jì)劃。最關(guān)鍵的是，它是完全免費(fèi)的！
另一個(gè)潮流的選取是Adobe Color，它有極其相似的設(shè)立，但界面一些復(fù)雜。你依然需要基于輸入一個(gè)單色，來選取配色計(jì)劃。不過Adobe Color操作色輪展示匹配的顏，每一種顏色是靈活的，易于移動(dòng)的，在維持顏色形式統(tǒng)一性之內(nèi)。
當(dāng)談到提煉自己的配色計(jì)劃，我強(qiáng)烈建議選取這兩個(gè)中的一個(gè)。它們都是基于Web的免費(fèi)工具，并提供足夠的功能，讓你著手構(gòu)造可愛和豐富多彩的項(xiàng)目。
在線工具和Webapps
除了令人稱奇的配色生產(chǎn)器，也有有些其它工具，值得保存以供將來參考。我覺得這些工具和資源，對(duì)數(shù)碼設(shè)計(jì)，例如如圖形或網(wǎng)頁設(shè)計(jì)最有幫助。但你應(yīng)當(dāng)從中精選那些最有利于您的工作流的資源。
在線工具和Webapps
如果你正在尋找預(yù)建的配色計(jì)劃，有許多可用的網(wǎng)站。一種選取是ColorSchemer，它有大量的附加功能，如移動(dòng)應(yīng)用程序和桌面軟件。但該網(wǎng)站本身是免費(fèi)的，并提供了客戶生成的一個(gè)大型的配色計(jì)劃展示庫。
平面設(shè)計(jì)和網(wǎng)頁設(shè)計(jì)配色計(jì)劃技法指南
另一種選取是Colrd，它從圖片照片和其它圖形中提取顏色。這是一個(gè)奇怪的Web應(yīng)用程序，由于它不務(wù)必總在網(wǎng)站設(shè)計(jì)范疇頗有助益。但你能夠通過研討圖片，和它們關(guān)聯(lián)的顏色進(jìn)修到許多。普通來講，自然一直精確的，所以如果你認(rèn)真觀察生活和照中，你會(huì)從中獲取配色的新思維。
但是，當(dāng)涉及到數(shù)字設(shè)計(jì)，有眾多其它網(wǎng)站，你能夠前去進(jìn)修。一個(gè)在線工具Check My Colours，能夠?qū)⑷魏尉W(wǎng)站拉進(jìn)來，檢查文本和背景顏色之間的對(duì)照度。這是一個(gè)優(yōu)秀的資源，用來檢測(cè)其它網(wǎng)站以及您自己的設(shè)計(jì)。
平面設(shè)計(jì)和網(wǎng)頁設(shè)計(jì)配色計(jì)劃技法指南
結(jié)果以表格模式列出來，介紹了每個(gè)頁面元素，在對(duì)照度和亮度方面的差異。這當(dāng)然也不是完美的，但它確實(shí)為新的設(shè)計(jì)師，提供一個(gè)優(yōu)秀的開端。
瀏覽器擴(kuò)展
我們大多數(shù)人都知曉Adobe產(chǎn)品中有拾色器，如Photoshop或者Illustrator。這是一個(gè)迫切需要的工具，由于它提供整個(gè)色譜，以及一個(gè)RGB和HEX值。但當(dāng)前大多數(shù)Web瀏覽器插件，能夠復(fù)制一個(gè)類似的顏色選取器。