色碼格式轉換
在 HEX、RGB、HSL、OKLCH 四種色碼格式之間即時互轉，任一欄位輸入即同步更新，附即時顏色預覽
顏色預覽
HEX
RGB
r
g
b
HSL
h
s
l
OKLCH (from HEX/RGB/HSL)
L
C
H
關於此工具
色碼格式在現代網頁與設計工作流程中有四種主要形式。HEX（#3b82f6）在 HTML 與 CSS 中最為常見。RGB 適合在 CSS 和 Canvas 繪圖中進行各通道控制。HSL 讓調整顏色的明暗或色相更加直覺。OKLCH 是 CSS Color Level 4 中最新的感知均勻色彩空間，能在不同色相之間提供可預測的對比度與一致的飽和度。QuickKit 的色碼格式轉換工具讓你輸入任一格式後，立即看到其他三種格式的對應值，並附即時顏色預覽。
功能特色
- ✓四種格式互轉 — 在 HEX、RGB、HSL、OKLCH 之間即時轉換，輸入任一欄位，其他欄位立即同步更新。
- ✓即時顏色預覽 — 輸入時顏色色塊即時更新，讓你直觀確認色碼是否正確。
- ✓一鍵複製 — 每種格式都有獨立的複製按鈕，可直接複製所需格式（例如 "hsl(211, 90%, 60%)"）。
- ✓OKLCH 支援 — 透過 OKLab 標準轉換路徑計算 OKLCH 值，由 Björn Ottosson 設計的感知均勻色彩空間。
常見問題
- 什麼是 OKLCH？
- OKLCH 是以 OKLab 色彩模型為基礎的感知均勻色彩空間（L 明度、C 飽和度、H 色相）。與 HSL 不同，OKLCH 中相同數值的變化會產生感知上相同的色彩變化，非常適合生成調色板、無障礙對比度設計與跨色相一致的漸層效果。
- 為什麼輸入 HEX 後 RGB 數值顯示錯誤？
- 請確認 HEX 碼為 3 位或 6 位十六進位字元（0–9, a–f），前綴 # 可加可不加。簡寫的 3 位色碼（如 #f0a）會展開為 #ff00aa。
- 可以直接在 OKLCH 欄位輸入嗎？
- 目前 OKLCH 欄位為唯讀輸出，數值由 HEX、RGB 或 HSL 的輸入計算而來。直接輸入 OKLCH 的功能將在後續更新中加入。