不管你是要設計一個網站、製作一張海報等等,首先最好先把你的主要配色確定下來,這樣整個視覺系統才會一致,給人留下良好的使用經驗。
如果你不是經驗老道的設計師,或是你是經驗老道的設計師但是需要新的靈感,都可以透過這些工具來讓配色策略更多元、有趣。
配色的方式有很多種,像是相近色、三元群、四方形、補色、對比色等等,在這篇就不一一贅述,因為如果你不是一個色彩學老師或是要應付考試,不知道這些理論也沒關係,知道怎麼使用好看又合宜的配色比較重要。
Adobe Capture
如果你經常使用 Adobe 系列軟體應該對這個 app 不陌生,但並不是只有使用 Adobe 繪圖相關的使用者才可以使用這個 app。一般使用者也可以用它來協助建立自己的配色系統。
app 打開後會需要登入,註冊一組帳號,或是輸入你本來就已經有的 Adobe 帳號。
▼app 打開預設會是用鏡頭來擷取環境的色彩,隨意移動畫面,它會去抓取運算出來的幾個畫面色調,基本上依它的演算法隨便一個亂七八糟的地方,都可以擷取出滿好看的配色組合。點畫面的話會凍結畫面,可以手動去調整任一個擷取圈圈直到你滿意按下快門鍵。
▼你會獲得一組色彩組合,每一個顏色有他的16進位色碼,以及RGB或CMYK色碼。
▼點上方的「調協」分頁,可以對每一個顏色再做調整,也可以看到他們在色環圖上的關係,想這一組就是有4
▼如果你想調整他的配色邏輯,可以先點上方的「調協」分頁,然後點左下角的調色盤,會出現一些常用的配色邏輯,像是三元群、補色等等。但是我發現各種選項通常都沒有它預設的配色來得好看。
▼都設定好了按右上角的「儲存」,取個你自己可以理解的名字、選取你要儲存的資料庫名稱、以及你是不是想公開分享,再按儲存,這樣就存進你的雲端資料庫了。
▼如果你有使用 Adobe 的其他影像繪圖軟體,像是 Photoshop 或是 Illustrator 登入後選取「資料庫」面板,就可以看到你之前建立的色票。
Adobe Color
Adobe 有一個線上的色彩產生器,叫做 Adobe Color ,
裡面可以自己調配各種顏色,然後他會依據你選擇的配色方式(如:三元群、補色、正方形等等)來產生相對應的顏色組合。
如果你在上述的 app 已經註冊了 Adobe Creative Cloud 的帳號,在這邊只要登入就可以把產生的色彩組合保存下來。
點選上面的「探索」分頁,可以出現很多主題的配色,利用上方的搜尋欄位,輸入你想要運用的主題,比如說你要設計一個夜市的網站,輸入「夜市」或 「night market」,就會出現很多其他使用者貢獻的相關的配色,可以在裡面找尋配色的靈感。
Color Scheme Designer
Color Scheme Design 這個網站和 Adobe Color 有點像,但是英文版的介面對有些使用者來說可能比較沒那麼直覺,它的一個優點是在畫面右下角點「examples」可以顯示這一組配色在網頁上配色看起來的樣子大概長怎樣。
日本色 Nippon Colors
如果你和我一樣很著迷於日本傳統色那種自然、低調又典雅的風格,你會喜歡 Nippon Colors 這個網站
它看似沒有16進位色碼,但其實只要把滑鼠移到 RGB 色碼的上方就會出現網頁常用的 16 進位色碼。
日本傳統色每個顏色都又一個迷人的名字,大都取自於自然,像是琉璃、紅掛花、錆淺蔥、櫻花鼠、小豆色、利休鼠、勿忘草、卯之花色等等。
維基上對日本色的解釋:日本傳統色系,指的是日本古典文學裡經常採用顏色。這些顏色常被用於和服或其他日本傳統藝術和手工藝中。
嚴格來說這不是一個「配色」的網站,只是展示日本傳統色以及他的介紹,不過因為像這種相對比較低彩度、經過多次調和的顏色,怎麼配都不會出現太大的失誤。
*這個網站有一個亮點在畫面右邊「Munsell」下面的開關把它切換成「ON」,所有色票就在天上飛呀飛的,一次在背景展示一個顏色以及她的名字和色碼。但它可不是很炫而已,它其實是展示了這些色票在孟塞爾顏色系統(Munsell Color System)裡面的位置,這個系統把彩度、明度和色相分成三個維度來展現,可以參考下圖。
Colorable
Colorable 這個網站可以自動產生符合WCAG 規範的配色,用法相當簡單,進去後直接點「Random」他就會隨機產生可供色弱/色盲辨識的「文字/背景」配色。當然你也可以自己調整滑桿,改變色彩搭配的效果,如果控制區域的滑鈕和文字顏色呈現「反白」或「反黑」,就是你調整的顏色已經不符合 WCAG了,通常是明度對比不夠強烈。
*WCAG(Web Content Accessibility Guidelines)網頁內容可及性指引,包含文字、內容、色彩、圖像、聲音,是否能讓所有人都可以接收得到,包含色弱、視覺障礙、聽覺障礙等等。
如果你想了解更多有關對色弱、色盲使用者在 UI/UX 上要注意的設計要點,可以參考這一篇:UI/UX 設計師該關注的色盲、色弱族群