那些配色網站的正確使用方式

相信大部分人都使用過在線配色工具或在線配色網站,那麼使用這些工具或網站來配色,真的就能得到正確美觀的效果麼?當然不能。原因很簡單,如果使用這些工具就能輕鬆完成配色工作,那麼就不需要設計師了,隨便找一個不懂色彩的人都可以替代我們。

因此本期的教程我們就來談談,如何正確的使用在線配色工具。首先,我推薦幾個在線配色網站給大家。

這個網站都是世界知名品牌、企業公司、知名網站的配色,而且還提供了快速下載的選項,單獨的去點擊色彩,就可以完成複製了。

這個網站據說是一位設計師在二十四小時內獨立開發完成的,這上面也有一些比較漂亮的色彩組合,當我們把鼠標移動到不同的水滴上,就會顯示這個顏色的色值了。

這個網站只需要按空格鍵,就可以快速的生成配色,每次都會出現由五種顏色組合成的色卡。這裡不僅會顯示顏色的代碼,而且當我們點擊某一顏色時,也會出現這個顏色不同純度明度的選項,並且還可以通過滑塊來對色彩進行調整。

這個網站同樣為我們提供了非常多的色彩組合,每個組合都有四種顏色,當我們點擊某一顏色時,就會彈出相對應的顏色參數,可以很輕鬆的使用,非常方便。

640-6.jpeg

類似這種配色網站有很多,雖然這四個網站不一定是最好的,但是配色網站都大同小異,重要的不是你知道多少這種網站,而是你是不是真的會用。

640-7.jpeg

我相信現在肯定有的人心裡是這樣想的。

640-8.jpeg

沒關係,我是這樣想的。下面就讓我們用事實說話。

這個界面的版式部分已經編排好了,這裡我們就嘗試一下從我們提供的網站中,隨便挑選一組顏色來填充試試。

我們就從這個網站上尋找,這裡我們選擇了這組純度都較高且非常漂亮的色彩組合。

單看這組顏色還是挺漂亮的,那我們就把它隨意的填充在左側的界面上,我們看最終的效果怎麼樣呢,並不好對吧,可以說配色毀了這個界面。

640-12.jpeg

如果你還是不服的話,沒關係我們再試一個。

這個網站之前我們說過,都是比較知名品牌的用色,按理來說色彩搭配應該是沒問題的,這裡我們就選擇大家比較熟悉的500px的配色。

填充到界面之後大家感覺如何呢,如果我說慘不忍睹應該不過分吧。所以,我們得出一個結論:直接使用在線配色網站的顏色是行不通的。下面我們就來看看到底該怎麼使用。

640-15.jpeg

首先就是搭建版式,要想做好配色版式一定不能太差,如果版式一塌糊塗的話,那麼配色再好也無濟於事。

版式完成之後就需要確定色彩的依附載體,說白了就是色彩使用的地方,比如這個界面中,首先我們可以填充的就是背景。

640-17.jpeg

其次呢就是圖片的顏色,當然圖片本身就帶有色彩,這裡為了方便理解我做了去色處理,大家平時沒必要這麼做,但是圖片的色彩一定要事先考慮好。

然後就是版面中的色塊。

最後就是文字部分,雖然文字可以是有彩色也可以是無彩色,但無論怎麼樣,我們都要做到心中有數。

色彩的依附載體確定完之後,接下來需要思考的是,想讓畫面通過色彩傳遞出什麼樣的氣質或風格。

由於這裡提供了品牌和相關圖片,所以案例的風格定位就比較簡單了。比如具象的有:水、游泳、女性、性感、護膚品。抽象的比如清涼、活力、素雅、清新、文藝等等。


根據這些信息,我們確定了畫面的主色相,這裡我們選擇藍色,可以說是沒有任何問題的。

640-23.jpeg

同時也可以為畫面確定主色調,這裡我們就暫定明色調或淡色調。

前期的準備工作已經做完了,接下來就要根據我們的設計需求選擇適合的網站。

什麼叫適合的網站呢?比如這個界面之前我們已經分析過了,能夠填充顏色的部分有背景、色塊、文字,所以我們可以得出三到四種的色彩搭配是最合適的。

所以我們就要根據色彩數量來篩選網站。比如這個網站,它提供的色彩搭配數量多的十幾個少的就一個,如果我們從這裡選就會浪費很多不必要的時間,所以就可以先PASS了。

640-27.jpeg

而這個網站都是五種顏色,也不適合我們色彩的使用的數量,所以也可以PASS掉。

而剩下的這兩個網站都是四種顏色,所以從它們當中挑選就可以了。那怎麼挑選呢,首先我們可以找到含有藍色的色卡。

640-29.jpeg

我們就以這個網站為例。

我們從這個網站上提取了十個色卡然後開始篩選,因為我們不可能全部都用。因為之前我們已經確定了畫面的主色調為明色調或淡色調,所以我們先PASS掉色調不符的組合。

640-31.jpeg

接下來根據色彩關係進一步篩選,比如使用同類色還是對比色,這個就要根據風格定位來選擇了,因為我們不想讓畫面是一種單調的風格,所以這裡我們就去掉了同類色的組合。

640-32.jpeg

現在只剩下四個色卡了,再往下篩選就沒那麼容易了,所以我們就要結合風格定位來分析。

640-33.jpeg

首先這組顏色除了帶有藍色和無彩色外,就是一個淡棕色,所以這個色彩會對畫面產生很重要的影響,但是這個色彩又不符合我們的風格定位,所以也可以去掉。

640-34.jpeg

