人類在一天之中,隨時隨地都在選擇顏色,這幾乎已經成為我們的本能了。實際上,也真的有名為色彩心理學的研究,相關研究裡面闡述了各種顏色之間的關聯以及對於人類心理的影響,因此不論是任何領域,色彩都扮演了一個很重要的職位。
相對的,網站上使用的顏色一方面有可能是吸引顧客的關鍵,也有可能是使他們不願進入頁面的原因。這也就是為什麼需要先知道怎麼樣的顏色配置是最適合你的設計,什麼顏色應該避免,接下來會分享一些網頁設計的豪華配色,以及可以在哪裡得到一些建議,這將幫助你的網站在設計思考或是相較於其他網站可以從視覺效果方面脫穎而出。
如何選擇網站配色
在網頁設計以前在決定網站配色時,建議盡量將色相(hue)控制在四個或是以下。簡易步驟就是先找出一個主色、一個次要色、以及一個強調色,主色與次要色可以在色度(shade)、淺色(tint)或色調(tone)上做適度的調整。主色應該要代表品牌、企業形象,而次要色則是第二常用到的顏色,與主色是互補關係。
配色工具與網站推薦
「PALETTABLE」
網站進入後會自動跳出一種顏色,喜歡的話就按LIKE,不喜歡就按DISLIKE,網站會繼續跳下一個顏色,最後網站會搭配好適合且你喜歡的配色給你。結束後可將配色輸出成PNG圖檔,日後在設計時可供網站設計師吸取顏色或是參考。
「BrandColors」
網站蒐集了世界上各大品牌的品牌色,可以在這邊得到許多品牌的配色參考,適合給網頁設計師在替品牌官網設計時找尋靈感用。
「Colorable」
光用想像的拼湊喜歡的「字體」與「背景配色」對於一般人來說是一件有困難的事情,但此網站可以提供我們隨時嘗試「字體」、「背景配色」呈現出來的效果,是一個非常實用的網站。
「COLORFEAP」
如果品牌官網有想要朝著某個時代的時尚流行趨勢效仿的話,那我們會非常推薦這個網站,這裡會依照不同的年代時間軸提供當代對應的配色,而參考配色大多來自當時的藝術創作與海報設計,是一個非常有趣的網站。
「COLORTOOL」
接下來介紹的這個網站也非常實用,他是由Google開發專門給設計師或是前端工程師參考用的配色網站,色號以及版型與字體顏色都可以在上面做更改,選好配色後,還能點選網站上Accessibility,如果字體顏色不適合呈現在背景色上就會看到NOT LEGIBLE和驚嘆號標誌的提醒,提供你在選擇時更加快速。
高檔配色範例
海軍藍和灰色
如果品牌官網是走高奢路線的話,這個配色非常古典優雅。兩種冷色搭配能很好的凸顯你的文章與圖片。
深棕皮和金色
黑色與金色已經被過度氾濫使用,因此這次以深棕色替換黑色,充滿奢華和財富的視覺。
深綠色和橙色
深綠色可以喚起平靜與成長。並被證明為可以幫助降低壓力水平,橙色則是溫暖與快樂的顏色,如果要在網站上使用橙色,建議將其與綠色等有助於營造輕鬆色調的顏色搭配。
栗色和鮭魚色
當一起使用這兩個顏色時,它們可以創建一個豪華而優雅的網頁設計。栗色給人一種精緻的感覺,而鮭魚色給人一種溫暖誘人的感覺。
米色和金色
米色和金色經常被忽視。但其時當你同時使用它們時,可以創建出一個豪華而優雅的視覺。米色給人一種精緻的感覺,而金色則增添了一絲優雅。
銀色和橙紅色
銀色和橙紅色是一種很難使用的調色板。使用這種配色很難找到完美的色彩平衡,因為它有很多淺色。這種配色的最佳顏色選擇是金色和黑色,但顏色選擇將取決於你試圖通過設計傳達的內容。
琥珀和文化色
在顏色搭配中,深褐色和文化色可以幫助為你的網站提供獨特的配色方案。這些顏色選項創建了一種既暗又暖的配色方案。
結語
以上就是這次位各位準備的一些網站配色秘訣,希望在多方參考與比較之後,可以幫助各位在網頁設計上顏色搭配的選擇更順暢的進行,想了解更多的網頁設計資訊,歡迎與我們聯繫。
→觀看更多COSMO 品牌輔導網站設計案例, 前往參考