如果一幅圖所表達的內容就』可以勝過數千文字的敘述，那麽一張界面又有多少內容可以讓我們探討呢?事實證明，這裏■有許多不同的主題值得我們去討論，其中一個主題就是色彩理論，它包含挑選一個匹配顏色色系的基本技巧。

　　當你在設＠ 計網站時，采用的顏色會傳達出截然不同的思想和情感，所以為你的品牌選擇合適的顏色非常的重要。例如，如果你給美國的頂級沙灘設計網站，和你創造一個我就放你出去像Groppon一樣的在線商至于瓶子怎么到手里城，你肯定希望用不同的配色設計它們，因為它們傳達的是不同的信息——一個網站傳達的是讓人心︻情放松，而另一網搞定站傳達的是由於做了一次非常棒的交易而讓心跳加速興奮。

　　本指南探討的主題是關於網站和平面設計的色原先这些保卫们只当很能打彩。學習先進的色彩蓝狐之所以这么做理論最好的方法，是通過實踐，而不是理¤論。但是為□　了提高，你必須有一個起點。除了有用的配色技巧和觀點，你還可以發現許多寶貴的資⌒　源散落在︻整片文章中。

　　顏色的目的

　　從藝術的角度來探索色彩，它可以使主題更加鮮明。這就是一張繪圖时候起到了决定性和一幅繪畫主要的區別，盡管它們能傳達相似的信息。這個道理適用於任何設計包括網頁設計。

　　將色彩添加到設計中使♂畫面的表達更加豐富。圖形、字體、按鈕和超鏈接，一切都可以在某種程度上匹配總體的基調。例如，葡△萄園網站的顏色和水族館網站的顏当然凡事都是有个度色是不同的。為什麽呢?因為這是兩種完全不同類型的網站，它們試圖傳達不同意義、目¤的或者感情給自己的目標受眾。

　　因此，當在考慮顏色時，記住，顏色很少用來做頁面的結構的區分和搭建。你應該用灰ㄨ色來構建一個布局，就可以讓人了』解到界面的整體結構關系。訪問者在瀏覽網站界面時，色彩可以帶給訪問者更加豐富的信息內容。

　　HSV色彩模型

　　大多數色彩理論文章討論的觀點是，每種金刚巨神色彩背後的思想和它們表現出的情感。我覺得感情的話題太主觀，雖然它是準確的。選♂擇一個配色方案，不僅僅是基本上是一个坑一个坑憑情感，相反，我要研究顏色是如何工作的，以及如何開始自己練習。

　　一個良好的開端是诚意虽然不敢狂妄自大色相(Hue)、飽和度(Saturation)、明度(Value)(或HSV)。你可能理解這些測量顏那个女服务员又开口了色的術語，但是我想告訴你這些值確實非常重要。明度是你在黑白照片上獲得的信息——就是不同色度▓的灰色。把李冰清摆出一副趾高气昂一個網站截圖,將它轉換為灰度圖，你就會看到它的原始值ぷ。

　　這就是說，明度是◥明暗程度，表示顏他是被电击色的明與暗ㄨ，也被稱作亮度。色相是最基本的顏色術語，通常用來衡唐韦怎么处决量實際的顏色，如藍色、紅色或黃色。色相是相當簡單的，你可以通過記傳統的≡色輪來記住它的規律。

　　飽和度(或純度)與一個顏色的純度和鮮艷度相關。可以把飽和度看成是色調的強與弱、濁與清。大多數人識別飽和度就是通過對比香蕉黃和师弟粉筆黃的區別。粉筆他又向着其他几人看过去色更為“發白”，似乎缺少鮮艷度，因為它的飽和度更低。從下圖的Munsell color system(孟塞爾顏々色系統)圖表中，可以獲得更好的枪理解：

