什麼是色彩轉換？
瀏覽器渲染的每一個色彩最終都是一組 sRGB 三元組——紅、綠、藍三個通道各介於 0 到 255 之間,並可附加一個 alpha。CSS Color Level 4 規範定義了多種文字格式,它們能與同一組三元組互相對應,並另外定義了知覺均勻的 OKLCH 色彩空間。本工具能讀取其中任何一種、轉換為所有其他種,並對照第二個色彩回報 WCAG 2.1 對比度比值,讓你能放心交付具備無障礙的介面。
色彩轉換是如何運作的？
轉換是一連串明確定義的線性與非線性變換。每一個步驟都在你的瀏覽器中執行——任何輸入都不會送達我們的伺服器:
- 工具會解析你的輸入,自動偵測 3、4、6 或 8 位數的 HEX、函式形式的
rgb()/rgba()/hsl()/hsla()/hsv()/hwb()(可使用舊式逗號語法或現代斜線 alpha 語法),或 150 個 CSS 具名色彩中的任一個(包含rebeccapurple)。 - 解析後的色彩會正規化為標準的 sRGB——四個浮點數
{r, g, b, a},各落在 0–1 區間內。這是衍生所有輸出格式的唯一真值來源。 - HEX 是將每個通道四捨五入為 0–255 的位元組值並串接十六進位數字。RGB / RGBA 直接印出相同的位元組。HSL 與 HSV 套用標準的 W3C 圓柱座標演算法;HWB 的色相取自 HSV,白度取自
min(r, g, b),黑度取自1 - max(r, g, b)。 - CMYK 是一種樸素近似——
k = 1 - max(r, g, b),再由殘餘的通道得出c, m, y。它適合螢幕預覽,但不適合印刷:真正的 CMYK 輸出需要 ICC 設定檔,而本工具刻意不嵌入這類設定檔。 - OKLCH 遵循 css-color-4 的正向路徑:sRGB 經線性化、乘以 LMS 矩陣、取立方根、再乘以 LMS 對 OKLab 矩陣,最後從直角座標 OKLab 轉換為極座標 OKLCH。OKLCH 在知覺上是均勻的,因此是設計在人眼中看起來平衡之調色板的合適色彩空間。
為什麼使用這個色彩轉換器？
- 隱私:每一次轉換都在你的瀏覽器中以純 JavaScript 執行。貼上的色彩絕不會離開你的裝置,這對未發布的品牌作品、內部設計系統以及保密合約下的客戶模擬稿都至關重要。
- 設計師到開發者的交付:從 Figma 貼上 HEX,即可讀回供 Tailwind 設定使用的
rgb()字串、作為 CSS 自訂屬性的hsl()字串,或構成現代調色板的oklch()字串——所有格式集中於一處,無需在分頁之間複製貼上。 - WCAG 準確性:對比度檢查器採用 WCAG 2.1 精確的相對亮度公式,以及已公布的 AA(4.5 / 3.0)與 AAA(7.0 / 4.5)門檻,適用於一般文字與大型文字。回報的比值與手動計算器的差距落在 0.01 以內。
- 暗色模式與色票衍生:HSL 與 OKLCH 都將亮度作為單一通道,因此能輕鬆沿亮度軸上下調整品牌色,衍生出對應的暗色模式 token,或從單一種子顏色產生 10 階的色票漸層。
色彩轉換有哪些常見應用？
色彩轉換在網頁開發、設計與無障礙工作中無所不在:
- 設計系統:把品牌 HEX 轉換為對應的 HSL 與 OKLCH token,供 CSS 自訂屬性色階使用,接著驗證每個 token 組合對照頁面背景皆能通過 WCAG AA。
- 無障礙稽核:從實際產品畫面貼上前景與背景的色彩配對,一眼讀出對比度比值,並一次取得一般字重與大型字重的 AA/AAA 評斷。
- 跨工具往返:從螢幕擷取的取色器取得色彩(HEX),貼到這裡,然後將
hsl()或oklch()字串直接複製到 Tailwind、Figma token,或 CSS-in-JS 主題之中。
色彩轉換範例是什麼樣子？
以著名的 rebeccapurple 為例。具名色彩查詢會將其解析為 #663399。RGB 轉換得到 rgb(102, 51, 153)。HSL 轉換得到 hsl(270, 50%, 40%)——紫羅蘭色相、半飽和、亮度約四成。將此色與純白以對比度工具檢查,得到約 7.39 的比值,通過一般文字的 AAA(7.0),也通過大型文字的 AAA(4.5)——是強而具無障礙性的前景選擇。將 #663399 經由 RGB → HSL → RGB → HEX 來回轉換,會原封不動地回到原始字串,每個位元組都相同。
把這款轉換器當作面對任何色彩——程式碼中、設計檔中,或螢幕擷取中——的快速參考,並把對比度檢查器當作交付前的合理性檢查。一切都在本機執行、沒有任何記錄,而轉換的數學遵循已公布的 W3C 與 WCAG 規範,所以數字會與你的稽核工具或瀏覽器開發者工具回報的結果一致。