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

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

HEX 與 rgb() 可以精確表示相同的 8 位 sRGB 通道；hsl() 也能描述該顏色，但色相、飽和度或亮度一經捨入，往返轉換就可能產生偏差。

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

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

• 0–1 或 00–FF函數式寫法的 alpha 範圍為 0–1；八位 hex 的末尾位元組範圍為 00–FF。80 表示 128/255，約為 0.502，接近但不等於 0.5。
• 在表面上測試半透明顏色會依其 alpha 與背景合成，因此要在實際使用的每種底色上測試。
• 相關聯的權杖當設計系統同時發布同一色相的實色與半透明版本時，一個八位 hex 能讓它們的關係一目瞭然。

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

色階生成器以一個 hex 顏色為起點，按權重分別向黑色和白色混合，傳回 3–20 個 hex 色階。這些色階並非感知上等間距，候選色仍要放在真實界面中檢查。

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

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

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

結果可複製為 CSS 自訂屬性，也可下載 JSON。要重現五個顏色，需分享種子色和配色方案；若還需重現對比度通過標記，也要說明目標比值。

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

混色器接收受支持的 hex 顏色，可按 alpha 進行插值或源覆蓋合成，並輸出 hex 與 RGBA。比較兩個品牌色前，先選操作方式和權重。

輸入框只接受 hex 文字，不接受任意 CSS 顏色表達式。先把 rgb() 或 hsl() 轉成受支持的 hex 形式，再使用此工作區。

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

色盤常從螢幕截圖、Logo 或照片出發。在瀏覽器中取樣解碼後的像素，可取得該次呈現可重現的色值，比目測更可靠；它不一定等於來源檔案的原始通道值。

圖片拾色器在分頁中打開 PNG、JPEG 或 WebP，報告瀏覽器解碼後經 Canvas 採樣的點擊像素 RGBA 值。它能幫助檢查舊素材或抗鋸齒邊緣，但結果可能受到解碼與顏色轉換影響。

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