Alwane 網頁配色擷取工具,輸入網址就能取得顏色代碼相關資訊

Alwane 網頁配色擷取工具,輸入網址就能取得顏色代碼相關資訊

如果想知道某個網站配色方式,除了打開開發人員工具或是檢視原始碼,也有第三方服務可以使用,即使無法完整複製別人的配色,也能快速得知網站使用的顏色代碼或配色模式,取得顏色的色碼或色彩名稱。有沒有任何更直覺、簡單的方式來完成這些工作呢?若你有類似的需求,接下來要介紹的服務或許可以滿足,這項服務會擷取特定網頁使用的顏色,讓顏色相關資訊更一目瞭然。

Adobe Color 提供設計師配色建議,以關鍵字搜尋主題情境相關色彩

Adobe Color 提供設計師配色建議,以關鍵字搜尋主題情境相關色彩

想尋找色彩靈感嗎?我介紹過不少配色工具可善加利用,有些是單純隨機色彩產生器,也有透過音樂專輯封面產生色碼的 Cover Colors、以藝術品發掘配色靈感的 Google Art Palette 或查詢不同時代流行的配色 Color Leap 等等,都有助於使用者找出好看且合適的配色組合。此外還有一些設計相關社群讓使用者分享自己挑選的調色盤,也是獲得顏色的方法。

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

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

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

Who Can Use 檢查網頁配色對視力障礙使用者友善程度

Who Can Use 檢查網頁配色對視力障礙使用者友善程度
Copyright : Alexey Sinelnikov / 123RF Stock Photos

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

Darkmode.js 為網站加入深色模式,只要一段程式碼就能實現

Darkmode.js 為網站加入深色模式,只要一段程式碼就能實現
Copyright : Brian Jackson / 123RF Stock Photos

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

如何讓網頁變成黑白?使用 CSS Filter 套用濾鏡樣式表教學

如何讓網頁變成黑白?使用 CSS Filter 套用濾鏡樣式表教學

上個月台灣發生震驚社會的宜蘭普悠瑪列車出軌事故,造成許多旅客輕重傷甚至死亡,也對台灣交通運輸安全打上一個大大的問號,各種資訊隨著時間不斷被揭露出來,讓我懷疑需要多好的運氣才能平安度過每一天?發生憾事後再多道歉和賠償也無法撫平傷痛,或許平常就該認真謹慎面對所有大小事情,扣除天災更多的是人禍,往往都是過於疏忽怠慢、不夠嚴謹造成的。

Hex Naw 檢測你的網站配色對比和可視性評分,找出最具網頁親和力色彩組合

Hex Naw 檢測你的網站配色對比和可視性評分,找出最具網頁親和力色彩組合

通常在選擇網頁的背景和前景色時會考慮到閱讀上的舒適度,如果顏色太接近或是對比太大,有可能讓閱聽者在閱讀上變得不那麼舒服,也會使整體配色出現奇怪的感覺。除了從選色工具直接套用其他設計師選好的顏色(例如 Colorable 可隨機產生符合 WCAG 規範的文字和背景顏色組合),我也建議測試一下你選用顏色之間的「網頁親和力」指數,這個步驟並不會耗費太多時間。

Site Palette 從網站獲取配色,快速產生完整調色盤資訊(Chrome 擴充功能)

Site Palette 從網站獲取配色,快速產生完整調色盤資訊(Chrome 擴充功能)

最近介紹過一些令人印象深刻的色彩工具,多半都是 Google Chrome 外掛,例如我個人很喜愛的「CSSPeeper 為設計師量身打造,更聰明視覺化檢視網站 CSS 樣式表」,能以更簡單、有組織性的方式呈現網站樣式和各元件,對開發者來說是非常實用的工具。當然瀏覽器可以做的事情也很多,包括一行程式碼將瀏覽器變成網頁編輯器,直接從網頁中修改內容,在開發網站測試時會省時省事很多。

Stylify Me 快速獲取網站配色、字型等風格資訊

Stylify Me 快速取得網站配色、字型等風格資訊

設計網頁除了參考現有網站的排版、架構外,更需要的就是觀摩別人是怎麼配色、選擇字型,好的設計不但能讓整體網頁質感加分,還有助於讓訪客更容易了解網站動線,而不會在瀏覽時迷路。Stylify Me 是一個讓你快速獲取某個網站配色、字型設定的線上工具,只要輸入網址,即可分析出網頁使用的所有顏色配置,包括背景顏色、文字顏色、字型、字體大小等資訊。

Check My Colours,網站色彩易讀性分析器

checkmycolours.jpg

作者/瓜南(2009-06-20)

作為網頁設計者,在設計網頁的時候需要考慮什麼呢?可讀性固然重要,視覺效果不容忽視,網頁上的元素、配色、整體風格等等因素也會影響訪客的「回訪率」。當你設計出一個炫麗、淡雅、或者樸素的網站時,是否有考慮過有辨色障礙的讀者呢?透過 Check My Colours 將可以檢查你的網站配色是否合格。