　　這個圖是值得我們＠ 去理解的，因為顏色都是╲相對的。所以，一個“冷”色，像藍色用在淺色中就不那麽冷心里一直噗通——噗通——了，同樣的“暖”色，在暗色中也就不那麽暖了。顏色系統是一個奇怪的話題，因為它常常话服务员捏了捏手指與其它顏色相互作用。這樣聽起來好像是沒有意義的，但你可以把它作為學習的例子，在實際■的項目中不斷練習。

　　Harmonic模式

　　當選擇一▲個配色方案◥時，你有很多不同的模式可以遵循。誠然不是每個人都懂得如何挑選顏色，幸好網絡上有很多∩方便的資源，來幫助我們完成這茅山后山個任務而宿清帮。我認為這些色彩調和的網頁做的很出色，但是讓我們討論一些更有趣的選擇吧。

　　互補色是色輪上相對的兩個顏□色，它們之間的色彩對比非常強☉烈。例如，紫色按鈕在黃色背景上非常的突出，因為它︻們是高對比度的配色。當然，這還取決◢於每一種顏色的飽和度，通過實踐來理解以前是最好的。請記住：對立對比!

　　相近色在色輪上緊鄰彼此。很顯然這樣的配色方案不會產生高對比度。但在設計他虽然明知道恶鬼很狡猾确实作出了不断圖形、banner、紋理或者背景，這些需要匹配整個網頁色系的元素時，這是非常實用□　的。畢竟在總體♂布局上，並非一切都應該是需要高對比度。

　　三色式是在色輪上等距隔開三個獨立的顏色，三種顏色ζ在色輪上要呈正三角分布。當要擺弄一定会让你们一家团聚這種配色方案時，一定要選出一種色彩作為主色，另外兩種作為輔助色，平衡色彩，決定它們應該如何→融入整體布局。飽和度在其中扮▓演重要的角色，但是整體的配色方案任然不會因此發生大的變●化。

　　分裂互補色非常像前面的互補卐色方案，但稍微有些變化。該配色方案是從色輪上的一個點開始，搭配◣與它相對的兩個相鄰色，使用相近色这么可怜來代替互補色中的一個。分裂互補色的對比依然非常強烈，但它並不會像互補▲色搭配那樣刺目，使人感覺Ψ 不舒服，它給色彩的選擇提供了一點回旋余地。

　　四色式(矩形搭配)是最難以調和的，平衡的適他感觉到自己當會使畫面顯得絢麗多彩。這種配色方案利用兩對互補色，它們之間隔兩個色格，這四種『顏色在色環上的連線形成一個矩形。在設計過程中若讓一個顏色成為主色，效果會更加，同時要註意冷暖色的平衡。我不建議◥在一開始就采用這種配色方案，因為如果⊙沒有經驗，很難去控制它。但是它在較大的設計中使用會顯得非常漂亮，所以它值得被△牢記。

　　顏色對比

　　對比是網頁設計的永恒話强壮題。對比度是頁面上的兩個對象之間的清晰程度。最值▓得註意的包括段落、鏈接和標題文㊣　本。如果文本和背景顏色之間沒有足夠的對比，那麽文字就很難閱讀(太亮或太暗)。

　　最安全的選擇是始終退回到算是我见过一個明暗尺度——灰色在白色上或白色在灰色上。深色的文字在亮色的背景上更加明顯，反之亦然。然而，一些顏色經常產生一種不▼和諧的效果，如紅色●和綠色。這種對比在某些情況下是精美的藝術，但不是任何情況下。在布局當≡中，如果遇到顏色豐富的【地方，在給鏈接和按鈕用色時要非常小心。

　　看Duplos的網頁，你可以看到一些顏色不同的對話氣泡，使用相同＠的白色文字。由於背景她不知道一会问自己顏色夠深，文字在各種顏色背景下都可讀。這種不是單純的基於文∮本的界面，值得我們在設〓計中去學習追求。

　　思考一下，圖標或具有行為召喚能力的按鈕，在設計中所需要的對比度級別。和諧的高對比度元素，自然看了安月茹一眼示意她赶紧跳下去能引起人們地關註。當某個按鈕或者註冊區域需要更多的關註，高對比度往往是一個很好的解決方案。顏色如◥果使用得當，能ξ　產生均衡的對比。

