close
架站必備二十大網頁調色盤工具完全解析
調出網站炫麗的色彩魅力！
是否覺得自己的部落格或個人網頁配色很不搭嗎？還是曾經覺得公司的網頁配色沒有特色呢？或許你也有過網頁配色太土、容易遭人嫌棄的感慨，其實只要好好善用許多免費的網頁調色盤工具，就能很輕鬆地讓網站散發更為出色的魅力和吸引力！
網頁配色一直是決定整個網站風格的重要關鍵之一，也是網頁設計師們最為頭痛的問題，更是耗費網頁設計效率和關乎網站整體成敗的最大決定性因素，雖然完美的網頁配色並沒有一定的標準可言，但假使我們能夠將網頁的整體色彩搭配恰當，無論是抱著欣賞網站的角度，專事瀏覽的使用者，還是單純想要取得網站內容資訊的使用者，都會因為整個網站的配色而有了不同的感受。
但老實說，網頁配色本身就是一門高深的學問，就算是專業的網頁設計師，要在網頁安全色的範圍之內，設計出一個色彩調性和屬性都屬上乘的網站，都必須要花費相當多的心思和精神，努力鑽研相關理論，並輔以實際的經驗，才能夠設計出讓人絕賞心悅目，與想要表達的主題相符，並透過背景和文字搭配，擁有一致感覺的絕佳作品，而想要讓網頁配色的流程進行得更快更好的一大關鍵因素，正是用以輔助，決定色系配色的調色盤工具，假使我們可以學會好好善用網路上免費提供的調色盤工具，不僅讓網站散發更為出色的魅力！也能夠很快速地配出一群對瀏覽者們都具備吸引力的系列色彩喔！
各個免費網頁調色盤工具都具備有一定的配色輔助水準，端視我們個人的使用習慣而有不同的效果，而且這些工具的更新頻率頗高，相信功能必定會越來越強，現階段只要我們能夠妥善運用各家獨具的特色，例如直接提供更為方便的色票管理功能，幫助我們統籌管理之前已經調配好的顏色，並利用自動測試網頁安全色，或是網頁安全色的色盤選取，甚至是網頁共同色彩的色票收集等功能，必定會讓我們更加容易且快速直覺地設計出更加符合配色美學的完美網頁囉！
二十大網頁調色盤工具特色功能說明
一個能夠輔助配色的免費網頁調色盤工具，無論是採用色環調色模式，或是其它多種配色輔助環境的搭配，其宗旨不僅在於能夠提供使用者們最喜歡的RGB色調，也同時強調能夠很快速、有效率地調出適合人類直覺的調色，並符合網頁設計師們心中的期望，可支援多種色碼格式的色票格式，以方便我們快速套用到網頁上，以下就以架站必備的二十大網頁調色盤工具為例，說明各大調色盤工具的特色，以了解該如何運用各調色盤工具幫助自己運用在配色問題上。
1.4096 Color Wheel Version是一個靈活度頗高的調色盤工具，使用方式很簡單，只要將滑鼠放置於調色盤上方，下方就會自動顯示系列色彩，而輕輕使用滑鼠在調色盤上點一下，則可以將色彩快速加入到左方色板當中。
網址： http://wellstyled.com/tools/colorscheme/index-en.html （英文版v1）
網址： http://wellstyled.com/tools/colorscheme2/index-en.html （英文版v2）
網址： http://www.ee-studio.com/tools/color_scheme/index.html （中文版）
2.color scheme generator是個提供全彩色系的調色板工具，具備中文版本，目前提供第一代和第二代，可快速產生調整色調，也能夠自由調整亮度，即使是想要變更飽和度，或是調出專為色盲人士設計的顏色也沒問題，可說是非常專業的工具。
網址： http://www.ficml.org/jemimap/style/color/wheel.html
3.color palette creator可以一次產生十個由淺至深的系列色彩，非常適合要設計同一色系，卻不知知道如何搭配的人使用，更特別的是我們還能夠立即檢視所選取的歷史紀錄，也能將此color palette儲存成PNG檔案，十分方便。
網址： http://slayeroffice.com/tools/color_palette/
4.ColorMixers:Remixing RGB是以RGB、Red、Green、Blue三個色彩混合的概念來設計，透過自行拖曳捲軸的方式來調整，而唯一美中不足的是使用的時候會感覺有點緩慢，相信這必定會是未來改版可能會改進的地方。
網址： http://colormixers.com/mixers/cmr/
5.很有趣的亂數配色工具盤，有別於其它調色盤工具正經八百的產生系列色彩，我們只要將滑鼠隨意放在full screen picker的視窗內移動，一邊移動就一邊會隨機全螢幕產生不同的顏色，只要在看到喜歡的顏色點選下去，就會以JavaScipt的方式顯示色碼，非常有趣的另類工具。
網址： http://milov.nl/iambald/24.html
6.VisiBone Webmaster's Color Lab會根據216個網頁安全色範圍內顏色限制來產生，並根據所選的顏色自動記錄過程，我們可以任意在左上方中點選某一種顏色，接著右方就會顯示選中的調色盤色碼，並在右下方的歷史記錄區中顯示。
網址： http://www.visibone.com/colorlab/
7.Color Schemer Online v2是以色票基色的方式來產生相關色彩，我們可以直接在下方選擇想要的顏色，系統就會自動幫忙產生16個可搭配顏色，使用者能夠自行將整組顏色自行調亮，或是直接調暗，也能夠依據此結果自行產生可供參考的配色方案，或是直接當做底色。
8.配色說起來簡單，但有時候卻會發覺配色本身並不是問題，反而是設計師心裡頭有時候會發生無法出現靈感的狀況，這時候如果能夠有個靈感啟發工具，指引一下可參考的方向，ColorJack正是這樣一個好的選擇，因為是以Ajax的方式來設計，能夠讓我們即時檢視可供參考的配色方案，非常有趣。
網址： http://www.colorjack.com/
9.technicolor是個強大的所見即所得預覽配色工具，只要我們直接根據RGB選定想要的色彩，系統就會產生相關建議色系，並能夠將此系列色彩直接顯示在一個預覽網頁上，直接產生此調色盤的CSS程式碼，讓我們得以直接複製貼上即可使用，是個非常方便而好用的實用工具。
網址： http://www.themaninblue.com/experiment/Technicolor/
10.Dailycolorscheme目前還是beta測試版本，之前會每天提供一種配色方案，甚至還提供RSS訂閱的服務，但如今只剩下配色檔案提供使用者下載，如果有使用Photoshop或是Illustrator的朋友們可以參考一下設計，或是瀏覽之前所提供的CSS配色參考方案。
網址： http://beta.dailycolorscheme.com/
11.colr.org是個以Tag標籤為根據用以產生相關色碼的一個好玩工具，其原理在於利用了關鍵字來比對關連資料庫，再從中取得色碼，立意甚佳，不過目前比較可惜的是只支援輸入英文字，假使輸入中文字並沒有辦法產生相關顏色。
網址： http://colr.org/
12.color blender是一款混色工具概念的免費調色盤工具，只要我們直接選定二種顏色，color blender就可以利用此兩種顏色為基本色調，進而產生這兩色之間，類似漸層效果的一至十種色彩。
網址： http://www.meyerweb.com/eric/tools/color-blend/
13.色見本之館說不上是個工具，僅可算是個提供日文配色建議的Color Guide，可針對網頁主色、配色，或是文字與背景之間的色彩搭配做出比較圖，也有各式色彩，例如赤、橙、茶、青、紫、白、灰等各種顏色的參考色碼提供。
網址： http://www.color-guide.com/
14.具備正體中文介面配色分類字典，提供多達160種主題配色策略，無論你想要浪漫、純真、優美、柔和、安穩、童話風格，還是要優秀、沉穩、典雅，甚至於想要女性化、朦朧、安定等各種略微抽象概念的風格全都有。
網址： http://www.print100.com/hk/html/csi.aspx
TIPS：另一個選擇「原色大辭典」
除了這些免費的配色工具之外，其實我們也能夠參考原色大辭典（ http://www.colordic.org/ ）來使用，有別於配色盤工具產生相關色系後搭配套用的作法，原色大辭典是以色碼集合展示的概念來呈現，對於喜歡一次陳列各種色彩風格調性的設計師來說，原色大辭典反而會是個更加好用而貼心的工具，此網站除了原色大辭典之外，另有提供和色大辭典、洋色大辭典、web216和配色大辭典可供使用，非常豐富。
15.ColorMatch是個功能異常強大的RGB捲軸顏色混合產生器，可以用來快速產生類似的5種相關顏色，使用的流程非常流暢，只要先選好三種顏色，系統就會自動給我們幾種顏色建議，十分有效率而容易使用的工具。
網址： http://colormatch.dk/
16.Colortoy是個以FLASH所設計的配色工具，因為是以關聯性配色為主要基礎，所以我們只要在選好主色之後，直接選擇RGB色調，或是填寫色碼就能夠隨機產生一組系列顏色，我們可以直接利用此顏色來搭配想要使用的顏色，非常好用。
網址： http://www.defencemechanism.com/color/
17.Color Wizard不單是個提供配色建議的色彩魔法師，也可說是很另類的輔助精靈工具，因為這個網站還有提供許多色彩學的理論，理論與實務並重，建議不妨也花些時間研究背後的原理，相信這對於網頁的配色概念，也會有非常大的幫助。
網址： http://www.colorsontheweb.com/thecolorwizard.asp
18.著重配色原理和理論述說的專業型研究網站，不單是從原理開始說起，更有許多色彩學上專有名詞的意義可供查詢參考，不過目前唯一美中不足的是僅提供英文版本，而且有些單元的內容依舊在建構中，算是比較令人感到遺憾的地方。
網址： http://www.webwhirlers.com/colors/index.asp
19.可快速產生類似漸層效果的系列顏色，雖然提供的調色盤有些複雜，但是使用流程上並不難操作，只要簡單選擇幾個選項，就可以很快速的套用系統所提供的幾種建議色彩到自己的網頁之中。
網址： http://color.sharewonders.com/
20.web color kit是一套用來產生背景顏色，並對超連結顏色做出變化的工具，直接點選顏色，即可套用至現有的網頁背景當中檢視，另外也提供輸出CSS和JavaScript語法給我們直接套用到自己的頁面當中，非常強大而有效率的工具。
網址： http://webcolor.webmaster-kit.com/
調出網站炫麗的色彩魅力！
是否覺得自己的部落格或個人網頁配色很不搭嗎？還是曾經覺得公司的網頁配色沒有特色呢？或許你也有過網頁配色太土、容易遭人嫌棄的感慨，其實只要好好善用許多免費的網頁調色盤工具，就能很輕鬆地讓網站散發更為出色的魅力和吸引力！
網頁配色一直是決定整個網站風格的重要關鍵之一，也是網頁設計師們最為頭痛的問題，更是耗費網頁設計效率和關乎網站整體成敗的最大決定性因素，雖然完美的網頁配色並沒有一定的標準可言，但假使我們能夠將網頁的整體色彩搭配恰當，無論是抱著欣賞網站的角度，專事瀏覽的使用者，還是單純想要取得網站內容資訊的使用者，都會因為整個網站的配色而有了不同的感受。
但老實說，網頁配色本身就是一門高深的學問，就算是專業的網頁設計師，要在網頁安全色的範圍之內，設計出一個色彩調性和屬性都屬上乘的網站，都必須要花費相當多的心思和精神，努力鑽研相關理論，並輔以實際的經驗，才能夠設計出讓人絕賞心悅目，與想要表達的主題相符，並透過背景和文字搭配，擁有一致感覺的絕佳作品，而想要讓網頁配色的流程進行得更快更好的一大關鍵因素，正是用以輔助，決定色系配色的調色盤工具，假使我們可以學會好好善用網路上免費提供的調色盤工具，不僅讓網站散發更為出色的魅力！也能夠很快速地配出一群對瀏覽者們都具備吸引力的系列色彩喔！
各個免費網頁調色盤工具都具備有一定的配色輔助水準，端視我們個人的使用習慣而有不同的效果，而且這些工具的更新頻率頗高，相信功能必定會越來越強，現階段只要我們能夠妥善運用各家獨具的特色，例如直接提供更為方便的色票管理功能，幫助我們統籌管理之前已經調配好的顏色，並利用自動測試網頁安全色，或是網頁安全色的色盤選取，甚至是網頁共同色彩的色票收集等功能，必定會讓我們更加容易且快速直覺地設計出更加符合配色美學的完美網頁囉！
| 網頁安全色 網頁安全色的原文為「Web Safe Colors」，這是在90年代時Netscape公司選定的最低限度必要色彩，方便我們在使用該公司所開發的瀏覽器Navigator瀏覽網頁時所能呈現的色彩，此舉免除了使用者端的電腦環境因為有所限制而無法表達網頁設計的理念傳達問題，所以網頁設計師們無論是在文字、圖片、背景等顏色的運用上，都必須在這216色的範圍內選用。 |
二十大網頁調色盤工具特色功能說明
一個能夠輔助配色的免費網頁調色盤工具，無論是採用色環調色模式，或是其它多種配色輔助環境的搭配，其宗旨不僅在於能夠提供使用者們最喜歡的RGB色調，也同時強調能夠很快速、有效率地調出適合人類直覺的調色，並符合網頁設計師們心中的期望，可支援多種色碼格式的色票格式，以方便我們快速套用到網頁上，以下就以架站必備的二十大網頁調色盤工具為例，說明各大調色盤工具的特色，以了解該如何運用各調色盤工具幫助自己運用在配色問題上。
1.4096 Color Wheel Version是一個靈活度頗高的調色盤工具，使用方式很簡單，只要將滑鼠放置於調色盤上方，下方就會自動顯示系列色彩，而輕輕使用滑鼠在調色盤上點一下，則可以將色彩快速加入到左方色板當中。
網址： http://wellstyled.com/tools/colorscheme/index-en.html （英文版v1）
網址： http://wellstyled.com/tools/colorscheme2/index-en.html （英文版v2）
網址： http://www.ee-studio.com/tools/color_scheme/index.html （中文版）
2.color scheme generator是個提供全彩色系的調色板工具，具備中文版本，目前提供第一代和第二代，可快速產生調整色調，也能夠自由調整亮度，即使是想要變更飽和度，或是調出專為色盲人士設計的顏色也沒問題，可說是非常專業的工具。
網址： http://www.ficml.org/jemimap/style/color/wheel.html
3.color palette creator可以一次產生十個由淺至深的系列色彩，非常適合要設計同一色系，卻不知知道如何搭配的人使用，更特別的是我們還能夠立即檢視所選取的歷史紀錄，也能將此color palette儲存成PNG檔案，十分方便。
網址： http://slayeroffice.com/tools/color_palette/
4.ColorMixers:Remixing RGB是以RGB、Red、Green、Blue三個色彩混合的概念來設計，透過自行拖曳捲軸的方式來調整，而唯一美中不足的是使用的時候會感覺有點緩慢，相信這必定會是未來改版可能會改進的地方。
網址： http://colormixers.com/mixers/cmr/
5.很有趣的亂數配色工具盤，有別於其它調色盤工具正經八百的產生系列色彩，我們只要將滑鼠隨意放在full screen picker的視窗內移動，一邊移動就一邊會隨機全螢幕產生不同的顏色，只要在看到喜歡的顏色點選下去，就會以JavaScipt的方式顯示色碼，非常有趣的另類工具。
網址： http://milov.nl/iambald/24.html
6.VisiBone Webmaster's Color Lab會根據216個網頁安全色範圍內顏色限制來產生，並根據所選的顏色自動記錄過程，我們可以任意在左上方中點選某一種顏色，接著右方就會顯示選中的調色盤色碼，並在右下方的歷史記錄區中顯示。
網址： http://www.visibone.com/colorlab/
| 16進位色碼表 類似的概念還有256-colors mode（ http://www.icehouse.net/jim_d/colors.html ）這個由16進位值所建立的色碼表網站，能夠讓我們以最直覺的方式來挑選想要使用的系列色彩。 |
7.Color Schemer Online v2是以色票基色的方式來產生相關色彩，我們可以直接在下方選擇想要的顏色，系統就會自動幫忙產生16個可搭配顏色，使用者能夠自行將整組顏色自行調亮，或是直接調暗，也能夠依據此結果自行產生可供參考的配色方案，或是直接當做底色。
8.配色說起來簡單，但有時候卻會發覺配色本身並不是問題，反而是設計師心裡頭有時候會發生無法出現靈感的狀況，這時候如果能夠有個靈感啟發工具，指引一下可參考的方向，ColorJack正是這樣一個好的選擇，因為是以Ajax的方式來設計，能夠讓我們即時檢視可供參考的配色方案，非常有趣。
網址： http://www.colorjack.com/
9.technicolor是個強大的所見即所得預覽配色工具，只要我們直接根據RGB選定想要的色彩，系統就會產生相關建議色系，並能夠將此系列色彩直接顯示在一個預覽網頁上，直接產生此調色盤的CSS程式碼，讓我們得以直接複製貼上即可使用，是個非常方便而好用的實用工具。
網址： http://www.themaninblue.com/experiment/Technicolor/
10.Dailycolorscheme目前還是beta測試版本，之前會每天提供一種配色方案，甚至還提供RSS訂閱的服務，但如今只剩下配色檔案提供使用者下載，如果有使用Photoshop或是Illustrator的朋友們可以參考一下設計，或是瀏覽之前所提供的CSS配色參考方案。
網址： http://beta.dailycolorscheme.com/
11.colr.org是個以Tag標籤為根據用以產生相關色碼的一個好玩工具，其原理在於利用了關鍵字來比對關連資料庫，再從中取得色碼，立意甚佳，不過目前比較可惜的是只支援輸入英文字，假使輸入中文字並沒有辦法產生相關顏色。
網址： http://colr.org/
12.color blender是一款混色工具概念的免費調色盤工具，只要我們直接選定二種顏色，color blender就可以利用此兩種顏色為基本色調，進而產生這兩色之間，類似漸層效果的一至十種色彩。
網址： http://www.meyerweb.com/eric/tools/color-blend/
13.色見本之館說不上是個工具，僅可算是個提供日文配色建議的Color Guide，可針對網頁主色、配色，或是文字與背景之間的色彩搭配做出比較圖，也有各式色彩，例如赤、橙、茶、青、紫、白、灰等各種顏色的參考色碼提供。
網址： http://www.color-guide.com/
14.具備正體中文介面配色分類字典，提供多達160種主題配色策略，無論你想要浪漫、純真、優美、柔和、安穩、童話風格，還是要優秀、沉穩、典雅，甚至於想要女性化、朦朧、安定等各種略微抽象概念的風格全都有。
網址： http://www.print100.com/hk/html/csi.aspx
TIPS：另一個選擇「原色大辭典」
除了這些免費的配色工具之外，其實我們也能夠參考原色大辭典（ http://www.colordic.org/ ）來使用，有別於配色盤工具產生相關色系後搭配套用的作法，原色大辭典是以色碼集合展示的概念來呈現，對於喜歡一次陳列各種色彩風格調性的設計師來說，原色大辭典反而會是個更加好用而貼心的工具，此網站除了原色大辭典之外，另有提供和色大辭典、洋色大辭典、web216和配色大辭典可供使用，非常豐富。
15.ColorMatch是個功能異常強大的RGB捲軸顏色混合產生器，可以用來快速產生類似的5種相關顏色，使用的流程非常流暢，只要先選好三種顏色，系統就會自動給我們幾種顏色建議，十分有效率而容易使用的工具。
網址： http://colormatch.dk/
16.Colortoy是個以FLASH所設計的配色工具，因為是以關聯性配色為主要基礎，所以我們只要在選好主色之後，直接選擇RGB色調，或是填寫色碼就能夠隨機產生一組系列顏色，我們可以直接利用此顏色來搭配想要使用的顏色，非常好用。
網址： http://www.defencemechanism.com/color/
17.Color Wizard不單是個提供配色建議的色彩魔法師，也可說是很另類的輔助精靈工具，因為這個網站還有提供許多色彩學的理論，理論與實務並重，建議不妨也花些時間研究背後的原理，相信這對於網頁的配色概念，也會有非常大的幫助。
網址： http://www.colorsontheweb.com/thecolorwizard.asp
| Colors On The Web系列產品 Colors On The Web除了Color Wizard之外，還有出產許多同系列的系列產品，像是Combining Colors、Color Wheel、Color Contrast，以及Color Schemes等配色工具，每個產品都很有特色，使用起來也都相當直覺易上手，而且更重要的一點是所有工具可都是免費提供的喔！ |
18.著重配色原理和理論述說的專業型研究網站，不單是從原理開始說起，更有許多色彩學上專有名詞的意義可供查詢參考，不過目前唯一美中不足的是僅提供英文版本，而且有些單元的內容依舊在建構中，算是比較令人感到遺憾的地方。
網址： http://www.webwhirlers.com/colors/index.asp
19.可快速產生類似漸層效果的系列顏色，雖然提供的調色盤有些複雜，但是使用流程上並不難操作，只要簡單選擇幾個選項，就可以很快速的套用系統所提供的幾種建議色彩到自己的網頁之中。
網址： http://color.sharewonders.com/
20.web color kit是一套用來產生背景顏色，並對超連結顏色做出變化的工具，直接點選顏色，即可套用至現有的網頁背景當中檢視，另外也提供輸出CSS和JavaScript語法給我們直接套用到自己的頁面當中，非常強大而有效率的工具。
網址： http://webcolor.webmaster-kit.com/
全站熱搜
留言列表
網路 (2)