前端配色有哪些原則和技巧？

12-19

c++ j2ee出身，前端就懂點css和jquery，javascript比較水，最近在做個開源小項目（是有關軟體項目管理方面的，比較傳統的OA類型的webapp），使用了一些bootstrap的控制項，總感覺自己做的配色很難看，因為自己沒有獨立的前端經驗，希望大神分享一些配色方面的經驗和技巧，讓界面看起來更美觀舒服一些。

表示有時也有學弟學妹找我幫忙吐槽下他們的設計, 在建議的時候, 可能我提到過的最多的兩個字就是 "保守". 這點跟 @Ovilia 說的其實是相似的.

駕馭豐富的顏色以及風格需要非常多的磨練與經驗, 即使我自詡審美不錯, 也基本只做一些自己擅長的風格和配色. 調顏色對於我們這種有審美沒經驗的來說是件非常痛苦的事情, 經常一個配色下來, 就是覺得不對, 但應該怎麼改, 卻可能會花上數個小時.

對於設計來說, 原則上應該是沒有限制, 跟著思想飛的, 但可惜不是誰都能駕馭得住自己的思想. 一方面是剛剛提到的經驗限制, 還有一方面則是技術限制. 不過作為一個開頭, 我覺得可以分享下學弟學妹在讓我吐槽時發現的大家常見的問題以及相關的技巧.

配色
主色調 + 灰階 + 點綴色.
知乎就是一個典型的例子. 藍色主色調, 白色背景, 灰階文字, 綠色/橙色/紅色以及圖片點綴. 其中紅色是相對萬能的點綴色, 綠色和橙色是和藍色很搭的點綴色.
灰階也是一種相對常用也比較容易掌握的配色, 能使頁面內容有層次感, 但同時不會太花哨.
這種方式比較容易做出小清新的感覺.

布局
布局其實比較隨意啦.
但是要注意的細節也就多了, 最最最常見的一個問題, 就是留白不恰當或者根本不留白. 包括很多不合格的前端甚至會直接忽略設計師稿子中的留白...
不過不管是整個頁面的布局, 還是單個圖片的布局, 都要注意一個問題, 也就是視覺重心. 我覺得要掌握這一點不是很容易, 但舉幾個例子可以感受一下.

一個實心圓與空心圓, 即使兩者大小相同, 但實心圓看起來會比空心圓更 "重", 這個時候根據使用場景可能需要縮小實心圓讓它和空心圓看起來 "重量" 相當.
Windows 8+ 的 logo, 由於左小右大, 右邊比左邊 "重", 所以居中顯示的時候兩邊到容器邊緣的距離並不應該相等, 而是稍稍向左移動, 有點槓桿原理的意思.

顏色也同樣會有視覺重心的問題, 更複雜的場景很多時候就只能靠感覺了, 不再贅述.

字體
這個其實和顏色相似, 保守一些, 駕馭不住就少用點字體.

附上一些自己的稿子供參考, 視情況再補充.

一個 twitter 客戶端設計, 看風格和解析度就知道是很多年前的了囧...

現在的 app 主頁.

突然覺得自己挺陰暗的... 來點明快的.

博客, 一看也是很多年前的風格.

自己的 DropJS MVVM 框架, 前後很明顯看得出風格差異 (前一個搞好 logo 後胎死腹中, 過了幾年才決定重新起灶). 順便掛個鏈接 vilic/drop · GitHub

咦? (可惜這個工具沒有維護了)

前端配色，其實說簡單了也就是個配色問題，應該是屬於設計的範疇。

配色的方案有很多種，同類色、鄰近色、原色、間色、對比色、互補色，分離互補色、灰調等等。
不過簡單來說我認為最重要的是一點就是，給人一種很舒服和諧的感覺。

配色基礎：
設計師配色寶典！教你從零開始學配色（一）
配色方案：

一些設計特別舒服的日本網頁：
straightline bookmark

還有就是注重細節；
從標題到配圖，到文字，顏色的選擇乃至字體的選擇都一定要統一。
之所以會覺得一些頁面特別高大上或者小清新等特質，都是因為細節處理的特別較真。

