如果平常的工作和設計有關,對於色彩應該也會有一定的敏感度,若對顏色沒那麼熟悉,其實網路上有不少配色工具可以使用,通常會以不同方式產生調色盤,讓使用者在各種顏色裡快速選擇取用色碼,有助於降低色彩選擇的難度和時間。之前推薦過一些以特定主題收錄的色碼表,像是 NIPPON COLORS 就有代表日本傳統的 250 種顏色,BrandColors 收錄世界知名品牌使用的顏色資訊。
網站配色
Color Palette Generator 線上調色盤工具,快速產生五個顏色可複製色碼
無論是開發新的應用程式、網頁設計或製作投影片時都需要用到顏色,好的色彩組合能讓整體質感提昇不少,如果對顏色沒什麼想法,也可從配色工具找尋靈感或是直接使用現成的顏色。例如之前介紹的 Palettable 透過互動方式找出最合適的色彩組合,利用 Eva Colors 深度學習的配色工具找出可搭配主品牌使用的顏色,或是從 Evernote Design 設計師必備懶人包一站式找到各種設計相關的素材資源,其中也包括色彩工具。
The Stocks 2 整合免費圖庫、影片、圖示和字型,單一網站快速瀏覽切換
距離上一次介紹 The Stocks 已經超過五年,前段時間無意間瀏覽到這個網站,才想起我以前好像也寫過文章,不過網站現在變得不太一樣而且內容又更完整了,非常推薦加入收藏,因為真的很方便。如果你還不知道 The Stocks,它整合各種設計相關免費資源,最早只有將一些免費圖庫整合在一起,讓找圖的使用者透過側邊欄選單快速切換各個不同圖庫網站,加速搜尋圖庫的效率。
Palettable 線上產生漂亮配色,以互動方式找出最合適色彩組合
我推薦過不少網站配色工具,像是前段時間的 Colorinspire 我個人非常喜歡(不過好像已經無法連線有點可惜),直接推薦適合搭配一起使用的顏色組合,對於沒有靈感或色彩新手來說很有用,其他還有像是 Google Art Palette 可以從藝術品發掘色彩也是很有趣的工具。之前推薦的 Coolors、ColorSpark 則透過隨機產生的方式快速建立各種顏色,不過顏色之間可能就比較沒有相關性,而配色也應該要考量到不同顏色之間可否互相搭配,對一般使用者來說就會比較棘手。
Cover Colors 從音樂專輯封面找配色靈感,顯示主要的五種顏色色碼
想獲得色彩靈感的方式很多,舉例來說,Google Art Palette 讓使用者從藝術作品發掘配色靈感,Color Leap 可查詢不同時代流行的色彩組合,NIPPON COLORS 和 CHINESE COLORS 則有代表日本和中國傳統的顏色,都是透過一些實體獲取配色的方式。當沒有任何想法或對色彩沒有研究,Colorinspire 直接推薦你各種適合放在一起的色彩組合也很有用。
Colorinspire 推薦絕佳色彩組合,下個專案設計拿來試試吧!
Who Can Use 檢查網頁配色對視力障礙使用者友善程度

全球資訊網協會(World Wide Web Consortium,W3C)制定的網頁內容無障礙指南相信大家不陌生,網頁內容無障礙指南(Web Content Accessibility Guidelines,WCAG)用於讓網頁可以更容易被訪問,藉由這些原則,讓內容能夠被廣大的身心障礙人士使用,其中涉及到可感知性、可操作性和可理解性等各種層面。
CSSgram 以 CSS 和 Sass 編寫而成 Instagram 濾鏡效果
Eva Colors 深度學習的配色工具,找出可搭配主品牌使用的顏色
Darkmode.js 為網站加入深色模式,只要一段程式碼就能實現

macOS 10.14 Mojave 加入全新「深色模式」功能,iOS 13 預告也會加入此模式,如果你曾經將電腦切換為深色,應該會發現有些應用程式可完美支援,也會一併轉為暗色介面,但在不支援深色模式的應用程式表現出來的顏色會更刺眼,嚴重影響到使用體驗。如果你是應用程式開發者,可能後續都得再加上對於深色模式的支援,讓顏色更接近暗色,亦可在使用者選擇不同模式時自動調整為最合適的配色效果。