一般來說配色工具都是給使用者各種調色盤、色彩組合,讓我們從顏色中找尋靈感,或是直接套用可能看起來很適合的配色,雖然顏色都有預覽,使用不同方式排列呈現,但好像很難馬上聯想到運用在真正設計時的效果。之前介紹過「Happy Hues 提供 14 種調色盤組合,以範例網站展示配色效果」就是比較特別的網頁配色工具,它會列出一些色彩組合,預覽時套用到預先設計好的網頁,同時顯示不同內容類型、物件可帶入的配色示範及說明,對於網頁設計師來說非常有用。
網站配色
免費網站配色、色彩搭配、顏色分析工具、色彩顏色產生器。
Happy Hues 提供 14 種調色盤組合,以範例網站展示配色效果
![Happy Hues 網站首頁 Happy Hues 網站首頁](https://web.archive.org./web/20230306171426im_/https://free.com.tw/wp-content/uploads/2022/10/happy-hues-02.jpg)
如果你和我一樣不擅於配色,推薦可以從網站配色工具去尋找調色盤靈感,之前介紹過 Colorinspire 就是我很喜歡的色彩組合(可惜目前已經無法使用),其他像是 Veranda Colors、Adobe Color 也很有用,相較於隨機產生的顏色代碼來說我更傾向其他設計師精挑細選後的調色盤顏色,這有助於快速預覽、將顏色帶入專案計畫,例如網頁或簡報設計,不過大多數配色工具只會給出顏色和色碼,有沒有教我們如何運用色彩的網站呢?
Color review 檢查網頁配色是否符合 WCAG 規範
前幾天寫了一篇「Colour Contrast Analyser 色彩對比分析器檢查易讀性和視覺對比度」工具教學,也協助我找到更適合且符合 WCAG(網頁無障礙性指導原則)規範的顏色,簡單來說就是前景色和背景色需要達到一定的對比度才能在閱讀時更輕鬆,而且也能符合各類使用者需求,在測試工具中會有對於網站無障礙項目評分,其中可能很多人遇到的問題是顏色對比度不夠高,我們就能透過色彩工具來解決問題。
Adobe Color 提供設計師配色建議,以關鍵字搜尋主題情境相關色彩
想尋找色彩靈感嗎?我介紹過不少配色工具可善加利用,有些是單純隨機色彩產生器,也有透過音樂專輯封面產生色碼的 Cover Colors、以藝術品發掘配色靈感的 Google Art Palette 或查詢不同時代流行的配色 Color Leap 等等,都有助於使用者找出好看且合適的配色組合。此外還有一些設計相關社群讓使用者分享自己挑選的調色盤,也是獲得顏色的方法。
Picalette 以你的心情、想法產生色彩建議,更有趣的調色盤產生器
如果想尋找和顏色有關的靈感,我之前介紹過不少配色工具,可以透過各種方式產生需要的顏色組合,像是 Color Palette Generator 快速產生五個可複製色碼顏色,Palettable 以互動方式來找出最合適的配色組合,都是可以碰碰運氣的方法。此外,Cover Colors 能夠從音樂專輯封面獲取配色,Google Art Palette 則是從各項藝術館藏挖掘色彩,相較於隨機產生可能更為實際,幫助使用者建構出各種畫面風格。
Veranda Colors 為設計找出合適的配色組合,也能和其他人分享調色盤
如果你需要一些配色靈感,我介紹過許多色彩工具,通常都會給出不錯的色彩組合,只要取得色碼就能套用,還有從特定主題挖掘色彩搭配,像是 Google Art Palette 就是以全世界藝術品來分析並找出相關色彩;Color Leap 時光機則是查詢每個時代流行的配色組合;另外,Cover Colors 從音樂專輯封面搜尋取得配色靈感,這些服務都是從實體獲取色彩的方式。當然也有很多色彩工具是採用隨機顯示,相較於有明確主題可能需要更多創造力才行。
Tailwind.ink 以神經網路產生色彩調色盤,在主色彩延伸 100 種相關顏色
如果平常的工作和設計有關,對於色彩應該也會有一定的敏感度,若對顏色沒那麼熟悉,其實網路上有不少配色工具可以使用,通常會以不同方式產生調色盤,讓使用者在各種顏色裡快速選擇取用色碼,有助於降低色彩選擇的難度和時間。之前推薦過一些以特定主題收錄的色碼表,像是 NIPPON COLORS 就有代表日本傳統的 250 種顏色,BrandColors 收錄世界知名品牌使用的顏色資訊。
Color Palette Generator 線上調色盤工具,快速產生五個顏色可複製色碼
無論是開發新的應用程式、網頁設計或製作投影片時都需要用到顏色,好的色彩組合能讓整體質感提昇不少,如果對顏色沒什麼想法,也可從配色工具找尋靈感或是直接使用現成的顏色。例如之前介紹的 Palettable 透過互動方式找出最合適的色彩組合,利用 Eva Colors 深度學習的配色工具找出可搭配主品牌使用的顏色,或是從 Evernote Design 設計師必備懶人包一站式找到各種設計相關的素材資源,其中也包括色彩工具。
Palettable 線上產生漂亮配色,以互動方式找出最合適色彩組合
我推薦過不少網站配色工具,像是前段時間的 Colorinspire 我個人非常喜歡(不過好像已經無法連線有點可惜),直接推薦適合搭配一起使用的顏色組合,對於沒有靈感或色彩新手來說很有用,其他還有像是 Google Art Palette 可以從藝術品發掘色彩也是很有趣的工具。之前推薦的 Coolors、ColorSpark 則透過隨機產生的方式快速建立各種顏色,不過顏色之間可能就比較沒有相關性,而配色也應該要考量到不同顏色之間可否互相搭配,對一般使用者來說就會比較棘手。