HEX、RGB 與 HSL：選擇網頁顏色格式

這些表示法中的每個顏色，都是同一個 sRGB 顏色穿著不同外衣。HEX 是用十六進位書寫的 RGB：#4F46E5 就是紅、綠、藍三個通道各兩位十六進位數字。rgb(79, 70, 229) 用十進位陳述同樣的三個通道，而 hsl() 把同一個像素描述為色輪上的一個位置。

在 sRGB 內三者之間的轉換是無損的：#4F46E5、rgb(79, 70, 229) 與等價的 hsl() 值可以精確往返，因此切換表示法是呈現層面的選擇，而不是顏色的改變。

• HEXHEX 緊湊且穩定，適合在設計工具與程式碼之間複製貼上，這就是為什麼色板和設計規範通常以 hex 發布。
• RGBRGB 讀作三條 0 到 255 的通道強度，與螢幕和影像格式實際儲存像素的方式一致。
• HSLHSL 讀作色相、飽和度與亮度——更接近人描述顏色的方式，按意圖調整也容易得多。

透明度可以接到每種表示法上。rgb() 與 hsl() 接受第四個參數——rgba(79, 70, 229, 0.5)——而 HEX 擴展出了八位形式 #4F46E580，其中最後一對是從 00 到 FF 的透明度。

• 0–1 或 00–FF函數式寫法中透明度從 0 到 1，hex 中從 00 到 FF；0.5 與 80 是同一個半透明值。
• 在表面上測試半透明疊加層會與其下的任何內容相乘，因此半透明權杖需要在它可能落到的每種表面上測試。
• 相關聯的權杖當設計系統同時發布同一色相的實色與半透明版本時，一個八位 hex 能讓它們的關係一目瞭然。

直接編輯 RGB 通道是算術；按意圖編輯在 HSL 裡更容易。淺色是同一色相提高亮度，深色是同一色相降低亮度，柔和變體是同一色相調低飽和度——三次單旋鈕操作，而不是三條通道一起漂移。

色階產生器把這條色階機械化：給它一個 hex 顏色，它向黑色與白色方向混合，回傳三到二十個等間距的 hex 色階——懸停狀態與邊框色調都來自同一個來源顏色，而不是手工挑選的猜測。

• 淺色與深色淺色與深色：固定色相與飽和度，把亮度從近白掃到近黑，就得到一條可用於背景、狀態與文字的實用色階。
• 飽和度狀態柔和與鮮豔變體只來自飽和度旋鈕，懸停與停用狀態正是這樣留在同一色系裡的。
• 色相旋轉色相旋轉產生相關顏色：類似色鄰居相距約三十度，互補色相距一百八十度。

配色和諧是色相輪上的幾何：互補對相對而坐，三色組把色輪三等分，類似色聚成一團。HSL 讓這筆帳清晰可見——改動一個數字，整套方案隨之移動。

配色方案產生器應用的正是這個模型。從一個六位種子 hex 出發，它按六種經典方案——類似、互補、分裂互補、三色、四色與單色——產生五色色板，並按 3、4.5 或 7 的 WCAG 對比度目標檢查每個色塊與黑、白文字的對比。

結果可匯出為 CSS 自訂屬性與 JSON，色板可以直接進入樣式表或權杖檔案。因為引擎是確定性的，同樣的種子與方案永遠重現同樣的五種顏色——分享種子，而不是截圖。

現代 CSS 合併了舊的函數形式：空格分隔的通道加可選的斜線透明度——rgb(79 70 229 / 0.5)——取代了逗號重重的 rgba()。第 4 級規範還加入了 hwb()、lab() 與 oklch() 等表示法，用於更廣色域與感知均勻的色階。

無論你標準化哪種表示法，混合兩種顏色都是逐通道運算：混色器按選定權重混合兩種顏色，並以 RGBA 與 hex 回報結果，讓你算出兩個品牌色之間的中點，而不是憑眼睛估。

同一個工具還兼任表示法橋樑：以一種形式輸入顏色，以另一種形式讀取結果；當規格表寫 hex 而樣式表用 rgb() 時，讓算術保持誠實。

• 新語法空格分隔通道加斜線透明度在所有現代瀏覽器中都有效；逗號形式作為舊式別名繼續受支援。
• 為什麼是 OKLCHoklch() 修正了 HSL 的真實缺陷：HSL 中相等的亮度步進在不同色相下看起來並不一樣亮，而 OKLCH 保持感知亮度一致。
• 有意識地採用在解決問題的地方採用新表示法——一致的色階、廣色域螢幕——在工具鏈與習慣已順暢的地方繼續用 hex 或 rgb()。

色板很少從理論出發；它們從截圖、Logo 或照片出發。從來源檔案讀取精確像素值，勝過對著色輪目測色塊。

圖片取色器在分頁中開啟 PNG、JPEG 或 WebP，並回報你點擊像素的精確 RGBA 值——無論是從舊素材中找回品牌色，還是檢查反鋸齒邊緣到底含什麼，都很實用。

一切在本機執行：圖片在你的瀏覽器中解碼，從不上傳——當素材是尚未發布的設計時這一點尤其重要。把取到的色值帶入色階或配色工具，從素材到色板的整條鏈路都留在你的裝置上。