# 顏色的重要性與課程介紹 * 顏色能喚起情感,在品牌設計中代表的不只是色彩,而是品牌識別的一部分 * 課程涵蓋色彩理論,包括色輪的使用、創建色彩和諧、色彩調色板、RGB與CMYK的應用 * 透過 Envato Elements 範例理解色彩理論在實務中的應用 # 色輪與顏色分類 * 色輪由牛頓於 1666 年發明,用來理解顏色之間的關係  * 三原色:紅、黃、藍,可單獨使用形成對比色彩  * 三次色(Secondary Colors):由三原色混合而成,包括綠、紫、橙  * 三次色(Tertiary Colors):由原色與二次色混合,例如橙黃、紅橙 * 對比強烈的顏色不常混合使用,因為飽和度高,容易互相競爭 # 顏色的屬性  * Hue(色相):色輪上的任一顏色 * Saturation(飽和度):顏色的鮮豔程度 * Value(明度):顏色的亮暗程度  * Shade(陰影):加黑色使顏色變暗  * Tint(色調):加白色使顏色變淡  * Tone(色度):加灰色調整顏色 # 顏色的溫度  * Warm colors(暖色):與太陽、能量、火相關,如紅、黃、橙 * Cool colors(冷色):與平靜、安寧相關,如藍、綠、紫 * 每種溫度的顏色都可有不同的陰影、色調與色度變化 # 色彩和諧與配色  * 色彩和諧(Color Harmony)指顏色搭配平衡、視覺舒適 # 補色(Complementary)  * 兩個色輪上相對的顏色 * 創造強烈對比,例如紅與綠、橙與藍 * 常用於突出主要元素 # 類比色(Analogous)   * 主色與相鄰色組合 * 配色自然、平和 * 可用於漸層或同色系設計  # 單色(Monochromatic)   * 單一色相使用不同的陰影、色調與色度 * 簡單且統一 * 可增加深度感與層次 # 三色(Triadic)   * 色輪上均勻間隔的三種顏色形成三角形 * 常用組合為三原色或三次色 * 顏色使用均衡,不會單一顏色過於突出 # 四色(Tetradic)   * 由兩組補色組成 * 一種顏色作主色,其餘作輔助或點綴 * 可透過調整陰影、色調與色度控制鮮豔度 * 用於營造多樣化配色效果,但需注意主次分明 --- # RGB 與 CMYK 色彩模式  * 設計作品依輸出媒介選擇合適色彩模式可節省時間、保持檔案整潔  * RGB 用於螢幕顯示,三色混合得白色  * CMYK 用於印刷,從白紙開始減色到黑色 * 螢幕顏色通常比印刷更鮮豔,某些螢光色需使用專色才能印刷 * RGB 適用於螢幕媒介 * CMYK 適用於實體印刷 # 色彩心理學與品牌應用  * 顏色可喚起特定情感或行為,不同文化、年齡、性別、經驗會影響感知 * 紅色象徵激情、力量、能量 * 藍色象徵平靜、信任、穩定 * 綠色象徵自然、成長、寧靜 * 黃色象徵快樂、活力、親和 * 紫色象徵奢華、尊貴、權力 * 橙色象徵樂觀、創意、溫暖 # 建立配色盤的流程概念 * 以色輪與色彩和諧作為配色指引 * 先選定一個主色作為整體基礎 * 配色過程中需反覆調整色相、飽和度與明度 # 補色配色盤實作  * 選擇藍色作為主色 * 依補色原則選擇其對應色附近的黃色與橙色作為強調色 * 使用黑色矩形測試各色的飽和度與對比 * 調整橙色讓其介於藍與黃之間的視覺強度 * 初步以黑與白作為中性色 * 嘗試將黑白改為偏向主色系的中性色以增加整體一致性 * 透過反覆微調找到合適的色調、色度與陰影 # 類比色配色盤實作  * 使用綠色、黃綠色與黃色作為主要類比色 * 選擇對比側的洋紅色作為輔助色 * 加入偏中性的綠色作為平衡 * 透過調整第二主色來拉開主色之間的對比 * 依設計直覺決定是否降低洋紅色的亮度或轉為紫色 * 使用黑色矩形檢查飽和度與明度是否平衡 * 最終形成明亮但不刺眼、兼具活潑與穩定的配色盤 # 四分色配色盤實作  * 使用兩組互補色作為配色基礎 * 選定一個顏色為主導色,其餘作為點綴 * 透過調整色塊比例表現主次關係 * 主色設定為高飽和度,其餘顏色降低亮度或彩度 * 加入非常淡的中性色作為視覺緩衝 * 反覆調整以取得平衡與和諧 # 配色調整的設計思維 * 不同的色調、色度與陰影會帶來不同情緒與感受 * 顏色相同但品質不同,傳達的情緒也會不同 * 設計直覺在最終配色決策中非常關鍵 # 課程內容重點回顧 * 顏色能有效傳達情感與品牌概念 * 色輪是理解與建立配色的基礎工具 * 色彩和諧能幫助快速建立有效配色盤 * RGB 與 CMYK 的差異決定設計輸出的媒介 * 色彩心理學能強化設計溝通效果 # 課程學習重點回顧 * 顏色可喚起情感、傳達品牌與概念 * 學會使用色輪、色彩分類、色彩和諧、RGB/CMYK 差異 * 了解色彩心理學並結合調色板設計實務 * Envato Elements 提供高品質範本、字型與照片資源 --- # 建立配色盤的流 ## 選擇配色規則 * 先決定要使用哪一種色彩和諧方式 * 常見規則包含補色、類比色、三色或四色配色 * 配色規則決定顏色在色輪上的選取範圍 ## 設定主色 * 先選定一個顏色作為整個調色盤的核心 * 主色通常佔最大比例 * 其他顏色皆圍繞主色搭配 ## 選擇輔助色與強調色 * 依照選定的配色規則,從色輪上挑選相關顏色 * 輔助色用來支撐主色 * 強調色用於製造視覺對比與焦點 ## 調整顏色品質 * 針對選定顏色調整明度、飽和度與色調 * 同一色相可透過不同陰影、色度與色調呈現不同感覺 * 避免所有顏色都過於鮮豔 ## 檢查對比與層級 * 比較各顏色之間的明暗與飽和度差異 * 確保主色最明顯,其他顏色不搶戲 * 建立清楚的視覺層級 ## 設定中性色 * 中性色用來平衡整體畫面 * 不一定使用純黑或純白 * 可選擇帶有主色系傾向的中性色以維持一致性 ## 控制顏色比例 * 各顏色使用比例需有主次之分 * 高彩度顏色通常只作小面積點綴 * 透過比例避免畫面過於混亂 ## 最後微調 * 在整體結構確立後進行細部調整 * 微調顏色深淺與彩度以達到平衡 * 以整體和諧與視覺感受為判斷依據 --- # Terminology * 色彩學(Color Theory):研究顏色如何相互作用及影響觀者情緒的學問 * 色輪(Color Wheel):將顏色按照關係排列成圓形,用於理解色彩搭配 * 原色(Primary Colors):紅、黃、藍三種基本顏色,可混合生成其他顏色 * 次色(Secondary Colors):由兩個原色混合產生的顏色,如綠、橙、紫 * 三次色(Tertiary Colors):由原色與次色混合產生的顏色 * 色相(Hue):純色本身,不添加黑、白或灰 * 飽和度(Saturation):顏色的鮮豔程度,高飽和度顏色鮮明,低飽和度顏色黯淡 * 明度(Value):顏色的明暗程度 * 色階(Shade):在顏色中加入黑色使其加深 * 色調(Tone):在顏色中加入灰色使其降低鮮豔度 * 色版(Tint):在顏色中加入白色使其變淡 * 冷暖色(Color Temperature):顏色給人的心理感受,暖色如紅、橙、黃,冷色如藍、綠、紫 * 補色(Complementary Colors):色輪上相對的兩種顏色,形成強烈對比 * 類似色(Analogous Colors):色輪上相鄰的顏色,形成協調柔和的配色 * 單色配色(Monochromatic):單一色相,使用不同的色階、色調與色版 * 三色配色(Triadic Colors):色輪上等距的三種顏色,形成平衡且活潑的配色 * 四色配色(Tetradic Colors):兩組補色組合的配色方案,通常一色為主色,其餘為輔色 * 主色(Dominant Color):在配色中使用最多、最突出的顏色 * 輔助色(Accent Color):在配色中用於點綴或強調的顏色 * 漸層(Gradient):從一種顏色平滑過渡到另一種顏色的效果 * 色彩調和(Color Harmony):不同顏色組合後視覺上平衡且和諧 * 對比色(Contrasting Colors):視覺上差異明顯的顏色組合 * 配色比例(Color Proportion):不同顏色在設計中占的面積或比重 * 色彩心理學(Color Psychology):顏色對情緒、感受及行為的影響 * 飽和色(Vivid Color):高度鮮豔、明亮的顏色 * 去飽和色(Desaturated Color):降低鮮豔度的顏色 * 中性色(Neutral Color):灰色、米色、黑白等不偏冷暖的顏色 * 補色對比(Complementary Contrast):使用補色創造視覺焦點 * 類似色協調(Analogous Harmony):使用相鄰顏色創造柔和感 * 單色層次(Monochromatic Depth):透過不同明暗、飽和度與色調形成層次 * 色彩強度(Color Intensity):顏色的鮮明度或活力 * 色彩對比(Color Contrast):不同顏色之間的明暗或色相差異 * 色彩調整(Color Adjustment):修改顏色的亮度、飽和度或色相 * 配色設計(Color Palette Design):選擇一組協調的顏色用於設計 * 色彩統一(Color Consistency):保持設計中顏色的一致性 * 暖色系(Warm Colors):給人溫暖、活力或刺激感的顏色 * 冷色系(Cool Colors):給人平靜、沉穩或冷靜感的顏色 * 高對比(High Contrast):顏色差異大,吸引注意 * 低對比(Low Contrast):顏色差異小,營造柔和感 * 補色點綴(Complementary Accent):用補色作為小面積強調 * 色彩層次(Color Layering):通過色階、色調和色版創造深度 * 配色比例控制(Color Ratio Control):調整主色與輔色使用比例 * 色彩調性(Color Mood):顏色組合帶來的氛圍與情緒 * 色輪分區(Color Wheel Segmentation):將色輪劃分為主要配色區域 * 亮色(Light Color):明亮的顏色,可用於突出元素 * 暗色(Dark Color):較深的顏色,用於背景或陰影 * 中性色調(Neutral Tone):帶灰的顏色,用於平衡其他鮮豔色 * 色彩層次對比(Value Contrast):不同明度顏色之間的對比 * 色彩互補(Color Complementation):使用互補色達到和諧與平衡 * 調和對比(Harmonious Contrast):在統一感中加入對比元素 * 色彩應用(Color Application):在品牌或設計中合理使用顏色 * 色彩統整(Color Cohesion):整體配色協調,避免突兀 * 色彩深淺(Color Depth):顏色的明暗及層次表現 * 色彩分級(Color Grading):調整顏色以統一風格或氛圍 * 顏色模式(Color Mode):用於決定設計輸出方式的色彩系統,例如RGB或CMYK * RGB模式(RGB Color Mode):紅、綠、藍三原色的加色模式,適用於螢幕顯示 * CMYK模式(CMYK Color Mode):青、品紅、黃、黑四色減色模式,適用於印刷 * 加色法(Additive Color):RGB模式使用的混色方式,三色相加形成白色 * 減色法(Subtractive Color):CMYK模式使用的混色方式,顏色相加吸收光線形成黑色 * 螢幕顯色(On-Screen Color):適用於數位裝置的顏色呈現 * 印刷顯色(Print Color):適用於紙張或實體媒介的顏色呈現 * 潤色色彩(Pantone Color):專用印刷顏色,用於精確色彩匹配 * 色彩空間(Color Space):顏色表現範圍與色彩模式的數學表示 * 色彩飽和度調整(Saturation Adjustment):改變顏色的鮮豔程度 * 色彩明度調整(Value Adjustment):改變顏色的明暗程度 * 色彩對比(Color Contrast):不同顏色之間的差異,用於強調或分層 * 主色(Primary Color):設計中最主要使用的顏色 * 輔助色(Accent Color):用於點綴或突出元素的顏色 * 中性色(Neutral Color):黑、白或灰色,平衡整體配色 * 色彩比例(Color Ratio):設計中色彩使用的面積或比重分配 * 顏色調整(Color Tweaking):通過修改色相、飽和度或明度達到理想效果 * 色彩層次(Color Depth):不同色彩明暗和飽和度形成的視覺層次 * 色彩統一(Color Cohesion):確保整個設計中色彩和諧一致 * 色彩心理學(Color Psychology):顏色對情緒、認知及品牌形象的影響 * 紅色心理(Red Psychology):象徵熱情、力量與激情 * 藍色心理(Blue Psychology):象徵信任、穩定與冷靜 * 綠色心理(Green Psychology):象徵自然、成長與平靜 * 黃色心理(Yellow Psychology):象徵快樂、活力與親和力 * 紫色心理(Purple Psychology):象徵高貴、奢華與權力 * 橙色心理(Orange Psychology):象徵創意、樂觀與熱情 * 顏色平衡(Color Balance):調整各色在設計中的視覺重量 * 色彩主導(Dominant Color):在多色設計中占主導地位的顏色 * 色彩比例控制(Color Proportion Control):控制主色與輔色的視覺比重 * 色彩中和(Color Neutralization):使用中性色或降低飽和度以平衡設計 * 顏色對比測試(Contrast Testing):檢查配色中高低對比的效果 * 顏色直覺(Color Intuition):設計師依經驗選擇或調整顏色的能力 * 色彩和諧(Color Harmony):不同顏色組合形成的視覺平衡感 * 補色配色(Complementary Color Scheme):使用色輪對立的兩種顏色 * 類似色配色(Analogous Color Scheme):使用色輪上相鄰的顏色 * 三色配色(Triadic Color Scheme):使用色輪上等距的三種顏色 * 四色配色(Tetradic Color Scheme):兩組補色形成的配色方案 * 色彩調整工具(Color Adjustment Tool):用於修改色相、飽和度、明度的工具 * 配色板(Color Palette):設計中使用的一組協調顏色 * 主色與輔色分層(Primary & Accent Layering):主色突出,輔色作點綴 * 色彩透明度(Color Transparency):改變顏色的透明度以達到層次感 * 色彩測試(Color Testing):實際應用中檢驗配色效果 * 色彩搭配(Color Matching):選擇相互協調的顏色組合 * 色彩修正(Color Correction):調整顏色以符合預期的視覺效果 * 色彩強弱控制(Color Intensity Control):調整顏色鮮明程度以達到平衡 * 色彩分層設計(Color Layering Design):使用不同色彩層次創造深度 * 配色驗證(Palette Validation):確保配色在不同媒介和光源下效果一致 * 色彩情緒(Color Mood):設計中顏色帶來的情感或氛圍 * 色彩統整工具(Color Cohesion Tool):確保設計中色彩協調一致 * 設計色彩指南(Design Color Guide):幫助設計師建立與維持統一配色 * 色彩優先級(Color Hierarchy):決定哪種顏色在視覺中最突出 * 色彩微調(Color Fine-Tuning):根據設計需求對顏色進行精細調整 * 色彩範圍(Color Gamut):顯示設備或印刷可呈現的顏色範圍
×
Sign in
Email
Password
Forgot password
or
Sign in via Google
Sign in via Facebook
Sign in via X(Twitter)
Sign in via GitHub
Sign in via Dropbox
Sign in with Wallet
Wallet (
)
Connect another wallet
Continue with a different method
New to HackMD?
Sign up
By signing in, you agree to our
terms of service
.