而剩下這三組色彩其實從理論上來說都符合我們的風格定位,比如藍色的清涼、綠色的健康、粉紅的女性、黃色的活力、白色的純潔等等,都包含在內了,所以這時候選擇哪組色彩就要看你想突出哪種風格了。

那麼這裡我想突出清涼、乾淨、並且帶有一些活力這樣的感受,所以我選擇了這組配色。

接下來就到了後期部分也就是操作的部分。選擇好色卡之後我們先要分析它們之間的關係,比如這組顏色從大的範圍來看可分為藍色和黃色,而在藍色當中又分為深藍和淺藍,剩下的就是白色。

分析完之後我們要確定色彩的地位,我們已經確定了藍色為主色,而這個畫面中的主色就是面積最大的背景色,但是這裡有兩個藍色應該選擇哪個呢?這裡我們還是要依據風格定位,比如清涼、清新、雅緻等印象一定是淡藍色能體現出來的,深藍色不行,並且淡藍色與圖片的色調也比較接近能夠很好的融合在一起,所以我們用淡藍色來填充背景。

然後從深藍色、黃色、和白色當中選擇一個填充文字和兩個比較重要的色塊,由於背景是淡藍色,如果文字再填充黃色或白色的話識別性會很差,所以文字我們填充深藍色。

640-39.jpeg

這樣主色就是淡藍色,副色是深藍色,而黃色就可以當作點綴色來使用了,所以我們用黃色填充文字下方的色塊和一些需要點綴的地方。

剩下的三個色塊保留白色就可以了,白色的調和會讓畫面顯得透氣一些,不然整個畫面都是有彩色就會顯得有些悶。

到這裡我們已經把提取的顏色全部填充到了這個版式當中,可以說與之前隨意填充的那兩個相比已經好了很多。但是這裡還是有一些問題的,所以還需要進一步對細節進行微調。

現在這個畫面的配色有什麼問題呢?最明顯的就是黃色的純度有些高了,在這個畫面中有些搶眼,而我們知道黃色是充當點綴作用的,所以我們要降低黃色的純度、提高明度。

640-43.jpeg

調整完黃色之後我們發現,文字的深藍色在黃色的襯托下對比就有些強了,所以針對深藍色我們也要適當的做一些調整。

那麼這個配色就完成了,可以說和我們預期的風格定位是相一致的,並且也很美觀。下面我們可以換一組顏色試試。

之前我們說過這三組色卡都是可以的,那我們就換一個使用。

同樣我們還是先來分析這組色彩之間的關係,大致可分為藍色、綠色、粉色,而綠色當中又分為深綠和淺綠。

先將圖片的色彩還原,之後就是確定主色,因為這裡我想與之前的案例呈現出不一樣的感覺,所以我們不選擇藍色而選擇粉色為主色填充背景,這樣畫面的感覺就偏女性氣質多一些。

然後就是文字,雖然我們沒有用藍色作為主色,但是根據我們的風格定位,這個畫面也是需要藍色的,所以就用藍色來填充文字。

最後就剩下兩個綠色,而這裡我們用淺綠色來填充色塊,為什麼是淺綠色呢?因為我們要考慮文字的識別性,深綠色和藍色的純度明度相差不多,所以它們的對比效果就會比較弱。

640-51.jpeg

而白色作為很好的調和色,也並不需要調整。最終的效果怎麼樣呢?同樣這裡也是有調整空間的。

首先就是背景色有些偏深了,所以我們減淡背景色,並且在色相上稍微調得偏紫一些,這個顏色的選擇是參考了左下角的圖片色,並非是平白無故出現的。

640-53.jpeg

然後再看這裡的綠色,顯得有些臟也就是偏灰,所以我們也可以對綠色進行一下調整讓它變亮一些,這樣不僅文字的識別性得到了改善,而且也美觀了很多。

而文字的識別性雖然得到了改善,但還可以更好,所以加深一下藍色,那麼這個案例到這裡就可以了。

最後我們來看一下這兩個方案,無論是色調、氣質、風格、還是美感都是符合我們前期定位的。但我相信一定有人會有質疑,不是教如何使用在線配色工具嗎,怎麼到最後又變成人為的調整了,這裡當然不是在逗大家玩,因為配色的確就是這樣一個複雜思考、反覆調整的過程,而不是簡單的吸取、填充兩步就可以了,所以無論是配色工具,還是提供色彩搭配的網站,頂多也只能作為我們配色的參考,而不能當作是我們配色的全部。


本期教程到這裡就結束了,感謝大家的觀看和支持,如果你認為我們的教程,對你有一點點幫助,那麼也請你幫助我們傳播給更多的人。我是本期的講師無我,我們以後見,拜拜。


本文作者:研习社(微信公眾號:yanxishe2017)

本文出自:你真的会使用在线配色工具吗?

責任編輯:BFA 簡報 編輯部

 

簡報小聚 #49 2019 年 8 月聚會

8 月 22 日|台灣首個簡報主題溝通社群

BFA 簡報小聚是一個以簡報溝通為主題的交流聚會,每次聚會由「主題分享」與「自由交流」兩個環節組成。「主題分享」將由三位講者 (Before, After, Pro Speaker) 依次帶來 20 分鐘的簡報溝通故事、經驗或技巧分享。

而在下個月的聚會,Before Speaker 將在與三位駐場簡報人一對一交流 #結構企劃 #視覺呈現 #訊息傳遞 後再次登台,成為 After Speaker。我們希望通過定期的聚會讓每一位參與的夥伴們都能看到簡報溝通力提升後,帶來的改變力量。

歡迎各領域朋友一起來聽三位講者分享簡報溝通經驗及技巧,並與現場的職場人士交流,渡過不同體驗的夜晚。