共通設計理論教材 / Class LLL

色彩屬性、關係與面積

改了哪一種差異，誰又佔了更多畫面？

分開改色相、明暗、強度和面積，觀察同一組色在不同關係中的差異。主輔色與互補只是描述及選擇，不能替代觀看目的、必要辨識或色彩管理；沒有唯一好看比例。

撰寫與維護：Class LLL · Lab Light Label｜預估閱讀 13 分鐘

開啟互動教材查看參考來源

閱讀目標

以色相、明暗和強度分開描述差異
說明冷暖及色輪關係依比較條件而定
以真面積說明主輔與強調的取捨
加上形狀或文字線索，再看成品尺寸
分清選配色與解讀／轉換顏色資料

適用條件與學習範圍

兩張都用了同一組色，為什麼感受和辨識可能不同？要改的是色相、明暗、強度、面積，還是觀看條件？

不需要先會Photoshop；選一個觀看目的，例如分辨主角與陪襯，能指出正在比較哪兩個區域即可。明暗關係可隨時補讀。

能在一次只改一項的比較中，指出改變的屬性和面積取捨；提出兩種有理由的配色方案，保留必要辨識，並分清配色決策與描述檔／設備造成的差異。

跨軟體觀察理論；HSL只是本站sRGB編碼控制，不是感知均勻色差、顏料／墨水混合、色溫、色盲模擬或普遍美感定律。明暗、色調映射和色彩管理沿唯一知識。

原理與判斷

色彩不是只挑幾個色碼。Getty的形式分析以hue、value、intensity描述色彩的種類、明暗與強弱；Albers的教學則提醒觀察相鄰條件及互相作用。把同一色放大、縮小或換底，即使數字沒變，整體關係也可能不同。這些語彙幫你提出可比較的問題，並不保證每個人都感到一樣或喜歡同一結果。先說想傳達什麼、哪些內容必須分辨，再隔離一項變因。若只把「互補」「高飽和」「60／30／10」當成好看保證，便容易忽略明暗、面積、文字、材質及輸出條件。本站提供原創色票和幾何樣本，讀數只描述實際編碼與像素；是否支持目的仍需你觀察與提出反例。

色相：是哪一類色，不是亮不亮

色相可描述偏紅、黃、綠、藍等類別。先固定同一形狀、面積、HSL的S和L，只改強調色H，觀察它和背景的關係；改H並不是替同一感知明暗換名字，因為這個數值模型不保視覺明度相等。適合先說「改的是哪一類色」，再問還有哪些差異一起出現。本站主色H210，按同色相210°／相鄰240°／對側30°只改強調色H，其他控制不偷換。S為0時顏色是灰階，改H可能完全不改RGB，這是模型條件，不是按鈕壞掉。終點能指出改了H與哪些數值維持不變，不把色相名稱當充分品質判斷。依據：Getty、CSS 顏色4。

明暗：觀察value與HSL L不是同一把尺

value談看起來有多明或多暗；先看主體和相鄰區域，必要時回明暗頁檢查局部與全圖的不同。HSL L是用編碼RGB最大／最小分量建立的座標，不是人眼感知明度或螢幕光度量測；藍和黃同L50也不代表同樣亮。本站L滑桿讓你隔離此編碼變數，同時顯RGB讓模型可查。適合比較變亮／變暗對必要輪廓的影響；不能說「L一樣所以明暗不影響」。終點在具體相鄰區指出哪些形狀仍可分，若要分析明暗而非色相，就補讀唯一明暗知識，不另背一個普遍L門檻。依據：Getty、CSS 顏色4、明暗觀察。

強度：鮮明與灰濁，先交代比較條件

intensity描述顏色的鮮明或灰濁程度；飽和度、彩度等技術量尺各有定義，不應混成一個放諸所有色彩空間的百分比。本站用HSL S當有限控制，固定H與L降低S，會走向該L的灰；這是數學路線，不是加灰顏料或指定墨量。適合觀察哪些區域因此退讓、哪些資訊變難分。不同H即使S相同，感到的強度也不保相同；不把大S直接寫成更吸睛或更有品質。終點用同一組條件描述強弱的改變，再檢查其他資訊，不把柔和一律當失敗或高飽和一律當重點。依據：Getty、Albers、CSS 顏色4。

冷暖：在同場比較，不是Kelvin讀數

