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

全球資訊網協會(World Wide Web Consortium,W3C)制定的網頁內容無障礙指南相信大家不陌生,網頁內容無障礙指南(Web Content Accessibility Guidelines,WCAG)用於讓網頁可以更容易被訪問,藉由這些原則,讓內容能夠被廣大的身心障礙人士使用,其中涉及到可感知性、可操作性和可理解性等各種層面。
Darkmode.js 為網站加入深色模式,只要一段程式碼就能實現

macOS 10.14 Mojave 加入全新「深色模式」功能,iOS 13 預告也會加入此模式,如果你曾經將電腦切換為深色,應該會發現有些應用程式可完美支援,也會一併轉為暗色介面,但在不支援深色模式的應用程式表現出來的顏色會更刺眼,嚴重影響到使用體驗。如果你是應用程式開發者,可能後續都得再加上對於深色模式的支援,讓顏色更接近暗色,亦可在使用者選擇不同模式時自動調整為最合適的配色效果。
如何讓網頁變成黑白?使用 CSS Filter 套用濾鏡樣式表教學
上個月台灣發生震驚社會的宜蘭普悠瑪列車出軌事故,造成許多旅客輕重傷甚至死亡,也對台灣交通運輸安全打上一個大大的問號,各種資訊隨著時間不斷被揭露出來,讓我懷疑需要多好的運氣才能平安度過每一天?發生憾事後再多道歉和賠償也無法撫平傷痛,或許平常就該認真謹慎面對所有大小事情,扣除天災更多的是人禍,往往都是過於疏忽怠慢、不夠嚴謹造成的。
Hex Naw 檢測你的網站配色對比和可視性評分,找出最具網頁親和力色彩組合
Site Palette 從網站獲取配色,快速產生完整調色盤資訊(Chrome 擴充功能)
最近介紹過一些令人印象深刻的色彩工具,多半都是 Google Chrome 外掛,例如我個人很喜愛的「CSSPeeper 為設計師量身打造,更聰明視覺化檢視網站 CSS 樣式表」,能以更簡單、有組織性的方式呈現網站樣式和各元件,對開發者來說是非常實用的工具。當然瀏覽器可以做的事情也很多,包括一行程式碼將瀏覽器變成網頁編輯器,直接從網頁中修改內容,在開發網站測試時會省時省事很多。
Stylify Me 快速獲取網站配色、字型等風格資訊
設計網頁除了參考現有網站的排版、架構外,更需要的就是觀摩別人是怎麼配色、選擇字型,好的設計不但能讓整體網頁質感加分,還有助於讓訪客更容易了解網站動線,而不會在瀏覽時迷路。Stylify Me 是一個讓你快速獲取某個網站配色、字型設定的線上工具,只要輸入網址,即可分析出網頁使用的所有顏色配置,包括背景顏色、文字顏色、字型、字體大小等資訊。
Check My Colours,網站色彩易讀性分析器
作者/瓜南(2009-06-20)
作為網頁設計者,在設計網頁的時候需要考慮什麼呢?可讀性固然重要,視覺效果不容忽視,網頁上的元素、配色、整體風格等等因素也會影響訪客的「回訪率」。當你設計出一個炫麗、淡雅、或者樸素的網站時,是否有考慮過有辨色障礙的讀者呢?透過 Check My Colours 將可以檢查你的網站配色是否合格。