網頁配色教學》掌握2個步驟+3個技巧,找到你的專屬網頁色彩學

分享在 facebook
分享在 twitter
分享在 linkedin
分享在 email
分享在 print

網頁色彩學教學

進入一個網站,你最先看到的絕對是整個網頁的配色,再來才是網頁排版,可說是網頁設計最基本的元素。在製作網站時,網頁配色是不可或缺的一環,擁有合適的網頁配色,不僅看起來舒服、美觀,使用起來也更加直覺,還能完美呈現你的品牌形象,帶給使用者深刻的印象。趕緊跟著本文的觀點,了解網頁配色技巧、步驟,避免眼花撩亂的色彩,打造符合美學又緊貼品牌形象的質感網頁!

網頁配色步驟1:決定主色調

提到Facebook,人們往往會立即聯想到它最標誌性的「藍色」,也造就了鮮明的品牌形象,而網頁配色的第一步就是決定主色調,也就是網頁配色的主軸,可以根據你已經設計好的品牌LOGO、品牌調性來決定。例如質感文青風,一般會使用偏灰的色系、大地色系,科技業則大多選擇陽剛、鮮明的顏色作為主色調,不過這些都只是參考,還是建議以你自身的品牌特質為主。

網頁配色步驟2:搭配輔助色

決定好主色調之後,你必須找到2~3個輔助色,它們不僅可以和諧地與主色調搭配,也能彼此調和、增加網頁的層次感,又不會顯得過於雜亂,讓人看得頭昏眼花。以下提供你3個搭配技巧:

網頁配色技巧1:相近色

相近色系可說是最簡單、不花腦筋的色彩搭配方式!基本上不太會出錯,但要如何配得有設計感、令人印象深刻,也非常考驗設計者的功力。因此,一般會再選一個「對比色」作搭配,可用於強調、突顯頁面上的重點。

網頁配色技巧2:對比色

對比網頁配色技巧:AMAZON

這邊所講的對比色,並不侷限於「紅─綠」、「黃─紫」、「藍─橘」、「黑─白」的搭配,而是撞色、跳色的視覺感受。對比色能夠讓人眼前為之一亮,使網頁視覺效果更搶眼,留下深刻的印象,像Amazon的配色就是很好的例子。

網頁配色技巧3:中性色

所謂的中性色,就是接近黑、灰、白的顏色,包括米白、灰杏、寶寶藍等等,它們的存在感比較低,不會搶走主色調的風采,可以很好地搭配、幫助你呈現網頁上的重點,打造有層次卻不雜亂的視覺效果。例如Facebook以藍色為主色調,再搭配上白色、淺灰等中性色,網頁配色十分簡潔,更能讓使用者將視覺重點放在貼文上。

6個網頁配色網站推薦,讓你不再盲目選色!

1.Colordot

網頁配色網站:Colordot

Colordot是一個操作簡易的配色網站,只要在頁面上移動滑鼠游標,就可以自由變化顏色!當你選定了合適、喜歡的顏色,即可點擊右鍵,即可跳轉選擇下一個顏色。如果你想要回頭修改、微調顏色,只要點擊下方的「齒輪」就可以做調整,幫助你搭配出和諧的配色。

2.Colourcode

網頁配色網站:Colourcode

Colourcode的操作方式與Colordot非常類似,但卻多了左側的導覽列,讓你在顏色搭配上更有方向,可以選擇「自由配色(Free Build)」、「單色配色(Monochrome)」、「相似配色(Analogy)」等配色方式,讓你更快速、輕鬆地找到心儀的網頁配色。

3.PALETTABLE

網頁配色網站:PALETTABLE

PALETTABLE適合對網頁主色調毫無靈感的人,可以幫助你從頭發想網站的配色。一進入PALETTABLE網站,會隨機跳出一個顏色,只要喜歡就可以點擊Like,不喜歡則點擊Dislike,會跳出新的顏色幫助你做搭配,最終你可以篩選出和諧、美觀的網頁配色。

4.Awwwards

網頁配色網站:Awwwards

Awwwards可說是各國網頁設計師的作品合集,收錄了非常豐富的網頁配色、頁面設計案例。你可以透過齊全的分類搜尋功能,根據主色調、網頁類型、標籤等方式,輕鬆篩選出合適、符合需求的網頁設計,並從中獲取設計靈感。

5.Paletton

網頁配色網站:Paletton

Paletton是免費的線上調色網站,提供直覺的色環選色,能夠幫助你快速搭配出合適的網頁配色,還可以立即預覽套用在網頁上的效果,更方便你做選擇。

6.Colorable

網頁配色網站:Colorable

Colorable功能非常單純,提供無限的文字、背景搭配靈感,讓你能夠即時、視覺化地看到網頁呈現出來的效果。如果你找到符合喜好的配色,也可以稍微調整文字和背景的色調、飽和度和亮度,找到最合適的一套配色。

戰國策網頁設計服務,為你打造致勝網站!

不論是電子商家還是品牌官網,在架設網站的時候,不只要考慮合適的網頁配色,更要從使用者體驗、SEO出發,戰國策集團提供你專業、貼心的網站設計服務,從網站需求諮詢、視覺設計、買網域到SEO優化,都能為你完整規劃,量身打造吸睛、實用的客製化網站。

 

延伸閱讀:

免費圖庫總整理》瞭解創用CC與免費圖庫推薦,用圖片提升網站豐富度

尋求網頁設計公司前必做的五大功課,搭起更順暢的溝通橋樑

Click Me