紅黃常被描述偏暖，藍常被描述偏冷，但具體判斷依相鄰色、明暗、強度、經驗和情境；不能把一個色名固定成所有畫面同樣的空間或情緒效果。先用同色異底，讓同一中心色配較偏橙與偏藍的底，記錄你的描述是否改變；若看不出預期差異，也可說明觀察條件。這不是攝影白平衡的色溫Kelvin，也不是暖色一定前進、冷色一定後退的物理規則。適合比較一組色的相對方向，終點說「相對誰較暖／冷、要支持什麼目的」，而非僅靠冷暖替代明暗與辨識檢查。依據：Getty、Albers1934。

相鄰與互補：先問是哪一種色輪

相鄰通常指色輪上靠近，互補指指定輪上的對側；Adobe的配色工具把它們列為生成方案的起點，不是美感認證。本站明定HSL的數值圓周：主H210，相鄰樣例+30°到240，對側+180°到30；HSL角度本身不感知均勻，同30°差也可能感到很不一樣。畫家RYB輪、螢幕RGB加色和CMYK印刷減色不是可以任意互換的一套配方；兩個HSL對側色也不表示實際顏料一混就中性灰。適合產生待比較方向，再另調明暗、強度、面積與用途。終點說明使用哪個輪、哪個關係及仍需檢查什麼，不把互補自動當高辨識或相鄰自動當協調。依據：Adobe兩色／色輪、CSS 顏色4。

主色、輔色與強調：角色由目的決定

主色可提供大範圍基調，輔色支援組織，強調色留給需要區別的資訊；這是本活動的角色約定，不是顏色本身永久的身份。小面積高差異也可能很明顯，大面積未必就是讀者先看處；文字、位置、輪廓和任務仍會影響。本站主／輔／強調用○□△及表格名稱識別。角色樣本只是用來比較一種安排，不規定你所有作品都要三色或只有一個強調色。終點先給每個角色用途，再檢查強調是否犧牲必要內容；如果希望次要資訊仍可閱讀，不能只把它退到和底完全相同。依據：原創觀察設計、Albers的相對比較方法。

面積與比例：真占用，不是60／30／10法則

改面積時保持各色色碼；本站輔色區固定，放大強調色會取走主色範圍，因而改變三者比例。目標15%經整數光柵化可能是15.039%，表格列真正192×128角色像素，不把滑桿意圖冒充測得面積。加入中性形狀標記後，面積統計仍指標記前的角色區，另列覆蓋像素。 60／30／10可作某一提案的起點，不能保證所有媒介／內容／觀眾都好看或清楚。適合比較主輔競爭與強調範圍，換方片／圓片時也重看形狀條件。終點提出至少兩個比例，說明哪份資訊獲得空間、哪份讓出，保留目的需要的內容；不是把某個比例當考試答案。依據：本站原創幾何比較，比例解釋是教學設計而非通用定律。

同色異底：數字相同，觀察可能不同

切此模式，左右中心的位置、尺寸及RGB完全相同；左底固定，右只改底色相或HSL L。用原生窗口和表格確認中心不是偷偷變色，再記錄你覺得哪個較亮、較灰、較冷暖，或沒有明顯差異。觀察不同不必當答錯，也不要求每位讀者看見同一錯覺。這借鑑Albers隔離條件的方法，圖形與色票均為本站原創，不複製書中圖版。它不能預測人眼、證明知覺錯誤或校準顯示器；設備與觀看環境也會影響。終點能分開「RGB是否改了」「我的感受是否改了」「還要控制什麼條件」。依據：Albers Interaction of 顏色、本站原創示意。

辨識不只靠色相：再給形狀和文字線索

需要傳遞分類或狀態時，僅說紅色／綠色可能讓部分讀者無法分辨。W3C的Use of 顏色要求資訊有可見的額外提示；文字、形狀或圖樣可一起使用。本站加入○□△的中性標記，表格及語義控制也保留角色名稱，不以色票作唯一操作名稱。這不是色覺缺陷模擬，更不代表加一個圖形就完成全部可及性。標記縮小後可能消失，明暗太接近、筆畫太細或圖底複雜仍要查。終點在實際使用大小，以不用顏色名稱也能說出角色的方式重述資訊；必要文字保持可讀，不把整頁控制拿去做難讀實驗。依據：W3C Use of 顏色。

終尺寸與兩種形狀：不要只看放大色票

兩試片以192×128原創像素資料生成，96／48真正做編碼RGB面積平均，原生窗口每影像像素占1CSS像素。機構上的投影放大只幫你比對；它不是額外細節。小圖裡邊緣會混成新數值，細標記和窄色帶可能難辨，面積統計則仍指192參考區域，不冒充縮小後的同色像素數。適合先看需要保留的輪廓、主輔與標記；再換方片／圓片或另一份自己的版面。終點依成品用途決定色差、面積或額外標記要改哪項，不把放大預覽的清楚保證到小尺寸，也不宣稱本簡圖能量測所有人的可辨識性。依據：本站原創重算與觀看活動。

