做為一名設計師，你是如何搭配合適的色彩的？

12-05

在設計PS或者網站原型圖的時候，會碰到如何搭配色彩，當然有很多色彩方案的軟體，但是同樣的色彩，所佔比例的多少，最終看到的效果都是完全不一樣的。大家在色彩搭配方面有什麼心得可以推薦下，謝謝！

推薦一個網站Color Trends + Palettes :: COLOURlovers，有很多色彩搭配範例，也包括你說的比例。不能存圖片，給你截個網頁看看吧。

推薦幾個個我常用的網站。

【1】配色網，類似樓上的中文版：
配色網-致力色彩搭配方案的交流與學習

首頁長這樣：

名字還是起得很用心的~顏色和配色點開可以看到比例和顏色值，就像這樣：

【2】一個是叫和色大辭典的網站，主攻日系顏色，名字都很好聽，數值一目了然：
日本の伝統色和色大辭典

【3】Paletten，可以選取一系列相似顏色，做PPT或者整套文件、宣傳冊的話十分實用，選定色調，它可以自動生成一系列同一色系的顏色，上圖吧，滑鼠移到色塊上也都可以顯示色彩值：
Paletton - The Color Scheme Designer

【4】TinEye Labs，這個有點跑題，它會根據你選擇的顏色和每個色彩的比例搜索出類似顏色的圖，蠻好玩的，用這個找靈感似乎不錯~
http://labs.tineye.com/multicolr/

我也推薦一個網站吧
Design Seeds?

非常小清新的網站，站長一定是個妹子……
根據圖片或者主題提供配色方案，也可以根據RGB值或者主題搜索

點擊右邊小方框中的顏色可以查看其它的palette,比如上圖中的第二種顏色

1.The Dayamp;amp;#x27;s Color/已搭配好的顏色，直接採取。

2.Material Design, Daily a€「 MaterialUp/色彩搭配的優秀作品

3.Reeoo - web design inspiration and website gallery/優秀配色作品

4.智能配色-指定顏色自動生成配色方案

5.uiGradients - Beautiful coloured gradients/漸變色

6.Material Design Colors/取色工具

7.BrandColors 取色

8.Discover Palettes

9.UI Colors - Get Awesome UI Colors for Your Website

10.Color Hunt

11.Web安全色

12.配色網-致力色彩搭配方案的交流與學習

13.Coolors - The super fast color schemes generator!

14.NIPPON COLORS圖片上傳失敗。。。這是島國的用色風格

15.Colours

16.設計配色 _圖片素材欣賞

17.http://www.colourco.de/

18.Colors - A nicer color palette for the web.

19.日本の伝統色和色大辭典

20.http://flatcolors.net/

21.https://www.coleure.com/

22.Colours

23.PS漸變下載

24.Simple Flat Colour Selector

25.Blue Colour Website Inspirations

26.Explore Colors for HTML and CSS

更多色彩搭配乾貨：

沒有設計師時，產品經理該如何給產品配色？ - 莫若的回答

------------------分享些優秀回答--------------------------

沒有設計師時，產品經理該如何給產品配色？ - 莫若的回答

網頁設計中怎麼配色？ - 莫若的回答

學習UI設計和網頁設計以及web前端分別有什麼樣好的網站推薦？ - 莫若的回答

如何做設計月薪上萬？ - 莫若的回答

UI 設計初學者應該怎樣入門？ - 莫若的回答

UI設計交流群：414632028

在界面設計領域，色彩的作用一般有兩個：渲染氣氛和指引用戶。
渲染氣氛是指，快速告訴用戶你的產品是幹什麼的，並在用戶心裡留下合適的印象。
指引用戶是指，可明確指引用戶，哪些是可點擊的，哪些是推薦的，哪些是代表警告的。
通常來說，兩者都重要。在工具性的產品里，或許色彩的指引性更重要；在帶有情感因素的產品里，如購物或社交類APP，由於產品結構簡單，個性強，往往渲染氣氛更重要。
所以當色彩的兩個作用發生衝突，懂得協調也是非常有必要的。

如果選取色彩，在過往的經驗中，先定位好產品的主色調，再定義好每個功能色。

產品的主色調決定產品想渲染的氣氛，步驟是：

1、先產出情緒版。先提取關鍵詞，如優雅/高貴/經典/品質等。然後發散找出具有視覺代表性[1]的圖片組合成視覺情緒。

2、思考情緒版色彩的規律。需要仔細思考，這些色彩的特徵。比如從情緒版中，觀察到的是中飽和度和明度的顏色較多，大面積的深色。金色和棕色居多。

3、定義好主色調，包括主色、強調色、若干個輔助色。

這時候產品的主色調就基本出來了。至於配色的原則，這個話題有點大，而且比較基礎，圖書館很多這類的書，長短調的問題，就不累述了。順便推薦一個配色工具Kluer：https://color.adobe.com/