你要根據自己網站的主題，來確定配色，因為每個顏色所給人的感覺是不一樣，你可以先確定好一個顏色，然後跟這個顏色去衍生其它的配色。

關於顏色所包含不同的含義以及主題：
(以下圖片來源：Design Seeds)

橙紅色為暖色，使人感到溫暖，熱烈`活潑`快樂，能激發人朝氣，但過暖則導致緊張`興奮`煩燥。

紅色：熱烈、喜悅、果敢、奮揚。有提高食慾，升高血壓作用。易引起性急`發怒，給人以強烈的警惕性。（除非特別喜慶的事，不建議使用，飽和度太高了，讓人特別容易反感）。

粉紅色：溫柔。

藍色：幽靜、深遠、冷郁、陰鬱。。

淺藍色：消除大腦疲勞，使人清醒，精力旺盛。

綠色：健康、活潑、生氣、發展。紫色：神秘、高貴、脫俗。能消除緊張情緒。

紫色：神秘，高雅，不過有毒的東西大多也是紫色，紫色搭不好就是一種惡趣味。

咖啡色：能讓人心理趨於平靜，消除孤獨感

黑色：沉默、神秘、恐怖、純潔。

灰色：和諧、渾厚、靜止、悲哀。

青色使人產生親切`樸實`樂觀`柔和感覺。

配色不在多，而在於和諧統一。

最後想要再談一下關於飽和度的問題：
飽和度是指色彩的鮮艷程度，也稱色彩的純度。飽和度取決於該色中含色成分和消色成分（灰色）的比例。

明度是眼睛對光源和物體表面的明暗程度的感覺，主要是由光線強弱決定的一種視覺經驗。簡單說，明度可以簡單理解為顏色的亮度。

一般不建議使用飽和度特別高的配色，飽和度特別高的配色會給人特別焦躁的感覺。所謂過滿則虧吧。

包括黑白也是如此！
就拿蘋果官網舉例：

蘋果官網給人整體的配色感覺是黑白,但通過拾色器可以發現並不是如此的。

（不知道能不能看出來，最後的顏色降了明度）
在配色中適當的降低一些飽和度，能夠使畫面看起來更和諧更舒服。以上
與君共勉

雖然說這應該是設計師的事，不過前端狗很多時候都要自己做一些設計。

最近研究 SVG，發現了個基於 HSL 的配色網：Paletton - The Color Scheme Designer
簡直是太棒了！

左邊的色盤上的點是可以拖動的，拖動的時候右邊的色卡會顯示出相應的顏色。

左上方有選取點的設置，可以做出幾個配色。

這個預覽的色卡可以換成別的樣子

比如帶 Text 的

Mondrianish mosaic

這裡還可以看到用這個配色做出來的粟子：

比如這樣像葉子的

比如這樣像波點的

比如這樣像格子布的

當然了，還有在網頁上的效果

這裡有個 Color Tables

這樣就把所有顏色的 RGB、CMYK 等參數列出來。

點右邊的 Color List 還可以直接輸出成 HTML、CSS、Less等。

Color Swatches 可以輸出 PNG 色卡、Photoshop 的 ACO 色板等。

當然，這些我只是隨便點了幾下弄出來的顏色，真正使用時會考慮更多的東西，審美能力是前端必備的技能，多上設計網站看別人的作品非常重要。平時習慣收集配色圖也挺有幫助的：

哈哈哈，我要推薦一個強大而又高端大氣的配色網站了！！！
http://nipponcolors.com/
網站上有很多配色，並且cmyk，rgb值都寫的很清楚~~
顏色名稱都很低調奢華，比如這個達（應為「遠」，謝謝評論里 @zecy 提醒！）州茶：

再比如這個梔子：

柳染：

總之！交互做的很漂亮~配色很全很簡潔，我很喜歡

首先，我不大認同 Paletton - The Color Scheme Designer 是適合題主的很好的配色工具。就以 @Jasin Yip 的答案中的幾個圖為例（不是想吐槽他啊抱歉抱歉╮(╯_╰)╭），難道真的只有我一個人覺得這樣的配色其實很糟糕嗎？
其實我也是用過這個網站來配色的，早在它還叫 color scheme 的年代……但是配出來的顏色真叫捉急啊！雖然人家也是根據色彩理論，什麼互補色、相近色地幫你配，但是總覺得放在一起很不和諧啊！

