
我推薦過不少網站配色工具,像是前段時間的 Colorinspire 我個人非常喜歡(不過好像已經無法連線有點可惜),直接推薦適合搭配一起使用的顏色組合,對於沒有靈感或色彩新手來說很有用,其他還有像是 Google Art Palette 可以從藝術品發掘色彩也是很有趣的工具。之前推薦的 Coolors、ColorSpark 則透過隨機產生的方式快速建立各種顏色,不過顏色之間可能就比較沒有相關性,而配色也應該要考量到不同顏色之間可否互相搭配,對一般使用者來說就會比較棘手。
本文要介紹的「Palettable」是一個線上色彩產生器、配色工具,不同的是 Palettable 透過互動方式協助使用者找出最合適的色彩組合,開啟網站後會先隨機顯示顏色,使用者可點選喜歡、不喜歡(或是使用快捷鍵)重新顯示顏色或將顏色固定在頁面中,最後就能得出五個搭配好的顏色組合。
依照說明,Palettable 收錄數百萬設計師的知識結晶,這些顏色可以協助我們產生漂亮的調色盤,利用控制選項亦可個別調整每個顏色,最後匯出帶有色碼的 PNG 圖片或固定網址。
Palettable
https://www.palettable.io/
使用教學
STEP 1
開啟 Palettable 後會隨機顯示一個顏色,可點選下方的喜歡或不喜歡(快捷鍵為 L 和 D),喜歡會將顏色固定並開始選擇下一個顏色,不喜歡就會繼續演算其他顏色。

每個顏色中間會有 HEX 色碼,點選下方的設定選項會出現調色盤,可以更直覺選擇你要的顏色。

STEP 2
點選喜歡後前一個顏色會被固定,接著就繼續選下一個顏色。

在我十分鐘的使用經驗,重複幾次不同的配色組合,發現 Palettable 會隨著使用者喜歡的顏色而選擇更為貼近、可互相搭配且不重複的色彩,這部份相較於其他只能隨機選色的服務來說應該更有優勢。

STEP 3
持續重複到第五個顏色,Palettable 會跳出最多只有 5 個顏色的提示訊息,點選「Export」匯出結果。

STEP 4
Palettable 支援匯出為固定網址(會帶有你剛才選定的五個顏色組合)或是輸出為 PNG 格式,如果你想把顏色組合保存下來,儲存為圖片會更易於整理和使用。

下圖就是我透過 Palettable 建立的配色組合,每個顏色會有預覽,下方帶有 HEX 色碼。

值得一試的三個理由:
- 透過互動方式協助使用者找出最合適的色彩組合
- 利用使用者選擇的顏色,計算出更貼近、可互相搭配的色彩
- 匯出為帶有色碼 PNG 圖片格式,或是產生固定網址