配色與色彩管理：問題不同，補讀方向也不同

如果想改作品關係，調整選色、明暗、面積和資訊組織；如果同一份數字換應用或設備後外觀不符，應先核來源描述檔、轉換、顯示與觀看條件。配色理論不能代替Assign／Convert的資料解讀，也不能靠換一組好看色票修正錯誤色彩設定檔。本活動為sRGB螢幕示意，沒有量測你的螢幕、紙墨、ICC或真實印樣。色票看來不同並不直接證明作品配色失敗。終點能把下一問說清楚：「我要改關係」或「我要保持／理解跨條件外觀」，沿描述檔唯一頁補讀，再返回保留此比較。依據：本站角色分工，完整色管條件沿相關知識。

步驟與觀察

先定必要辨識與觀看目的
例如讓三種活動類別可區分，或讓一個形狀作強調。說出哪些內容不能消失；先看固定參考與右樣本，記錄自己的描述，不以第一眼是否符合作者意圖判對錯。
只改一個屬性
保持面積和形狀，逐一試H、S、L，每次先回同條件再比較。按指定色輪關係只換H，讀RGB並觀察明暗是否也感到改變；S0試改H，指出模型何時沒有可見改變。
只改面積，再換形狀
保色碼，把強調目標從15%改35%，讀實際主／輔／強調比例；說明誰讓出空間。換方片／圓片再判，不拿某比例當普遍正確。
保持中心，換兩種底
切同色異底，中心RGB保持；一次改右底H或L，描述感受及不確定處。把數值不變和主觀相同分開，沒有看見差異也保留觀察。
加額外線索並看成品大小
加入形狀標記，切96及48原生窗口，看角色是否仍能說明。改一項改善需要的資訊，提出兩版取捨；補讀明暗／色彩管理再返回，重新整理也保目前條件。最後在任一繪圖工具或紙上換自己的內容重做，數字不照抄。

常見問題

HSL L相同，就當明暗已一樣

它是編碼座標，非感知明度。檢查指定相鄰區與觀看條件，補讀明暗，不把數值相等當所有人感受相等。

改H沒變色，或互補也不清楚

先查S是否0、L是否端點；色相關係不足以保辨識，另查明暗、強度、面積和額外提示。

使用三色與固定比例仍沒有重點

回觀看目的、必要資訊與競爭位置；比例只是提案，試兩版並說明取捨，不把更大或更鮮當必然焦點。

同色異底感受和別人不同

核中心真RGB、設備和環境，再描述你的觀察。這不是視力診斷或答題，不宣稱每人必見同一錯覺。

縮48後符號或角色分不開

看真正成品像素，增加可用形狀／文字線索，調必要明暗或面積；放大機構預覽不會恢復小圖細節。

換螢幕就重配整組色，或拿HSL補印墨

先分清配色與色彩設定檔／設備／紙墨條件；沿色管及實際交付方法，不從螢幕座標推實體混墨。

適用範圍與證據

原教材查核日期：2026-10-20 適用範圍：跨軟體視覺觀察；不限Photoshop或某操作平台。模型固定sRGB編碼8-bit幾何色樣，不包含印墨／ICC或實體色樣量測。來源狀態：7份一手教育、原作者基金會、產品及W3C文件已讀。基金會1934文章是歷史方法，色輪入口當代顯示Adobe Express；不複製圖版、不採情緒／和諧保證，CSS規範只支持座標與轉換。W3C理解文件是指引說明，不把本活動當整站認證。示意限制：原創方／圓片與3色色票、同中心兩底；HSL->RGB、實際角色像素、192／96／48真PNG及表格同模型。一次一控制，HSL不感知均勻、面積不作注意力分數；縮小為編碼RGB面積平均，不是物理混色。原生軟體實測：未Photoshop、字型、ICC或印刷／顯示設備實測；本頁是觀察活動，無需PS操作步驟。學習成效驗證：未真人試用、可辨識性測試或眼動／美感量測；個人描述不代表普遍結果，閱讀／操作不自動等於理解。

參考來源

來源依原教材逐頁維護；本次建立閱讀網址不代表重新完成原生軟體或真人學習測試。如遇版本差異或內容錯誤，歡迎來信提出具體段落與版本。