最近介紹過一些令人印象深刻的色彩工具,多半都是 Google Chrome 外掛,例如我個人很喜愛的「CSSPeeper 為設計師量身打造,更聰明視覺化檢視網站 CSS 樣式表」,能以更簡單、有組織性的方式呈現網站樣式和各元件,對開發者來說是非常實用的工具。當然瀏覽器可以做的事情也很多,包括一行程式碼將瀏覽器變成網頁編輯器,直接從網頁中修改內容,在開發網站測試時會省時省事很多。
色碼
The Colorbook 從當前 Dribbble 設計流行的配色組合獲取靈感
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 搜尋已經內建這個方便功能。
Couleurs 簡單、免費的螢幕取色工具(Mac)
Windows 上有不少簡單、好用又免費的螢幕取色工具,能幫我們找出畫面裡某個部分的正確顏色值,但 Mac 上好像比較少類似的工具(還是說有好用的我沒發現?),直到最近看到蘋果設計師大力推薦這款 Couleurs,是一個很簡單、很方便且超好用的取色工具,如果你的工作或生活中會需要類似工具,本身也是使用 Mac 的話,趕緊來試試看吧!