• 色相：指色彩的名稱（如紅、黃、藍），是區分不同顏色的基礎。在色輪上，相鄰的顏色（如紅與橙、藍與綠）稱為 “鄰近色”，對比強烈的顏色（如紅與綠、黃與紫）稱為 “互補色”。

• 明度：指色彩的明暗程度（如淺紅、深紅），明度差異大的顏色搭配會更有層次感。

• 飽和度：指色彩的鮮艷程度（如純紅、灰紅），高飽和度的顏色更活潑，低飽和度的顏色更柔和。

• 如何選擇主色調？：主色調應與品牌或網頁主題強相關。例如：

• 科技類品牌（如數碼產品、軟件）常用藍色（傳遞專業、可靠）；

• 健康類網頁（如醫療機構、健身 APP）常用綠色（象征健康、自然）；

• 兒童類網站（如玩具店、親子平臺）常用黃色或橙色（體現活潑、溫暖）。

• 主色調的占比：主色調在頁面中的占比應達到 60%-70%，主要用于背景、大標題、品牌 LOGO 等大面積區域，形成視覺主導。例如，小米官網以橙色為主色調，從導航欄到產品展示區的重點標注，都貫穿這一顏色，強化品牌記憶。

網頁設計

• 輔助色的選擇邏輯：

• 與主色調為鄰近色（如主色是藍色，輔助色可選綠色或紫色），搭配和諧自然，適合簡約風格的網頁（如博客、企業官網）；

• 與主色調為對比色（如主色是黃色，輔助色可選紫色），對比強烈，適合需要突出重點的場景（如促銷按鈕、警示信息）。

• 輔助色的使用規則：占比控制在 20%-30%，且只用于小面積元素。例如，主色調為藍色的電商網站，可用橙色作為輔助色，用于 “加入購物車”“立即購買” 按鈕，既與藍色形成對比吸引點擊，又不會覆蓋主色調的主導地位。

• 中性色的具體應用：

• 白色 / 淺灰：常用于頁面背景、卡片底色，增加留白，減少視覺壓迫感，讓內容更易閱讀（如正文背景用白色瑞特網絡，文字用深灰，提升可讀性）；

• 深灰 / 黑色：常用于正文文字、邊框線條，保證信息清晰，避免用純黑色（可改為 #333333），減少刺眼感；

• 不同明度的灰色：可用于區分頁面層級（如淺灰背景的卡片、中灰的分割線），增強頁面的層次感。

• 中性色的占比：通常占頁面的 50%-60%，是主色和輔助色的 “背景板”。例如，蘋果官網大量使用白色背景，黑色文字華夏志誠，僅用少量品牌色（銀色、灰色）點綴，簡潔高級的風格正是中性色運用的典范。

• 公式一：單主色 + 中性色：適合簡約型網頁（如個人博客、企業展示站）。選擇 1 種主色（如深藍色），搭配白色背景、深灰文字，僅在按鈕、標題處用主色強調，整體干凈利落，不會出錯。

• 公式二：主色 + 鄰近輔助色 + 中性色：適合需要一定層次感的網頁（如電商分類頁、資訊站）。例如，主色選綠色（象征自然），輔助色選黃色（鄰近色，傳遞活力），背景用白色，文字用深灰，適合農產品、戶外用品類網站。

• 公式三：主色 + 互補輔助色 + 中性色：適合需要突出重點的網頁（如促銷活動頁、 landing page）。例如，主色選紅色（刺激消費），輔助色選綠色（互補色，用于 “立即搶購” 按鈕），背景用淺灰，對比強烈且有中性色平衡，既吸引注意力又不雜亂。

• 顏色數量過多：同一頁面使用超過 4 種顏色（主色 + 輔助色 + 中性色除外），會導致視覺混亂。解決方法：嚴格控制主色 1 種、輔助色 1-2 種，其余用中性色填充。

• 飽和度太高：大面積使用高飽和度顏色（如純紅、純黃），容易讓用戶視覺疲勞。解決方法：降低主色飽和度（如將純紅 #FF0000 改為 #FF5555），保持活力的同時更顯柔和。

• 忽視可讀性：文字與背景色對比度太低（如淺灰文字配白色背景），導致閱讀困難。解決方法：用 “對比度檢測工具”（如 WebAIM Contrast Checker）驗證，確保文字與背景的對比度不低于 4.5:1。