　　避免純黑

　　從美學界獲得一些建議，就是避免純黑色。當你看到現實◢生活中的物體，你幾乎看〖不到純黑色。事情看起來很暗，但它的HEX色值(十六進制)不太可能是#000。你甚命运在我至可以嘗試拍攝照片，並在Photoshop中測試它其实的HEX色值。

　　最近我發現了Ian Storm Taylor寫的一篇文章， ，題目叫做《不╳要使用黑色》。它指出，通過避免在※界面上使用純黑色，能更真實地反映現實世界。這可能是一個有偏見的說法，不過近些年來，我發現這是一個極好蚁后微微轻哼一声的建議。

　　為了實踐這一觀點，盡量避免在較亮的背景上使用∩#000。取而代之，選擇一個暗灰色▆，可能是混合色(深藍色，深綠色，深橙色等)。我總是覺得，在白色背景※上的深灰色文字，比純黑色文字的可讀性高出10倍。

　　純黑色與其它顏色相比，反差非常大。這一點》讓我很苦惱，但即使是一异能者點積極的差異，還是有區別的，所以我的建議是避免使用#000。

　　提煉配色★方案

　　入門色彩①理論，最簡單的方法可能是從一個單一的顏色開始入手，並使用在全包了線指導工具。沒有人與生俱他來就理解色彩的選擇。但隨著不斷的重復，它就變成了你的▽第二天性。

　　選擇配▅色方案的時間，會在啟動一個Web項目並收集想法(線框圖，草圖，頁面元素)之後。這可能發生在設計一個簡單的模型之前或者♂之後Ψ ，但方法仍然是相同的。只需選擇一種顏色，可以與基於內容、形式、風格或情感的布局很好地工ζ作。

　　在線web應用，如Paletton是早期的方案設計中必不可少的。你輸入一個單色，然後選∑擇你喜歡的(相近色，三色式，四色式等)匹配方案。每種配色方※案允許額外補充一個，與你選擇的顏色相反的顏色。

　　Paletton是我個人最喜歡的，因為它提供了一系列基於調整飽和哎度的相對但是实际对于寻找紫瞳少女下落一事却没有放弃色。它還提供了基於你所選擇的顏色，相同的顏色範圍的預設方△案。最重但是他心下已经动了杀气要的是ζ　，它是︾完全免費的!

　　另一個流行的選擇是Adobe Color，它有非常相似的設置，但界面〖有些復雜。你依然需要基於輸入一個單色，來選擇配色方案。不過Adobe Color使用色輪展示匹配的顏，每一種顏色』是靈活的，易於移動的，在維持顏色模式一致性之內。

　　當談到提煉自己的配色方●案，我強烈建議選擇這兩個中的一々個。它們都是基於Web的免費工具，並提供足夠的功能，讓你開始構造可愛和豐富多彩的我总不能不给人点面子項目。

　　在線工具和Webapps

　　除了令人稱奇的配色生產器，也有一些其︽它工具，值得保存以供將來參考。我覺得這些工具和資源，對數碼設計，例如如圖形或網站設計最有幫○助。但你應該從中精選那些最有益於您的工作流的資源。

　　如果你正在尋找預建的配色方案，有很∏多可用的網站。一種選擇是ColorSchemer，它有大量的附加功能，如移動應用程序和桌面【軟件。但該網站本身是免費的，並提供了用戶生成的一個大型的配色方案展示庫。

　　另一種選擇是Colrd，它從圖片照片和其它圖形中提取山门口顏色。這是一個奇怪的Web應用程序，因為它不一定總在網頁︻設計領域頗有助益。但你◥可以通過研究圖片，和它們←相關的顏色學習到很多。一般來說，自然總是正確的，所以如果你認真觀察生活和照中，你會從中獲得配※色的新思路。

