網站色彩計畫(2022 最新) - Hend Design | 網頁設計

網頁色彩影響了訊息的傳遞，更影響了一個品牌的視覺形象，為了讓配色的使用更有效果，必須要擬定一個完整的色彩計畫。

ABOUT WORKS PROCESS SERVICE BLOG CONTACT 選單 ABOUT WORKS PROCESS SERVICE BLOG CONTACT Hend Instagram 首頁 /網頁設計 /網站色彩計畫(2022最新) 2021-06-30 HendChen 網頁設計,設計新知 網站色彩計畫(2022最新) 網頁色彩網頁設計網頁配色 網頁色彩影響了訊息的傳遞，更影響了一個品牌的視覺形象，為了讓配色的使用更有效果，必須要擬定一個完整的色彩計畫。

進行配色時，謹記KISS原則（KeepitSimple,Stupid），盡可能減少使用色彩，避免使用過多的顏色。

進行網頁設計時，我們可以思考以下六種顏色： 主色 可以延續Logo或企業形象的標準色，例如：可口可樂的主色是紅色、星巴克的主色是綠色，這都是讓人印象深刻的品牌顏色，不同的顏色有著不同的色彩意象，我們可以透過聯想來找出適合自己的主色，例如：象徵熱情的紅色、象徵自然的綠色等。

次要色 用於一般的按鈕、標題、超連結等，可以輔助主色的呈現，一般會選擇一至三種搭配主色。

配色可以採用以下四種方案： 1.單色配色：採用與主色相同的基色，單色配色很容易搭配，可使畫面產生和諧感。

圖片來源：PatchProperty 2.相近色配色：採用與主色相關、不相互衝突的色彩。

圖片來源：SuperbAI 3.對比色配色：採用與主色相對立的色彩，具有強烈對比，可以吸引使用者的注意力。

圖片來源：Owltastic 4.中性色配色：主色與中性色（黑、白、灰）搭配，可以引起視覺衝擊與聚焦。

圖片來源：anime.js 按鈕顏色 1.一般按鈕：使用最普遍，主要目的是讓使用者知道有連結等用途，一般採用主色或次要色呈現即可。

2.呼籲行動按鈕(CalltoAction)：引導使用者點擊，常用於宣傳頁、登入頁，同一個畫面不會出現太多次，一般採用與主色或次要色對比強烈的顏色。

圖片來源：Liquid 文字顏色 1.超連結：用以連結至其他網頁，一般採用主色或次要色呈現，並加上下底線。

2.主要文字：呈現網頁主要資訊，以背景色全白(#FFFFFF)為例，較適合閱讀的文字顏色範圍為#333333到#666666。

3.次要文字：網頁次要資訊，如備註欄位等，採用比主要文字更淺的灰色，設定時需注意行動裝置的閱讀性是否良好。

常用灰色色表 冷灰色與暖灰色的使用時機針對網頁主色調搭配使用的灰色，若想呈現一致的暖色調可以搭配暖灰色（略帶紅色的灰色）；呈現冷色調則可以搭配冷灰色（略帶藍色的灰色） 裝飾線顏色 主要用以分隔文字資訊、區域，如邊框、表單、分隔線(Divider)。

採用比次要文字更淺的灰色，設定時需注意行動裝置的辨識度。

其他 白色：用於深色底搭配的文字或圖示，提升其可讀性與辨識度。

背景色：用於段落與段落的區隔或是突顯內容資訊。

推薦配色苦手的參考網站 當你毫無頭緒的時候，不妨嘗試從其他的設計師的作品獲得靈感，在此推薦以下網站：Dribbble：推廣平面設計、網頁設計、插畫、攝影等其他創造性領域的商業社交平台。

Behance：提供創意專業人員展示作品及觀摩他人創作的線上平台。

一起為網站進行色彩計畫吧！ 配色技巧是可以經由不斷努力與累積而提升，好的配色可以連結使用者的記憶，提昇品牌形象，進而影響服務對象對你的信任度。

期望透過以上文章，可以讓你更加了解色彩的搭配，並實際應用在網頁設計上，同時歡迎分享你們的色彩計畫！ 想看看色彩計畫如何實踐到網頁設計上，可以閱讀這一篇：最佳化你的Elementor–Fonts/Color/Section一次搞定🙂 參考資料 滬江網（2019.04.25）。

七條定律，讓配色更加美好【滬江網】。

取自https://www.hujiang.com/fyuid_s/p889838/ 3年2班程遠（2019.04.25）。

看過那麼多UI配色指南，這篇可能是最全面的（附大量實例）【優設網】。

取自https://www.uisdc.com/ui-color-design-guideline 卡斯伯（2019.04.25）。

鐵人賽：色彩運用(3)–按鈕的配色【卡斯伯】。

取自https://wcc723.github.io/design/2018/10/24/button-color/ 延伸閱讀 如何在網站置入聊天按鈕？GetButton教學 5個網頁設計必加書籤的參考網站，適合發想、提案、開發 如何在WordPress文章標題前面自動加入編號？ 相關標籤： 網頁色彩網頁設計網頁配色 SHARE 分享在facebook 分享在twitter 分享在linkedin WRITTENBY HendChen 嗨，我是Hend！專長於網頁設計、UI設計、品牌設計，熱愛參與社群活動、分享設計新知。

我的英文名字取自中文名字發音，發音和手的英文“hand“沒有差異，如果您正面臨網站設計的困擾，我很樂意成為協助您的那雙手！ 目錄 Subscribe Email免費訂閱 想了解更多嗎？歡迎與我聯繫。

Let'sConnect Go ©2022AllrightsReserved.DesignbyHendDesign | 隱私權政策 ABOUT WORKS PROCESS SERVICE BLOG CONTACT 選單 ABOUT WORKS PROCESS SERVICE BLOG CONTACT Hend Instagram