設計師的色彩工具・15個最愛的配色網站

紀錄一些在做設計時,常使用的配色工具網站,包含尋找靈感、色彩規劃、或是一些色彩轉換的工具。會分別依照不同主題及用途去介紹

我會在製作不同風格視覺時,使用相應的配色參考,例如要著手設計一個旅遊平面稿時,因應不同的旅遊地點去考慮不同的字體配色、照片調色去製作視覺,可以讓設計出來的圖片更有情境感

地域文化色網站

Nipponcolors https://nipponcolors.com/

收錄250種日本傳統色,提供CMYK/RGB色碼,這個網站的介面很簡潔漂亮,使用的時候先設想整體的圖片最大面積色票,選定色票後整個頁面的底色會變成所選色票,然後再去滑動游標,去觀看左側其他有沒有適合與主色票配色的顏色

例如選定秋天楓葉的色調作為設計圖的主要顏色,選擇「黃丹」後畫面背景整個更改為橘色調,在左側就可以看有哪些顏色跟「黃丹」比較相稱、哪些顏色作為標題比較清楚,假使我想要做比較時尚前衛的風格,那就選定182號「鐵御納戶」作為撞色標題

中國色 http://zhongguose.com/

中國傳統色,和Nipponcolors是同樣的網站,介面也相同,使用小技巧同上。

Design Seed https://www.design-seeds.com/

Design Seed是一個外國的色彩網站兼部落格,特色是把照片中的色彩轉換成色票,網站搜索可以使用by color直接做相關色搜尋,尋找你想要的色票配色,或是by collection,依照季節、食物、自然、花卉等等的主題去做選擇,因為是美國網站,配色的氛圍較為歐美,所以在做一些比較歐美感的設計時比較常使用到。

Design Seed也是個蠻推薦設計師日常必逛的網站,剛開始接觸設計時候,我會用Design seed抓取色票的方式去練習分析一些在網路上找到的圖,去訓練自己的彩敏感度,以及配色方式,練習的過程中也能累積自己的專屬色票,歷年累積下來會發現自我風格,蠻有趣的。

有設計感又好玩的色票網站

Color Claim https://vanschneider.com/colors

這是我非常非常喜歡的網站,雖然色票不多,但張張都是極具設計感的配色卡,Color Claim是我在做品牌形象設計、LOGO,選定品牌標準色最長參考的配色網站,每一張色卡都只有兩個顏色(偶而會有幾張卡片的背景會多一個顏色)但與其他網站相比較於特別的是,他的選色與搭配特別有時尚感跟設計感

Colordot https://color.hailpixel.com/

好玩的創作型配色網站,配色有時候並沒有固定的模式,Colordot就是一個這麼自由選色搭配的網站,總有些日子會覺得怎麼做圖都不順手、怎麼配色都覺得怪、缺乏靈感時,建議你上Colordot 滑一滑,滑出自己順眼的色票,享受靈光乍現的感覺。

Adobe color https://color.adobe.com/zh/create

雖然可能每天都會使用Adobe軟體,但其實蠻多人不知道Adobe網站有很多資源供設計師使用,近年Adobe Create上的資訊與免費資源越來越豐富,可供設計師盡情享用,Adobe資料庫之龐大,只要輸入關鍵字以後,就會吐出一堆相關的色票出來,Behance 和 Adobe Stock 的創意社群還提供不同行業的色彩趨勢,色票圖片可以加入自己的資料庫,或是免費下載到電腦上。

自動配色網站

三個可以自動配色生成色票的網站,是一種比較懶惰的配色方式,在做設計時會覺得少了一些設計師的個人特色與成就感,我個人是比較少使用,偶爾會上去看一下有沒有新的色票當作參考。

Colors

https://coolors.co/

LOL Color

https://www.webdesignrankings.com/resources/lolcolors/

Colordrop

https://colordrop.io/

空間色票

Benjamin Moore油漆配色網站 https://www.benjaminmoore.com/en-us

Benjamin Moore美國一個具指標性的老牌油漆,在室內設計領域上產業的色彩趨勢也十分具參考價值,這個網站在做平面設計時較少使用,只有在做展場設計、佈置規劃、或是陳列設計、櫥窗設計時用到,或許做居家品牌相關的設計圖時,也可以參考看看。

漸層色票網站

Web Gradients https://webgradients.com/

Cool Hue 2.0 https://webkul.github.io/coolhue/

漸層色是做網頁、UI介面、數位設計最常使用的,漸層色若是用不好,會讓畫面呈現髒髒的色彩感,漸層色用得好畫面質感立刻提昇,以上這兩個可直接複製CSS code,方便網頁設計師使用,也可以複製色碼使用,有時在做插畫設計、動畫美術設定時,漸層色也很管用,用一些漸層,讓插畫更有立體感與層次。

色票工具網站

Pantone 彩通 https://www.pantone.com/hk/tc/

Pantone,每年必看年度代表色色票了,每年定下來的色票在各個業界樹立標竿,大到商業電影、空間設計、建築、時尚服飾、工業設計、產品設計,小到雜誌媒體平台的一張圖、照相app的濾鏡,都會受到Pantone流行色的影響,至關重要的色彩趨勢,不能不關注。

如果說是自學設計、或是個人接案的設計師,要購入Pantone色票也是一筆費用上的負擔,而且時不時就會出一些特別的色票,又得花費好幾千塊才能帶回家,我自己在早期有買過最基礎的Pantone coated /uncoated色票、還有Pantone CMYK色票,但其實也很少攜帶著跑來跑去(除非是要到印刷廠校色才會攜帶)

所以Pantone APP也是必備工具之一,只付一次NT$330就可以擁有全部的Pantone色票。

  • 不過要注意,還是會因螢幕不同而產生色差問題出現,我通常是在數位設計上面使用,印刷的話色差的風險太大,建議還是拿實體的色票做對照

色彩轉換工具

Pantone 轉換CMYK/RGB/HEX https://www.pantone.com/color-finder#/pick?pantoneBook=pantoneSolidCoatedV3M2

官方網站內建的色彩轉換器,可以依照選色票去作轉換,也可以輸入CMYK/RGB/HEX去尋找相應的Pantone色票

Pantone色票無法對應到所有色碼產生的色彩,還是會有色差問題出現,系統只會幫你尋找到最接近的色票

RGBto 色彩轉換工具 https://rgb.to/

通常是同時有數位與平面輸出需求的設計時會用到的網站,輸入RGB數值,會對應出所有的色碼,包含CMYK、CSS…等,在顏色轉換上很方便,另外除了對應色碼之外,這個網站還有一個功能,就是按照你輸入的色號,下方會產生建議配色,如果在配色瓶頸時,也是個可以嘗試使用看看的工具,不過我自己使用時,覺得網站生成的建議都是較為保守,通常都是提供給你一些相近色,配色方法也較傳統,少了一些些創意。

身為一個色彩控,只要講到關於色彩搭配及色感訓練,總有聊不完的話題,下次想紀錄「如何提高色感敏銳度&配色風格 — 新手設計師的每日配色練習」

--

--

¡Soy Chan! ♠︎ 設計私生活

念建築卻誤打誤撞愛上了品牌設計,做設計將近10年,本業平面設計師,初入4A廣告產業,現職於台灣的數位廣告代理商。興趣廣泛如我,也時常亂闖盪相關行業,當過品牌設計、做過品牌行銷、也拍過片、當過導演助理、當過不專業商業攝影、拍過Youtube影片、寫過部落格,最近愛上寫作,於是在這裡出沒。