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

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

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

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

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

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

The Colorbook 從當前 Dribbble 設計流行的配色組合獲取靈感

The Colorbook 從當前 Dribbble 設計流行的配色組合獲取靈感
(Copyright: everythingpossible / 123RF Stock Photo

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

HTML Color Codes 全方位免費線上選色器,輕鬆獲取色彩代碼、RGB 和 HSL

HTML Color Codes 全方位免費線上選色器,輕鬆獲取色彩代碼
(Copyright: alessandroguerriero / 123RF Stock Photo

不知道你會不會經常用到選色器選色工具(Color Picker)呢?對我來說,我在編輯網頁樣式表 CSS 時才會找顏色,通常會從一些網站配色服務尋找看起來合適且舒服的色碼,顏色雖然看似不多,但相差一些些就可能有完全不同的感覺,例如前幾天介紹的「Colors.css 符合當前網頁設計風格的預設 16 種顏色調色盤」就提供許多很適合現代網頁設計的預設配色,我最近也開始使用;另外像是 Colorable 可產生符合 WCAG 規範的配色組合也是很推薦的配色工具,假如你偏好日系風格,NIPPON COLORS 則有代表日本的 250 種配色組合。

Google 搜尋內建選色器及 HEX、RGB 色碼查詢轉換工具

Google 搜尋內建選色器及 HEX、RGB 色碼查詢轉換工具

雖然我平時工作很少接觸色碼,偶爾在調整 CSS 或設計圖片時還是會用到,大多數情況都是使用線上調色盤或配色服務,例如 Adobe KulerCoolors 或之前整理的「三個線上配色工具,豐富你的全新選色靈感」,可以快速產生 HEX 值來套用到網頁樣式中。有時碰到 RGB 色碼就必須藉助轉換器的幫忙,大家都知道網路上隨意 Google 就有一堆轉換器可用,而現在 Google 搜尋已經內建這個方便功能。