Colors.css 符合當前網頁設計風格的預設 16 種顏色調色盤

Colors.css 符合當前網頁設計風格的預設 16 種顏色調色盤

製作網頁時會用來表現各種色彩的方法稱為「網頁顏色」(Web Colors),1999 年制定 HTML 4.01 版本確定 16 種預設顏色的英文名稱和十六進位代碼,經過十幾年的網路快速發展變化,這些顏色雖然還是被繼續使用,但看起來似乎也有些過時,從前在老網站使用的顏色現在看起來不再那麼「現代」。如果你曾經使用過一些提供網站配色的相關工具或服務,會發現目前流行的顏色跟十年前已經不同,因此有人想到或許該來更新一下這些預設顏色。

Klart Colors 免費線上配色工具,從網站資料庫獲得選色靈感

Klart Colors 免費線上配色工具,從網站資料庫獲得選色靈感
(Copyright: belchonock / 123RF Stock Photo

我介紹過非常多的免費配色工具,大多都是網路服務,其實選色也不是非常複雜的事,如果還要額外下載軟體或應用程式也太麻煩,徒增困擾。通常找顏色也都是順便找靈感,畢竟配色是一件很神奇的事,有時候差一點點感覺就會差很多,這時候我會打開色彩工具,開始找找有沒有看起來符合自己期待又賞心悅目的色調。我相當喜愛「NIPPON COLORS 選出代表日本的 250 種顏色,日本傳統色系配色選色網站推薦」內的顏色,相當舒服而且有質感,其他像是 ColovelyCoolors 等也是非常單純又快速的選色工具。

ColorKuler 有趣的色彩分析工具,測出你的 Instagram 相片代表色

ColorKuler 有趣的色彩分析工具,測出你的 Instagram 相片代表色
(Copyright: rostislavsedlacek / 123RF Stock Photo

隨著 Instagram 使用人口越來越龐大,也出現不少第三方服務,例如每年都可以為你總結回顧最精采九張相片的 bestnine,或是在你的 IG 個人檔案頁面加入多個網址 Linktree,當然還有近期最熱門 Sayatme 匿名提問工具,都是伴隨相片社群而出現的有趣功能。來點輕鬆的話題吧!想測試一下你的 IG 代表顏色是什麼嗎?現在有服務可以幫你產生個人專屬調色盤,相當有趣。

Colordot 更人性化的選色工具,搖動滑鼠輕鬆找出配色靈感

Colordot 更人性化的選色工具,搖動滑鼠輕鬆找出配色靈感
(Copyright: neirfy / 123RF Stock Photo

免費資源網路社群介紹過不少配色工具,大部分都是以色卡方式呈現,讓使用者從眾多顏色組合中挑選自己喜歡的顏色選項,比較特殊的例如 NIPPON COLORS 選出日本最具代表性的 250 種顏色組合;或是收錄世界知名品牌顏色 BrandColorsMaterial UI 則有 Google、微軟或其他社群網站的代表色,相當實用有趣。

Colorable 網頁色彩線上產生器,可產生符合 WCAG 規範配色組合

Colorable 網頁色彩線上產生器,可產生符合 WCAG 規範配色組合

這幾年我陸續介紹一些和設計及網頁開發相關的免費資源,其中很多人會用到的「配色工具」是我相當熱愛的題材,例如 Adobe Kuler 能尋找製作簡報設計的配色靈感,從 Coolors 簡單快速的選色器來找出各種顏色組合,若你完全沒有想法,BrandColors 收錄世界知名品牌顏色色碼也是個可以參考的方向,這些線上工具最棒的就是完全不用額外下載或安裝 App,只要打開瀏覽器就能使用。

ColorDrop 你唯一需要的線上調色盤!收錄各種配色組合,提供設計開發上絕佳色彩來源

ColorDrop 你唯一需要的線上調色盤!收錄各種配色組合,提供設計開發上絕佳色彩來源

如果你對於配色工具有興趣,一定還記得 LOL Colors,由國外開發者獨力完成的免費網頁選色服務,只花了 24 小時時間建置!這項服務最吸引人的地方在於網頁設計相當簡單,提供各種色彩組合,沒有太多額外或複雜難懂的功能,實在深得我心。本文要介紹的 ColorDrop 和 LOL Colors 有點相似,不過配色工具向來不嫌多,若是平常工作會需要找尋色彩靈感的話不妨將它加入書籤以備不時之需。

NIPPON COLORS 選出代表日本的 250 種顏色,日本傳統色系配色選色網站推薦

NIPPON COLORS 選出代表日本的 250 種顏色,日本傳統色系配色選色網站推薦

免費資源網路社群介紹過不少配色工具色彩應用,雖然我不是從事設計相關工作,但在編修網頁時偶爾也會需要調整顏色,才能讓讀者獲得更好的瀏覽體驗。因此我傾向尋找能提供色彩靈感的工具,例如 Palettab 在每次開新分頁自動展示配色和字型,或者 BrandColors 收錄世界知名品牌顏色色碼,就連精靈寶可夢都有專屬配色網站 Pokémon Paletters

Colovely 最簡色彩產生器,快速顯示當前顏色 HEX、RGB 及 HSL

Colovely 最簡色彩產生器,快速顯示當前顏色 HEX、RGB 及 HSL

今天想來介紹一個配色工具,讓你在尋找色彩靈感時能派得上用場,Colovely 是一個相當簡單又能滿足工作或生活需求的線上選色器,我會想推薦它的原因在於沒有複雜難懂的功能,只要開啟網頁,按下鍵盤上的空白鍵後,Colovely 就會隨機顯示出一種顏色同時變換網頁背景顏色,讓你能夠快速知道當前這個顏色是不是你需要的顏色。

LOL Colors 獨立開發免費網頁配色工具,24 小時完成不拖延

LOL Colors 獨立開發免費網頁配色工具,24 小時完成不拖延

很多人習慣拖延事情,不是做不出來,而是難以開始(或許是缺乏動力或誘因),非得等到最後一刻才開始趕工,雖然如此,壓力卻能使這些人更專注地將計劃完成,只是過程並不好受。說了前面這些,你可能會好奇這跟免費資源有什麼關係?本文要介紹的 LOL Colors 網站就是在一個非常短時間下完成的作品,但你會發現它一點也不遜色。

Color Hunt 每次開新分頁自動展示美麗的配色建議(Chrome 擴充功能)

改造 Chrome 平淡分頁,Color Hunt 加入美麗調色盤配色建議

之前在「三個線上配色工具,豐富你的全新選色靈感」介紹的 Color Hunt 網站最近終於推出 Chrome 瀏覽器擴充功能,如果你覺得這個網站很實用,希望在每次打開新分頁時都能提供你一些配色建議,不妨來免費下載、安裝,若你還不知道這是一個什麼樣的網站,可以繼續看接下來的介紹,也許你會對於線上色彩工具有些興趣。