Palettable 線上產生漂亮配色,以互動方式找出最合適色彩組合

最後更新於 2020 年 07 月 07 日

我推薦過不少網站配色工具,像是前段時間的 Colorinspire 我個人非常喜歡(不過好像已經無法連線有點可惜),直接推薦適合搭配一起使用的顏色組合,對於沒有靈感或色彩新手來說很有用,其他還有像是 Google Art Palette 可以從藝術品發掘色彩也是很有趣的工具。之前推薦的 CoolorsColorSpark 則透過隨機產生的方式快速建立各種顏色,不過顏色之間可能就比較沒有相關性,而配色也應該要考量到不同顏色之間可否互相搭配,對一般使用者來說就會比較棘手。

本文要介紹的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 色碼。

值得一試的三個理由:

  1. 透過互動方式協助使用者找出最合適的色彩組合
  2. 利用使用者選擇的顏色,計算出更貼近、可互相搭配的色彩
  3. 匯出為帶有色碼 PNG 圖片格式,或是產生固定網址

 

相關的文章

Colorinspire 推薦絕佳色彩組合,下個專案設計拿來試試吧!

免費資源網路社群推薦過不少配色工具,但如果不是色彩控或從事相關工作,可能還是很難從顏色中挑選出合適的組合,例如要為下一個專案計畫、概念或想法設計新的色彩組合,從顏色裡可能毫無頭緒,不確定兩三種顏色搭配是不是相得益彰,這可能會影響整體視覺感受,不如直接給出色彩預覽會更易於參考。如果你經常糾結在沒有好的配色組合,接下來要介紹的服務或許會對你有幫助。

Cover Colors 從音樂專輯封面找配色靈感,顯示主要的五種顏色色碼

想獲得色彩靈感的方式很多,舉例來說,Google Art Palette 讓使用者從藝術作品發掘配色靈感,Color Leap 可查詢不同時代流行的色彩組合,NIPPON COLORS 和 CHINESE COLORS 則有代表日本和中國傳統的顏色,都是透過一些實體獲取配色的方式。當沒有任何想法或對色彩沒有研究,Colorinspire 直接推薦你各種適合放在一起的色彩組合也很有用。

Google Search Ads Highlighter 為搜尋結果的廣告加入不同背景色效果(Chrome 擴充功能)

Google 去年在行動搜尋上推出新的樣式,最主要的外觀差異就是將網站的品牌往上移動,並將網站名稱及網站圖示(favicon)顯示於搜尋結果上方,聲稱能幫助使用者更了解資訊來源和要尋找的頁面。今年一月 Google 決定將這個更新推送到桌面版搜尋,但引來不少使用者反彈,例如搜尋結果混雜著網站標誌看起來非常凌亂,而且顯示於頂部的廣告因為標誌變小很容易引起誤點(被誤認為是一般搜尋結果),後來在十天左右就緊急將網站標誌拿掉,並決定進行新的實驗以找出更適合放置網站圖示的位置。

Google Maps Directions Link Generator 為商店建立導航及路線規劃連結

如果你是商家,網路可能是目前最主要、也最有效果的宣傳行銷管道,因此有不少人會選擇以 Facebook、Google 或 Instagram 提高能見度,也讓產品能夠被更多人分享,例如之前曾寫過「免費在 Google 刊登商家資訊教學,透過搜尋地圖提高能見度」教學,若你想在搜尋引擎或 Google 地圖上登錄商店資訊可以參考。有了商家資訊後也可能會被留下不好的評價記錄,那麼「Google 商家被留負評該檢舉刪除?或許業主更該做的是回應疑慮」一文或有助於建立正確的處理方式。

Google Forms Notifications 填完表單自動回信客製化 Email 郵件通知

最近有朋友跑來問我:Google Forms 還有其他像是 Simply Send 在送出表單後可自動回覆 Email 確認郵件的工具嗎?原來是因為 Simply Send 已經無法使用,想了一下這個功能好像經常會被用到,例如讓受試者在填寫問卷後收到確認信(包括他們的作答情形),或是透過自動回信方式將特定文件或檔案傳送給對方,都能利用這個外掛功能達成。接下來我會示範一下如何讓 Google Forms 表單可以自動回覆客製化的郵件通知,操作上不會太難,設定一次之後就能在特定表單持續運作。

回應