接下來要定義每個顏色的功能作用，用來指引用戶，具體步驟是：

1、定義默認、推薦、成功、信息（可點擊）、警告和危險的顏色。

2、拓展到相應的控制項作為例子。

這個時候往往你會遇到一個問題。這就是在大眾印象中，危險和成功，一般顏色都固化成紅色和綠色了。這兩個功能顏色取色的範圍也通常比較小。有點難度的是，如果你的產品中，主基調色是紅色，而你恰好把推薦色做成紅色，則與危險色有點相似，用戶容易混淆。所以，大多產品就在使用紅色和綠色時慎重考慮。

[1]大眾看到這個圖片均有這種感覺

色彩庫，配色板，是一種引導，解決不了你日常工作中的色彩搭配需求。

更多的時候，設計師是通過抽象的感受來完成自己的色彩搭配習慣的。
小部分時候，你可以根據某個精彩案例的色彩選擇、比例來提供產出，但是一旦你的色彩選擇與使用量都與參考案例相同，這就變成了抄襲，而且關於這點，其他人最容易感知。

1.大量的配色練習
很多設計師沒有時間或者意識在過程中調整色彩變化，認為色彩是既定的，包括用量。其實不然，從我的經驗上看，色彩可以在輸出定稿前範圍內任意變化，這需要你大量的實驗，時間不夠的話就最後來定義色彩，因為骨架內容固定的時候，改變色彩是不用太長時間的。你不停的觀察每種色彩變化帶來的不同，並且在實驗結果里選擇那個你認為最舒適的方案；

2.大量的觀察
設計師對色彩是敏感的，並且一定帶有個人喜好，這可能是產品化設計及商業設計中最忌諱的事情。改變這種局限的認知，大量的觀察優秀設計，並且針對色彩感覺是不用區分細分領域的。帶顏色的都可以看看，插畫，UI，平面，工業設計,,,,,,這是一個審美力培養的過程，而顏色恰恰是其中比較容易感知的。不用刻意去衡量這個過程帶來的結果與變化，因為不知不覺你的色彩感覺與搭配方式已經形成了帶有區分的個人技能。

對於色彩能力的培養，過程不可能很短，更多的時候，我們培養的是一種感知色彩，控制色彩的抽象能力。
每一個階段，色彩在當下的流行狀態都在變化，色彩的搭配變化是永無止境的，你需要一種能力來適應變化。

色彩搭配沒有方程式，大師可能讓紅色與綠色在一起，並且很美，而對於大部分設計師來說，紅綠搭配是被禁止的。

話不多說，這是我的御用色卡，需要啥顏色直接在他身上吸就好了。。。

解答者 | Falin
SODO資深交互設計導師

我們經常說要設身處地的替用戶著想，了解用戶需求，分析用戶痛點，在做設計時設計師應當將自己視為一個局外人，無論是設計還是配色都不能依據個人的主觀判斷。如果想要做出真正優秀的設計，在色彩搭配方面我們就不得不提到色彩心理學。

圖片來源：http://info.vanpeople.com/?action-viewnews-catid-195-itemid-570782

我們不用一提心理學，就心裡發怵。心理學並不像《陰陽師》里抽ssr一般玄學，而是以理性的角度科學地進行分析，這裡我們就以UX設計中的色彩心理學，為大家簡要解釋如何進行色彩搭配。

大家在使用某一款APP的時候是否有考慮過這些問題，比如：「為什麼這些按鍵（或者任何UI的components）會被設計成這樣的形狀？又為什麼會使用這樣的顏色？」

圖片來源：http://blog.enqoo.com/page/28/?zammupqu

談到顏色，首先我們需要清楚：據研究表明很多人對顏色的辨別都有一定的障礙，我們稱之為色盲或色弱。其中9%的男性和0.5%的女性都是色盲。

圖片來源：奧林巴斯顯微鏡：人類視覺對顏色的感知

色盲並不是完全無法分辨顏色，只是對某幾種顏色的辨別中存在障礙，比較常見的有紅綠色盲、黃藍色盲以及黃綠色盲，所以在設計中就需要設計師遵循兩個原則：

1. 選擇所有色盲都能識別的配色方案。例如：不同色度的褐色或黃色，設計師應當盡量避免使用紅色、藍色或綠色

但是設想一下所有的APP界面如果都是褐色跟黃色，其實是一件挺可怕的事。針對這一情況就需要遵循下一個原則。

2. 在使用顏色代表特定意義時，應當同時使用另一種區分方案。例如：同時使用顏色和線條粗細來代表不同內容，這樣色盲者即使無法辨認特定顏色，也能看懂圖的含義

這裡建議大家在做設計時使用以下兩款網站進行模擬測試，了解色盲或色弱人士看到的效果：

http://www.vischeck.com
http://colorfilter.wickline.org

圖片來源：http://sports.sina.com.cn/golf/2014-12-24/10357458793.shtml

