如果想知道某個網站配色方式,除了打開開發人員工具或是檢視原始碼,也有第三方服務可以使用,即使無法完整複製別人的配色,也能快速得知網站使用的顏色代碼或配色模式,取得顏色的色碼或色彩名稱。有沒有任何更直覺、簡單的方式來完成這些工作呢?若你有類似的需求,接下來要介紹的服務或許可以滿足,這項服務會擷取特定網頁使用的顏色,讓顏色相關資訊更一目瞭然。
色碼查詢
Site Palette 從網站獲取配色,快速產生完整調色盤資訊(Chrome 擴充功能)
最近介紹過一些令人印象深刻的色彩工具,多半都是 Google Chrome 外掛,例如我個人很喜愛的「CSSPeeper 為設計師量身打造,更聰明視覺化檢視網站 CSS 樣式表」,能以更簡單、有組織性的方式呈現網站樣式和各元件,對開發者來說是非常實用的工具。當然瀏覽器可以做的事情也很多,包括一行程式碼將瀏覽器變成網頁編輯器,直接從網頁中修改內容,在開發網站測試時會省時省事很多。
The Colorbook 從當前 Dribbble 設計流行的配色組合獲取靈感

Dribbble 是設計師一定知道的社群網站,在網站中有許多人分享設計作品,互相交流或從其他設計獲取靈感,當然也有不少網站應運而生,例如 Freebbble 可免費下載 Dribbble 數千種設計素材,或是每次打開瀏覽器新分頁可看到創意點子的 Niice、Muzli 外掛功能,除了把自己的作品丟上去 Dribbble 或 Behance 外,其實還有許多有趣的用法,而本文要介紹的網站對於想找配色的設計師來說或許會很有用。
HTML Color Codes 全方位免費線上選色器,輕鬆獲取色彩代碼、RGB 和 HSL

不知道你會不會經常用到選色器或選色工具(Color Picker)呢?對我來說,我在編輯網頁樣式表 CSS 時才會找顏色,通常會從一些網站配色服務尋找看起來合適且舒服的色碼,顏色雖然看似不多,但相差一些些就可能有完全不同的感覺,例如前幾天介紹的「Colors.css 符合當前網頁設計風格的預設 16 種顏色調色盤」就提供許多很適合現代網頁設計的預設配色,我最近也開始使用;另外像是 Colorable 可產生符合 WCAG 規範的配色組合也是很推薦的配色工具,假如你偏好日系風格,NIPPON COLORS 則有代表日本的 250 種配色組合。
Google 搜尋內建選色器及 HEX、RGB 色碼查詢轉換工具
雖然我平時工作很少接觸色碼,偶爾在調整 CSS 或設計圖片時還是會用到,大多數情況都是使用線上調色盤或配色服務,例如 Adobe Kuler、Coolors 或之前整理的「三個線上配色工具,豐富你的全新選色靈感」,可以快速產生 HEX 值來套用到網頁樣式中。有時碰到 RGB 色碼就必須藉助轉換器的幫忙,大家都知道網路上隨意 Google 就有一堆轉換器可用,而現在 Google 搜尋已經內建這個方便功能。