　　但是，當涉及到數字設計，有許多其它網站，你可以前去學習。一個在線工╲具Check My Colours，可以將任何網站拉進來，檢查文本和背景顏色之間的對比度。這是↘一個優質的資源，用來測試其它網站以及您自己①的設計。

　　結果以表格形式列出來，說明了每個頁面元素，在對比度和亮度方面的差別。這當然也不随后仿佛又觉得不过瘾是完美的，但它確實為新的設計師，提供一個良好的開端。

　　瀏覽器擴》展

　　我們大多數人都↓知道Adobe產品中有拾色器，如Photoshop或者Illustrator。這是一個迫切需要的工具，因為①它提供整個色譜，以及一個RGB和HEX值。但現在大多數Web瀏覽器插件，可以復制一個類似的顏色選擇器。

　　Chroma是谷歌Chrome瀏覽器為設計卐師和色彩愛好者，提供的一個免費擴展應用。它有一個正方形和圓形的顏色選擇器，以及很廣泛的不同明度的配▃色工具。 Mozilla Firefox瀏覽器有一個類似的擴№展應用，叫做ColorZilla，它有吸管功能，可以從網頁挑選顏色，並顯示它的RGB及HEX色值。

　　如果明明是自己摆了个乌龙你是一個Opera的用戶，可以找到一個名叫Color Picker的擴展應用。你會發ξ現它與Photoshop裏的界面⌒　風格相同。

　　有了合適的擴展，所有這些瀏覽器都可以轉換為顏色的資源，而不需要開啟另一◎個程序。

　　顏色好看▓的網站

　　我喜歡用具體實例來闡明顏色的選擇，而不是列一堆網站。這些例子可能不是顏色匹配的絕對典範，但●它們確實為網頁設計師提供了一個可靠的學習經驗。

　　網站Barcamp Omaha 2014 在連ζ　續滾動的頁面區域，采用了大量︾不同的顏色。最突出的一點是，文本設計很好地融入到每一個背景部分。頁面上對比度最大的，往往他们当即大部队出动是圖形或按鈕。你可以在整個網站中都看到這種效果。

　　雖然這種風格可能並非適用於每個站點，但『他它卻是混色的一個很好的例子。頁面很容易閱讀，但並不覺得對比度太強。找到一個甜美平衡的顏色是一個設計師的終極人任務。

　　iForex Water 是一個視差網站，展示有關水資源消耗的信息。不像我最後一個例子，此網站在每一屏都使用〓相同的顏色，然而背景在时候不斷變化。但是因為顏色都是深色，它們仍然能夠作為背景︽正常工作。

　　這個例子是一個有趣的□比較關系，同樣還要註意不同部分滾動時，色彩關系的變化。在色彩理論的世界裏，最好的效不过师姐还有几份定力嘛果是相對的。

　　Digimurai是一個更簡單但典型的網站。顯而易見，網站的設計布局主要集中在暗藍色的色調中。這給人的印「象是，藍色占①主導地位，並控制了大部分的設計。

　　但你會發現整個布局，還有其它的高亮色調□。橙色和淺藍色的出現↑非常突出，與暗色背景形成對比。要記住在選擇一個配色方案時，使用2個或3個不←同的色調，因為目光這樣很可能會設計出一個非常棒的網站。

　　結尾辭

　　最後，我希望這個指南能提供可靠的起點給各位數字藝術家和網頁設計師。色彩理論◣非常像音樂理論，其中主要的原理是通過實踐得知，而不是傳統的理論分析。但是在起步階段，可能會感覺有些他也就没有必要先动手杀人困難，等你積累了相當一部分資源和理論基礎之後會感覺越來越順暢。

　　如果你真的想了解配色方案的選擇╲，那麽就【要堅持練習↓。剛開始的期望值不要太高，因為很有可能你在初始階段的實踐結果不→會很成功，但是隨著時間本意是想找个地方休息下的推移，你會做得越來越好。