RGB色彩模式與十六進制顏色代碼：本質相同、表達不同

RGB色彩模式與網頁十六進制代碼（如 `#FF5733`）**表示的是同一種顏色**，只是表達形式不同。本文釐清二者關係、轉換方法與常見誤區。

本質關係

雙向轉換公式

// RGB → HEX
function rgbToHex(r, g, b) {
    return "#" + [r, g, b].map(x => x.toString(16).padStart(2, '0')).join('').toUpperCase();
}
// HEX → RGB
function hexToRgb(hex) {
    const clean = hex.replace('#', '');
    const bigint = parseInt(clean, 16);
    return [(bigint >> 16) & 255, (bigint >> 8) & 255, bigint & 255];
}

常見誤區澄清

• ❌ **誤區**：十六進制是另一種色彩模式（如CMYK、HSB）。
  ✅ **事實**：十六進制**只是RGB數值的另一種寫法**，同屬RGB色彩空間（通常指sRGB）。
• ❌ **誤區**：`#F00` 和 `#FF0000` 不同。
  ✅ **事實**：CSS允許3位簡寫，瀏覽器自動擴展為6位（`#F00` → `#FF0000`）。
• ❌ **誤區**：十六進制不支持透明度。
  ✅ **事實**：現代瀏覽器支持8位 `#RRGGBBAA` (如 `#FF573380` 50%透明) 和 4位 `#RGBA` 簡寫。

色彩模式大家族定位

你提到的「色彩模式」通常指色彩空間/模型：

• RGB：螢幕顯示、Web設計（sRGB、Adobe RGB、DCI-P3）。
• CMYK：印刷出版（減色模型）。
• HSB/HSL：直觀調色（色相、飽和度、亮度/明度）。
• Lab：設備無關、感知均勻（專業圖像處理）。
• 索引色/灰度/位圖：特定圖像格式優化模式。

**十六進制代碼僅用於表示RGB模式下的具體顏色值**，不屬於獨立模式。

開發建議

• CSS中**統一用十六進制**（簡潔、通用、易複製）。
• JS運算顏色（漸變、動畫、混合）用**RGB/RGBA數組或對象**（便於數學運算）。
• 設計協作時提供**十六進制值 + RGB數值 + HSB值** + 色彩空間標註（如sRGB）。

記住：RGB是模型，十六進制是該模型下數值的十六進制序列化表示，二者如「十進制數字」與「二進制數字」的關係。