而且，這個網站最大的缺點恰恰是和初學者容易犯的錯誤是一致的，那就是：過度地使用顏色。
你真的需要三組顏色嗎？你真的需要五個色階嗎？
就算是，作為初學者，你覺得你真的能駕馭這十五個顏色嗎？
你真的不會做出這樣的網頁？

如果你覺得這配色和你做過的似曾相識，甚至覺得美翻了，那麼我也是醉了……

所以啊，正確的配色網站應該戳這裡：Adobe Color CC
當然，不保證每個都是很和諧的，但是至少大部分看上去都很高大上啊：

下面進入正文，對於初學者的配色的原則和技巧。
在此聲明，這裡說的配色原則完全出自個人經驗，主要是給沒什麼色彩概念的初學者提供建議，大師當然可以遊走於規則之外，但我們這種程序猿出身的外行還是先知道門道的好。

少用色彩
「今天在知乎上看到一個前端大神的回答啦~ 我學會配色啦~~~ 看我配出來的網站多棒呀！」於是就設計出了以下這樣慘不忍睹的網頁……
（感覺是初學者典型的作品！為了博贊，我犧牲一下，把我以前配的慘不忍睹的頁面拿來給大家吸取點教訓……）

初學者切忌用很多顏色把頁面搞得「很有特色」，還是從一些比較鄰近色用起吧，比如改改飽和度之類的。
這裡說的「少用色彩」並不是說用鄰近色就比互補色和諧，而是說初學者駕馭不來啊！就比如上圖的紅色和黃色如果用得得體的話，其實也可以是非常和諧的。所以其實這個問題不僅僅是配色能解決的。
簡單地說，對於初學者，就老老實實地用白色或者非常淺的灰色作為背景色，其他地方小面積地使用一到兩種顏色，這是比較保險的做法。

如果要使用彩色的背景，那麼不要使用純度過高（即非常鮮艷）的顏色。
比如這樣的顏色

駕馭起來就要比

容易得多。
順便說一句，這種純度不高的顏色（vibrant colours）還是現在流行的一種設計風格呢~

如果是個人網站或者是比較個性化的網站，那麼顏色鮮明些還無所謂。
比如我的個人網站：Blog of Wenli Zhang （請原諒我又來做廣告了……）

雖然我很喜歡這個配色，但是還是會有人說，這個不好看啦！不過我無所謂啊，不好看就別看好了~
但是如果是很多人都會用的網站，那麼用一個彩色的背景就非常危險了，或許會讓它損失很多用戶。所以你會發現，那些各種 SNS 好像都沒什麼設計感啊，都是傻傻的白色啊灰色的。其實這是大智若愚啊，顏色如果能愉悅觀者多看兩眼，那麼就算是成功的了；千萬別讓你的顏色喧賓奪主，畢竟人家是來看內容而不是看顏色的。所以別為了展示你的配色能力而大手一揮~ （希望我的個人主頁沒有打臉……）最後提一句，我也看過不少色彩方面的書，雖然不能說完全沒有幫助，但至少沒有明顯感覺到學到什麼，所以這裡也不特別推薦了。我覺得最重要的不是配色好不好，還是那句話，這不是配色本身能決定的問題。強烈建議大家多看優秀的設計作品，最後推薦兩個設計類常見的網站，大家或許都聽說過，不過堅持看作品很重要！
https://www.behance.net/
http://dribbble.com/

學了一段時間設計，發現配色這貨對我這種色弱來說，簡直是個超級大問題。

後來做自己的項目，選取顏色就直接從 Flat UI Colors 隨便搭配兩三個好了。

謝謝大神講解，倍受感動！！！！！！！

其實配色大部分還是跟審美有關的，而培養審美實際上又是一個比較漫長的過程。想要快速學習的話，參考別人的配色是很好的學習方法。
強烈推薦 Adobe Kuler （ Adobe Color CC ）可以上傳你覺得好看的圖片或者配色方案把顏色扒下來然後載入到PS裡面也可以參考現成的配色方案。

