當你準備設計一個「網(wǎng)站首頁」、「書籍封面」、「海報視覺」,甚至是每個人都會遇到的「簡報頁面設計」時,「顏色」可能是一個比放了什么漂亮圖片更重要的元素,網(wǎng)絡上有很多討論色彩心理學的文章都說準確的、舒適的色彩應用可以產(chǎn)生迷人的印象。
我自己也不是色彩設計的高手,但最近在研究設計師們會如何選色、配色時,發(fā)現(xiàn)了許多在線的自動配色網(wǎng)站,這些網(wǎng)站提供了很多聰明的選色器工具,或是很多具有創(chuàng)意的配色表,可以提供許多「原來可以、應該這樣配色」的好建議,甚至激發(fā)設計師們的色彩搭配靈感。
所以今天這篇文章,就讓我把這段時間收集研究的成果,一起分享出來給需要的朋友,或許因為我不是設計師所以下面的解釋不夠專業(yè),但相信這些免費的在線配色表、選色器服務,對設計師們一定有所幫助。
01/
Coolors 最大特色就是提供了免費的「自動配色器」,隨機產(chǎn)生推薦的配色結果,讓你知道那些顏色適合一起搭配使用,在快速產(chǎn)生的多組配色中,也能激發(fā)我們的設計靈感。
只要打開 Coolors 的[Generator]在線工具,按下空格鍵就能快速切換不同配色,也能在[Browser]頁面瀏覽那些設計師們推薦的經(jīng)典配色。
02/
BrandColors 收集了世界上許多知名品牌的配色表,讓我們知道一個成功品牌如何在它的網(wǎng)頁、產(chǎn)品、 logos 上做顏色設計,是非常直接有效的參考,也能讓我們下載任何一個品牌的配色表。
03/
Plartton 是一個免費而且強大的配色產(chǎn)生器,他的第一個特色是透過調色盤可以輕松的產(chǎn)生符合色彩設計原理的配色表,我們只要在調色盤中選擇一個顏色,就能自動計算顏色對比,產(chǎn)生各種設計建議。
這時候我們還能按下右下方的[ Examples ],在一個模擬網(wǎng)頁中查看這個配色呈現(xiàn)出來的實際效果。
04/
0to255 就是一個快速的顏色挑選網(wǎng)站,我們先選擇一個主要的顏色,接著就可以看到這個色系中所有顏色的對比表,方便我們挑選出一個適合的顏色代碼來使用。
05/
比起機器的配色,或許來自人的色彩設計靈感更能觸動人心, COLOURlovers 由社群用戶分享各種主題的配色靈感,你可以在這里找到婚禮、印刷、網(wǎng)頁設計的各種配色表,這些配色方法都是由不同的設計師提供,你還能看到大家的評價。
06/
Adobe Color CC:來自 Adobe 的專業(yè)選色器
Adobe Color CC 前身是 Adobe Kuler ,從 Photoshop 時代就是設計師們最經(jīng)典的配色建議工具,透過在線的 Color CC 自動調色盤,經(jīng)過專業(yè)的顏色對比模擬,讓你快速選出適合的配色方案。
我們只要在調色盤上輕松拉動鼠標,就能在專業(yè)的色彩設計原理下產(chǎn)生不同的配色結果,或者也能瀏覽 Adobe 上由專業(yè)設計師提供的[配色方案]。
07/
如何用這個顏色當界面會怎樣? uicolors 讓你挑選顏色后,可以立刻嘗試看看用這個顏色當作接口底色的實際范例,更容易找出我們想要的效果。
08/
Coleure 不只讓我們挑選喜歡的顏色,還能在右方立刻看到這個顏色搭配黑白文字或其他色彩的版面搭配效果,所見即所得的功能讓我們更容易挑出自己想要的配色。
09/
Color Palette Generator:從你的真實照片選出配色
這個網(wǎng)站讓我們只要貼上照片網(wǎng)址,就能立刻獲得照片里的配色顏色代碼。
10/
material palette: Google Material Design 自動配色器
material palette 提供了設計 Android App 時最好的接口配色建議,只要挑選兩個你想要的主要顏色,這個網(wǎng)站就會自動產(chǎn)生一個 App 接口,提供接口中可以選擇的其他配色參考。
11/
這個網(wǎng)站提供了扁平化設計中常用的色彩,只要按下喜愛的扁平化設計常用顏色,就能直接復制 Hex 色碼。
12/
看到一個網(wǎng)站設計覺得很漂亮,想知道它的顏色是怎么搭配的?那么只要到 Stylifyme 中輸入網(wǎng)站網(wǎng)址,就能立刻獲得這個網(wǎng)站的配色表啦!對設計師來說是非常實用的參考工具。
以上,就是我這陣子研究收集的配色表、選色器網(wǎng)站,其中有些在線工具的自動配色、推薦選擇功能十分便利,而有些配色建議則可以激發(fā)我們的設計靈感。
全部評論