網頁配色

網頁配色

在網頁設計的過程中，比較耗時的事情是色彩的選擇。

網頁配色一直都是網頁設計師們苦惱的問題，色彩是用戶打開網站之後感受到的第一個元素，如果網頁的顏色表現力豐富，整體美觀度提高，可以吸引用戶能夠進一步了解網站的內容，為塑造用戶忠誠度打下良好的基礎。

真正能夠和整個網頁設計項目貼合、能夠覆蓋整個設計中所有元素需求的配色，需要在網頁設計的過程中不斷的調整。

一套強大而有效的配色方案，可能需要好幾個小時來回的測試配搭。

網頁設計的色調運用

在設計網頁時，通常不會選擇簡單的單色調，因為一方面看起來不利於網頁的配色，另一方面美觀度也不高，所以通常需要將這些顏色的色調進行少許的變換。

例如引入一些透明度、增加柔光，或在某些區域再將顏色的深度進行上調，這樣就能夠讓網站的色彩變得更加生動，而不顯得沉悶。

例如按鈕的顏色，選單上的顏色，廣告中的主色調等都可以通過色調轉換來加以調整，讓整個頁面看起來更加舒服。

網站上的顏色代碼

網站上的顏色代碼

什麼是 HTML 顏色代碼？顏色代碼是以電腦可以解釋和顯示的格式，表示我們可以在螢幕上看到顏色的方式。通常用於網站和其他軟件應用程序，有多種格式，包括十六進制顏色代碼、RGB 和 HSL 值以及 HTML 顏色名稱等。

十六進制顏色代碼最受歡迎的是十六進制顏色代碼；三字節十六進制數（即由六位數字組成），每個字節或十六進制碼中的一對字符，分別代表顏色中紅、綠、藍的強度。十六進制代碼字節值的範圍從顏色的最低強度 00 到表示最高強度的 FF。

例如，白色是通過將三種原色(紅，綠，藍)中的每一種以最強度混合而成的，從而產生#FFFFFF 的十六進制顏色代碼。

紅色、綠色和藍色這三種原色是通過將所需顏色的最高強度與其他兩種顏色的最低強度混合而成的，十六進制顏色代碼分別如下圖︰

網頁配色小工具

網頁配色免費小工具

既然 網頁配色 如此重要，任何網頁設計的配色選擇都具備一定的邏輯考量。但是，對於不熟悉設計的人來說，單憑一套理論也很難實踐。

在下文，我將會介紹6個我常使用的線上免費配色工具，這幾個工具多年來一直是我在製作網頁上的好助手，希望可以幫助大家更直覺、輕鬆地挑選合適的網頁配色方案。

Color Picker配色小工具

1．HTML Color Picker

HTML Color Picker 是我比較常用的網頁配色小工具，假如你想用同一個色系但不同的深淺顏色去分辨網站上的按鈕，連結，表單上的分隔等，這個工具可以說是非常實用。

HTML Color Picker 用法非常簡單，只要輸入顏色代碼，右方即會出現加深或變淺的同系色調。

這個工具我一般用來製作網站上的按鈕，漸變色，列表上的背景色等等。我假設網站上的按鈕顏色是#0080bf，我需要在滑鼠經過按鈕上時顯示不同的顏色，我就可以在右方選取一個同系色調。

小TIPS︰我一般會選擇相隔3-4個漸變的顏色，這樣做效果會比較明顯，但又不會太過違和。

Palettable網頁配色

2．Palettable

Palettable的配色方案來自數百萬位專業設計師的經驗，假如你想發揮創意，運用不同的色調去增加網站的美觀度，你可以使用Palettable。

用法同樣非常簡單，首先要在中間輸入顏色代碼，亦可在中間的拉杆調整色調。

然後按下方的Like按鈕，會自動顯示出與主色相襯的其他色彩，看到喜歡的色彩可以再按下Like，不喜歡則按下Dislike，最多可以配襯5個不同色彩，亦可按下垃圾桶icon，刪掉不喜歡的顏色再重新配置。

Hello Color 網站配色

3．Hello Color

Hello Color是一個非常好玩的配色工具。

假如你沒有任何顏色代碼，對於配色也沒有任何概念，你只需要點擊畫面，它會隨機提供兩種顏色組合，同時留意螢幕下方會提供相近、互補的顏色。

同時，你亦可以在瀏覽器上方的連結，C=的後面，輸入你心目中的顏色代碼，以變動隨機配色。

Coolors 網站配色

4．Coolors

Coolors也是一個隨機配色工具，只要按下鍵盤的空白鍵，Coolors 會隨機提供五種顏色的配色方案。

你也可以輸入顏色代碼，再隨機配色。

Coolors的特點是，你可以鎖定主要顏色，更換其他的色彩組合，也可以隨意刪除不喜歡的顏色再隨機組合。

Coolors 網站配色

5．Color Hunt

Color Hunt 可以幫助你建立獨特的網站配色方案，要是你沒有什麼概念，不妨了解一下其他用戶喜歡什麼顏色？或是以感覺來選擇一個顏色組合？

在左手邊的選單，你可以選擇Popular，查看受歡迎的配色組合，按下Random可以隨機組合，別忘了選單的下方，你可以根據顏色帶出來的感覺作為配色方案，例如你想帶出冬天的感覺，可以試試按下Winter，各種讓人有冬天感覺的色彩組合立即展現。

總結︰

透過這篇文章，相信大家對網站配色也有一定程度的理解，我亦會有小小建議，當你想建立一個網站時，你可以用公司logo的顏色作為主色，再配搭其他色彩，讓公司網站與你的品牌更加匹配，也令你的品牌形象更為突出。