RGB、HSL、HSV、CMYK、LAB 五種模型如何互換？色相環怎麼運作？配色法則、WCAG 對比、色盲模擬——每個概念都能親手拖拖看。
同一顆顏色，五種說法。拖任何一個滑桿，其餘四組模型會即時同步——因為它們共用同一份「真值」：一組 sRGB 浮點數。先從 RGB／HSL／HSV 建立三軸直覺，再展開進階模型。
提示：所有滑桿軌道的漸層都即時反映「這根拉桿實際代表什麼」。
RGB 是螢幕發光三原色的比例；HSL／HSV 把顏色拆成「色相・彩度・明亮」，但兩者對「亮」的定義不同（見 M2）；CMYK 是印刷減色法的教學近似，並非真實印刷色彩管理；LAB 則以「人眼感知均勻」為目標設計，其中 L 是亮度、a 是紅綠軸（−128~127）、b 是黃藍軸（−128~127）。
sRGB → linear：c ≤ 0.04045 ? c/12.92 : ((c+0.055)/1.055)^2.4
灰階（彩度 S=0）時色相在數學上無意義，工具會保留你上一次選的色相，滑桿才不會亂跳。CMYK 純黑（K=1）時分母為 0，已特別處理避免除以零。LAB／CMYK 算出的顏色若超出螢幕能顯示的範圍，會被裁切並明確提示，不會悄悄失真。
精度註記：M4 的相對亮度採 WCAG 圓整係數（0.2126／0.7152／0.0722）；此處 RGB→XYZ 用高精度係數（0.2126729…）。兩者各自在其標準下正確，數值會有微小差異，屬預期而非 bug。
圓周代表色相 H、離圓心的距離代表彩度 S，旁邊的直條則是明度 V。拖拖看，感受三個軸各自控制什麼。
固定另外兩軸，只掃一個軸，感受「色相變」「彩度變」「明度變」分別是什麼視覺感受（此區為獨立示範，不影響上方主顏色）。
同一個鮮豔的純色，在 HSL 中最鮮豔時 L=50%；在 HSV 中最鮮豔時卻是 S=100%、V=100%。HSL 的 L=100% 永遠是白色；但 HSV 的 V=100% 配上低彩度只是「很淺的顏色」而非白色——這是初學者最常混淆的地方，也是這個模組刻意用 HSV 畫色相環（半徑=彩度）的原因：HSL 沒有一個乾淨的「半徑」可畫。
鍵盤操作：聚焦色相環後，會依序取得「色相 H」與「彩度 S」兩根具名滑桿，方向鍵各自調整（Shift 加速）；螢幕報讀者會同時聽到兩軸的當前值。
以目前主顏色為基準，套用五種經典配色法則。角度運算發生在色相輪上，不是直接內插 RGB 數值——這樣配出來的顏色才不會混濁。
點任一色票即可複製 HEX 色碼。
互補 H+180° ｜ 類比 H±30° ｜ 三角 H, H+120°, H+240° ｜ 分裂互補 H, H+150°, H+210° ｜ 矩形 H, H+60°, H+180°, H+240°
所有角度都以 360° 為一圈環繞（mod 360）。點一下任何色票即可複製 HEX 色碼。
選前景（文字）與背景色，即時算出對比比值，並用文字＋圖示（不只靠顏色）標示是否通過各項門檻。前景預設鏡像目前主顏色，隨時按「用主顏色」讓兩邊同步。
敏捷的棕色狐狸跳過懶惰的狗。The quick brown fox jumps over the lazy dog.
相對亮度 L = 0.2126·R + 0.7152·G + 0.0722·B（R/G/B 已做 gamma 展開）
對比度 = (L淺 + 0.05) / (L深 + 0.05)
判定 Pass/Fail 使用未四捨五入的原始比值——避免像 4.499 這種數字被誤判為通過 4.5 門檻。一般文字 AA≥4.5、AAA≥7；大型文字（≥18pt 或 ≥14pt 粗體）AA≥3、AAA≥4.5；非文字 UI 元件邊界 ≥3。
切換三種色盲類型，拖動「嚴重度」滑桿，看看目前的主顏色、配色組合、以及一組示範 UI 在色盲眼中會變成什麼樣子。
只靠顏色（易混淆）
顏色＋圖示＋文字（穩健）
色盲的本質是兩種錐細胞的反應曲線太接近，導致大腦難以分辨特定顏色差異——不是單純看不到某個 RGB 通道。這裡採用 Machado, Oliveira & Fernandes（2009）提出的線性投影矩陣，在 linear RGB 空間中模擬錐細胞反應的整合效果（效果等同於 LMS 空間投影）。
嚴重度滑桿：色盲是連續光譜而非「有／無」的二分。滑桿 0% 為正常視覺、100% 為完全二色視（dichromat），中間值以「單位矩陣 ↔ 二色視矩陣」線性內插近似漸進嚴重度——這是近似模擬，並非醫學精確判定。
信度說明：藍盲（tritan）模型信度最低、severity=1.0 已屬外插，誤差最大，僅供概念參考。
設計啟示：如同 M4 對比度所強調的，不要只靠顏色傳達錯誤／成功、通過／未通過等資訊，務必搭配文字或圖示。