另外其實在PS里就有Kuler的插件，可以選擇和搜索比較適合的配色方案。

這個應該是最快（tōu）捷（lǎn）的一種方法。

之前在哪看過一個方法，覺得還蠻不錯，就網上隨便找張自己覺得很好看的圖，

自然啊風景啊什麼的都可以。比如這個。然後拉進ps（也有一個配色神器叫COLOR CUBE 的）然後另存為web格式，選gif，

就得到了這一排配色。有時侯我也會選32或者8.然後再挑顏色。然後儲存顏色表，最後導進色板裡面。就可以照著來了~

關於顏色，確實費盡心思得不來。
這個網站還好 www.colourlovers.com.

你首先需要認識到，不同的顏色更深層次的差異在哪裏。否則不同的配色方案你是不知道有什麼區別的。
什麼因素導致某些顏色顯得更「高級」？

個人項目的話，選一個主色，一個輔色就夠，出錯概率低。其他，可以適當在明度，透明度上做文章。至於怎麼選這兩種顏色，對自己的選擇有信心，找自己喜歡的。沒有的話，找好的攝影作品，取裡面最主要的兩種顏色，或是看書，設計文檔。當然，前面的回答里的那些方法也都有用，以簡潔為出發點吧。

私以為配色的事已經超出了前端範疇

在左上角的儲存按鈕可以保存你喜歡的配色方案，如果你想吸取圖片中的色值，用到設計中的其他區塊，右上角的相機按鈕可以上傳自己的圖片，圖片中所有顏色都給你展示出來了，比吸管工具還全面。
http://18nk.cn/vnH6/

前端與設計師的協作應該是比較簡單的，最重要的是要規範設計提供給你的產物，通常對於前端來說，我們需要設計師提供標註尺寸後的設計稿以及各種元素的切圖文件，有了這些就可以開始布局了。考慮到Retina顯示屏以及這麼多移動設備解析度卻不一樣的問題，那麼設計師應該提供多套設計稿嗎？從網易和淘寶的做法來看，應該是不用了，我們可以按照設計稿，先做出一套布局，按照以上方法做適配，由於是等比適配，所以各個設備的視覺效果差異應該會很小，當然也排除不了一些需要媒介查詢特殊處理的情況，這肯定避免不了的。http://suo.im/1q3zia

可能很久以前，陽光帶給我們熱量，於是太陽的顏色就代表溫暖。黑夜中隱藏著掠食者，於是黑色代表神秘和恐懼……

然後這些信息被整理並記錄到某些地方，可能是DNA上的一小段鹼基序列，也可能是長輩給我們講大灰狼吃小白兔的故事……

於是我們大部分人先天或後天就認同一些顏色--感覺的對應關係（不認同的人在幾十萬年的進化史中基本都滅絕了），所以配色很簡單，想要傳達給受眾某種感覺，就把受眾現實生活中能給他那種感覺的實物顏色展示給他看

還有三點應該注意

顏色--感覺的對應是有地域和歷史造成的文化差異的，比如白色代表的聖潔和死亡，紅色代表的喜慶和鐵血。所以跨國公司的logo一般是天空藍

地球上大多數人見到的大多數光都來自光芒萬丈的太陽，所以最常用的配色環，都是紅藍黃三原色按照等邊三角形的幾何關係畫出來的。所以如果要給一個窩居一生、從未見過陽光的超級宅男設計一個他認為漂亮的網頁，一定要先用他生活環境中的光做配色依據。
還有些人，雖然生活在陽光下，但他們眼中的世界和大多數人是不一樣的，這一點可以看下《508康復法案》和世界各國信息類無障礙法律法規中的相關規定。

以上代表的是現在和過去，遵守這些規律配出的顏色不會出錯，但也很難出彩。
所以，未來的配色原則和技巧呢？

可以看看這個
Coolors – 超級快速配色方案生成器

通過敲擊「空格鍵」來查看不同的配色方案
點擊色塊可以鎖定當前顏色，以查看其他關聯的配色組合
你也可以指定一個顏色，點擊色塊下方的 HEX 顏色值即可直接編輯

1，只要你認為配色合適，就一定有人贊同你。
2，你不能滿足所有人的審美。