雖然一定程度上我們對顏色可以精確地定義為物理，但對它的感知、解釋和反應是高度個性化和多變的。比如：紅色、橙色和黃色通常被認為是「溫暖」和「刺激」。紫色、藍色和綠色通常認為產生感覺的「平靜」和「寧靜」，弱的顏色通常被認為是更遙遠的強烈的顏色。

圖片來源：http://www.meihua.info/a/66510

除此之外，在不同的文化背景下顏色也具有不同的意義，比如股票行情的走勢：

圖片來源：Steemit

在A股中，紅色表示上漲的牛市，綠色則表示下跌的熊市。原因是在中國紅色通常表示熱情、喜慶，要不我們怎麼會說紅紅火火過大年呢！

圖片來源：Binary Option Simple Strategies: in what are their benefits

但是反觀美國，紅色代表下跌，綠色則代表上漲，原因是財政赤字（也就是經濟困難）英文是red ink，所以自然紅色是代表下跌。另一方面，美元的紙幣是綠色，所以綠色在美國也代表著金錢。

實際上，由於許多隱含的聯想和假設，設計師應當特別注意謹慎紅色和綠色的使用。

顏色的搭配在一定程度上也會影響可讀性，不同的顏色搭配會產生不同的立體效果，我們稱之為「色彩實體視覺（chromostereopsis）」

圖片來源：Category:Wallpaper autostereograms

雖然我們常說」自古紅藍出cp「，但是實際上由於紅藍搭配的效果過於強烈，紅色配綠色也是同理。所以在同一頁面中應當盡量避免紅藍或紅綠搭配，老話說」紅配綠賽狗屁「還是有科學依據的。

除此之外，不知道大家有沒有發現，無論是KFC還是M記這類快餐店都大量使用了紅色、橙色和黃色，原因是這類顏色在一定程度上會引發人們焦慮不安的情緒，所以顧客不會停留太長的時間。

圖片來源：http://www.qdaily.com/tags/1941.html

反觀一些酒吧（靜吧，不是能蹦迪的）則大量使用了褐色或藍色，這是因為這種顏色會給人帶來平靜、安逸的感覺，因此顧客會想要長時間待在那裡。

圖片來源：https://www.pinterest.com/pin/562738915910114861/

根據網路分析公司KISSMETRICS的說法，顏色的選擇對消費者的購買行為有很大的影響。85%的消費者認為顏色是他們購買產品的主要原因，而52%的人由於美觀性而選擇是否再去訪問瀏覽一個網站。

最後建議大家去讀一讀COLORSCAPE指南

圖片來源：http://t.cn/RYTu9tZ

它包含658種顏色，分為56個主題。每個表項包括印刷顏色、CMYK和Munsell值、一個正式名稱、每個顏色的歷史描述和人們對每個顏色主觀反應的關鍵字，是一本非常實用的色彩指南。

以上內容，望有幫助

————————————————

歡迎關注SODO官方微信（搜索：sodo_art）

與SODO一起，每天接觸一些「大學課堂外」的新鮮事

我用Adobe Kuler 可以關聯到Adobe帳號很方便

冷暖色調的搭配問題，其他的樓上基本都說了

另外：鄙人做的設計就是別樣的抄襲（比不了大牛），所以搭配這些東西鄙人都是喜歡去dribbble看大牛的作品抄襲

作為獨立皮具製作者，也許和題主說的設計師這個定義有些距離。不過對顏色搭配這件事上，略有心得。
發一些自己近期作品，各位多擔待：

經典款的長夾：孔雀藍×薄荷綠。

不同顏色的碰撞，打磨封邊一樣很漂亮。

外面就比較素雅了，孔雀藍配米白麻線。

卡位邊緣。

最近做的卡包新配色。整體結構是在一年前看到 @花間和白馬兩位前輩的作品。很喜歡，隨後加入自己的想法修改了版型和不斷改進位作方法，最終定型。

以上。

上面大家講的都非常好，那麼如果是色盲的人群如何搭配色彩呢？
給大家分享TED演講—— 聽到的「色彩」
Artist Neil Harbisson從一出生起就是全色盲，但現在，通過一個可以將顏色轉變成聽得到的頻率設備，他重新獲取了色彩的感知。雖然他看到的世界依然是灰暗的，但他能夠「聽」到由顏色組成的交響曲合奏--沒錯，他甚至能聽到人們的臉和繪畫。

剛玩完紀念碑谷2 我覺得裡面的色彩搭配挺美的不過它的色彩都比較淡大多小清新偏女性

當然是聽甲方的了，畢竟錢在他們手裡

還是去系統的學習下吧，畢竟色彩在很多行業都用處很大，我們公司Lucy色彩是做個人形象設計的，還開設形象顧問師課程，課程裡面最重要的就是色彩搭配這塊，因為不管是後期的服飾搭配，化妝，髮型都要考慮到色彩，所以我建議去專門的機構做個培訓，至於考證就看你自己的需求了