[譯] Web 開發者須要瞭解的基礎色彩理論

• 原文地址：Basic Color Theory for Web Developers
• 原文做者：Nicole Zonnenberg
• 譯文出自：掘金翻譯計劃
• 本文永久連接：github.com/xitu/gold-m…
• 譯者：lsvih
• 校對者：Mcskiller，kasheemlew

若是你上過藝術課，必定會發現基本上全部課堂牆上都掛了一個「色輪」。在課堂上，可能須要你混合各類顏色，畫出你本身的做品。

在小學美術課上應該講過一次色（primary color，即三原色）與二次色（seondary color，間色），若是你在小學以後還上過美術課，應該還了解過三次色（tertiary color，副色）。

不過若是你在高中或者更高層次的學校中學習過藝術，那你就會發現，色輪是展現色彩理論、練習混色以及研究色彩組合的最簡單的方法。

何謂色彩理論？

色彩理論簡史：愛德華·馬奈（Édouard Manet）、埃德加·德加（Edgar Degas）、克洛德·莫奈（Claude Monet）等印象派的畫家在拋棄寫實，而開始嘗試捕捉光色時，色彩理論就誕生了。

上圖爲莫奈的 Haystacks 系列畫做

簡單來講：色彩理論研究的是人的眼睛如何將光波轉化爲顏色。匹配或類似的色彩每每有着類似或互補的波。

所以能夠將色彩理論歸結爲光波科學，來解釋爲何能夠看到各類顏色。不過在本文中，咱們只專一於兩個問題：

• 爲何有些顏色能夠完美搭配？
• 咱們該如何選擇「正確」的顏色？

顏色的搭配問題有點像「與生俱來」的東西。無論怎樣，在網頁或者 App 裏用純綠色的背景是絕對讓人沒法忍受的！

下面我列了一個簡表，當你遇到與色彩有關的問題時能夠參考：

Level 1：單色

單色就是單一的顏色，或者同種顏色的多個色調的組合。

在 Web 開發時，你能夠在這個網頁中選擇並查詢某種顏色的 Hex 代碼，而且能夠在不影響色調的狀況下讓顏色更亮或更暗。

這就是最簡單的網頁配色方法。諸如 Facebook、Twitter 之類的網站大都是用的這種單色配色方案。黑色、白色、天藍色組合而成的簡單配色，讓這些社交 App 更加簡潔。

只有用戶的頭像、連接、照片有着不一樣的顏色，這些不一樣的顏色能夠被用戶識別，更好地找到他們感興趣的帖子和帳號。

若是 Twitter 的網頁上還有其它的顏色，就會讓區分帖子、發帖人變得困難。

通常來講，即便你須要多種顏色，也得有個主色，所謂背景或者標題的顏色。

專業建議：若是你的網頁要使用單色配色，請確保陰影能夠清晰地將各個元素區分開了。不然用戶在閱讀文本或分離網頁元素時將很不方便。

Level 2：互補色

若是不想在配色中只用各類各樣的「橙色」怎麼辦？若是你想讓連接突出，但又不和導航欄或者背景色衝突怎麼辦？

若是咱們遵循基本色彩理論，解決上述問題的方案就是去尋找互補色。

能夠在色輪中一種顏色相對的位置找到它的互補色。

每種主色都與一種副色做爲互補色相對應。有種方法能夠輕鬆記住顏色如何匹配：若是一種副色和一種主色匹配，那麼副色的構成色必定不含主色。好比，紅色的互補色是綠色，而綠色由藍色和黃色組成。

專業建議：一次只增長一種顏色，並保持頁面簡單。不要爲了呈現一個完整的彩虹配色犧牲了你乾淨、好用的佈局。否則，你可能會作出上世紀 90 年代流行的經典網站（好比這個）。

繼續升級...

隨着你的設計水平的提升，就能自如地挑戰本身的極限了。配色並非什麼可怕的工做。你能夠多多關注一些配色水平高的開發者（好比他 ）和設計師。多問問本身喜歡什麼配色、不喜歡什麼配色、爲何，這樣就能創建本身的品味與品牌。

Web 開發者的色彩 Hack

試試本身手寫一些 hex 代碼、RBG 數字來嘗試各類色彩的組合與混合。若是你是 SASS 的粉絲，能夠把配好的顏色存儲在文件中，往後在項目中導入。若是你的工做是構建頁面結構而不是視覺設計（由客戶或者產品經理決定），能夠把這些顏色當作是佔位符，讓頁面看起來更加明瞭。

請確保：

• 全部東西都是可讀的。
• 連接、標題等你想要強調的東西應該與純文本有所區別。
• 用戶能夠輕鬆地區分網頁的不一樣部分（好比導航欄、主要內容、文章等）。

在線工具

• Palleton.com
• Coolors.co

Doug R. Thomas, Esq. 強烈推薦如下網站：

• Color.Adobe.com
• WebAIM — 顏色對比度檢查器 — 確保文本在背景上的可讀性。
• Coblis — 色盲模擬器 — 用色盲濾鏡來測試你的佈局截圖，以確保內容對全部受衆都是可讀的。

拓展閱讀

但願在讀完這篇文章後，你再也不爲給網站、網頁、app 配色感到犯愁。若是你對這個主題感興趣，強烈建議去了解更多相關知識。本文只是淺顯地進行了講解，你能夠讀這篇文章瞭解更多關於色調和陰影的知識。

最後我想說，在你給本身的項目進行配色時，並不存在」錯誤答案「。許多人認爲品味是天生就有的，正是它幫助你尋找美妙的設計、帶來靈感、嘗試各類組合，最終爲你和你的品牌找到最適合方案。祝你好運！

若是發現譯文存在錯誤或其餘須要改進的地方，歡迎到 掘金翻譯計劃 對譯文進行修改並 PR，也可得到相應獎勵積分。文章開頭的 本文永久連接 即爲本文在 GitHub 上的 MarkDown 連接。

---

掘金翻譯計劃 是一個翻譯優質互聯網技術文章的社區，文章來源爲 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智能等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。