[譯] 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、前端、後端、區塊鏈、產品、設計、人工智慧等領域，想要檢視更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。