顏色換算

為什麼會有這麼多色彩模型？

電腦螢幕、設計軟體、印刷機、人眼感知——同樣的「紅色」在不同情境用不同編碼。最常見的三組（HEX / RGB / HSL）各自對應不同問題：HEX 給網頁傳輸用，RGB 對應螢幕硬體三原色，HSL 模擬人類直覺調色（先選顏色，再調濃淡）。本工具支援這三組加上 OKLCH 互轉，可以調透明度，附即時預覽與色彩挑選器。

HEX 與 RGB 其實是同一組數字的兩種進位。把 #C1170C 拆成 C1、17、0C 三對，每一對用十六進位讀，就是 rgb(193, 23, 12)。兩位十六進位剛好涵蓋 0 到 255，所以單一通道不會更高。三碼縮寫的規則是每一碼各重複一次，#F80 等於 #FF8800，不是 #0F0800。

自己動手調色之所以常出錯，是因為三個通道不是各自獨立的刻度。想調亮而把三個通道同加一個固定值，最強的那一條會先撞到 255，飽和度被洗掉、色相也被拉往剩下的通道；整條乘以 0.8 調暗比較接近正確，但人眼對紅、綠、藍的敏感度不同，還是會偏。最貴的一個誤會則是：HSL 的亮度不等於看起來的明亮程度。hsl(60, 100%, 50%) 是亮黃色、hsl(240, 100%, 50%) 是深藍色，兩個都宣稱 50% 亮度。L 值相同的兩個顏色，可能一個通過無障礙門檻、一個不通過。

三大色彩模型對照

• HEX：網頁、CSS、品牌規範最常用，#RRGGBB 6 位 16 進位，例如 #C1170C（楓葉工具箱主色）。簡短易讀，團隊溝通方便。
• RGB：紅 / 綠 / 藍三通道，每通道 0-255。最接近螢幕硬體運作方式（顯示器每個 pixel 由 R G B 三 sub-pixel 組成）。CSS 寫成 rgb(193, 23, 12) 或加上透明度 rgba(193, 23, 12, 0.5)。
• HSL：H（色相、Hue）0-360 度、S（飽和度、Saturation）0-100%、L（亮度、Lightness）0-100%。最直觀的調色模型——選色相後，只動 L 就能產生同色系的淺 / 深變體，做主題色階首選。

常見使用情境：

• 從 Figma / Sketch 取色：設計稿給 HEX，工程實作要轉 CSS rgb() 或 hsl() 才能套 alpha 透明度
• 調主題色階：HSL 把 L 從 50% 調到 90% 變淺色背景，調到 20% 變深色文字。同色相一氣呵成，不會走色
• 對比度檢查：拿到顏色後要驗 WCAG 對比度，需要 RGB 值。可搭配WCAG 對比度檢查一起用
• PPT / Excel 配色：Office 系統用 RGB 輸入，需要從 HEX 轉換
• 品牌色定義：把品牌主色記成 HEX，客戶溝通快，印刷時再轉 CMYK

還有三個常一起出現的格式。透明度：拉「不透明度」或貼八碼 HEX #C1170C80，HEX 會變八碼、RGB 與 HSL 改輸出 rgba()、hsla()。OKLCH 是 CSS Color 4 裡的感知均勻模型，做色階時每一階看起來才會等距，本頁有一個 OKLCH 區塊可以互轉；LCH 本頁不換算。CMYK 只給印刷，而且要有印刷廠的色彩描述檔才準，沒有可靠的裝置無關公式，本頁不換算。

實戰教學：把設計稿的顏色搬進程式碼

1. 從 Figma、Sketch 或品牌規範複製 HEX，貼進上方的 HEX 欄。開頭的井字號可有可無。
2. 拿頁面最上方的色塊對一次設計稿。看起來不對，多半是複製到隔壁圖層的顏色，而不是你要的那個填色。
3. 目標欄位要三個數字就讀 RGB 區塊，接下來要從這個顏色延伸出同色系就讀 HSL 區塊。按區塊右上角的「複製 rgb(…)」或「複製 hsl(…)」，整個 CSS 函式連括號一起進剪貼簿。
4. 設計稿有透明度，就把「不透明度」拉到設計稿標的百分比，HEX 會變成八碼、RGB 那組變成 rgba()，不用自己猜最後兩碼。
5. 送出前先把前景色與背景色這一組丟進WCAG 對比度檢查，現在發現總比 code review 才發現好。

實戰教學：用一個品牌色做出淺深色階

1. 輸入品牌色的 HEX，記下 HSL 三個數字。#C1170C 大約是 hsl(4, 88%, 40%)。
2. 每一階都不要動色相欄位。色相一改，整組色階看起來就像來自兩個不同品牌。
3. 只改亮度，一階一階把換算回來的 HEX 複製走：95 與 90 當背景、80 與 70 當 hover 與邊框、50 與 40 當主色、30 與 20 當淺底上的文字。
4. 最淺與最深那兩端把飽和度往下拉 10 到 20。接近白卻還 88% 飽和度會像印壞了，接近黑又滿飽和度則會顯得濁。
5. 真正會搭在一起用的那幾組要實測。HSL 的亮度不是視覺明亮度，數字等距的色階，眼睛看起來不會等距，黃色與藍色之間差最多。

色相明明沒動、階與階之間卻還是走色，那就是該把色階搬去 OKLCH 的訊號，那個模型就是為這個問題設計的：在下面的 OKLCH 區塊固定 C 與 H、只改 L，就是一條不走色的色階。

調色小技巧：

• 調主色階用 HSL：固定 H + S，只改 L，產出 50 / 100 / 200 / ... / 900 的階層（Tailwind 風格）
• 取互補色：HSL 的 H 加 180 度，得到色輪對面的互補色（紅↔青、綠↔洋紅、藍↔黃）
• 類比色 / 三等分色：H ±30 度做類比配色，H ±120 度做三色組合
• 暗化技巧：HSL 把 S 降低 + L 降低，比直接降 L 更自然（純黑會死沉）

把色碼帶到你要用的地方

HEX 欄位旁邊的按鈕複製純色碼，RGB、HSL 與 OKLCH 區塊右上角的小字則把整個 CSS 函式複製走，括號與百分號都在裡面。

• 程式碼編輯器：token 檔貼 HEX；調過透明度就貼八碼 HEX 或 rgba() 那一組；Tailwind 4 的 @theme 可以直接貼 oklch()。
• Figma、Sketch、Illustrator：打開填色面板，點進 hex 欄位貼上。三個軟體都收六碼色碼，有沒有井字號都行。
• PowerPoint、Word、Excel：色彩下拉選「其他色彩」，切到「自訂」分頁，紅、綠、藍三個 0 到 255 的欄位要的就是 RGB 區塊給你的數字；較新的版本同一個面板也收十六進位色碼。
• 把顏色傳給別人：按「複製分享連結」。顏色寫在網址的 ?c=ff5500（有透明度時是八碼），對方打開就落在同一個色塊上，各組換算也都填好了。

同一個顏色，在各平台寫法不同

數字是通用的，數字外面那層語法不是。真的會咬人的差異有這幾個：

• CSS 的新舊語法：CSS Color 4 定義了空白分隔、alpha 前面加斜線的寫法，rgb(193 23 12 / 50%) 與 hsl(4 88% 40% / 50%)。舊的逗號寫法與 rgba()、hsla() 仍然有效，兩種都會繼續能用。本頁的 RGB、HSL 輸出逗號版（有透明度時是 rgba()、hsla()），貼進舊工具鏈比較不會出事；oklch() 只有空白加斜線這一種寫法，瀏覽器要 Chrome 111、Firefox 113、Safari 15.4 起才認得。
• 瀏覽器內建的取色器：<input type="color"> 交給程式的一定是七個字元的小寫值，例如 #ff5500，不會是縮寫、也不帶 alpha。本頁把它轉成大寫只是為了跟其他欄位一致，純屬外觀。
• Android：顏色是打包成整數的 0xAARRGGBB，alpha 在最前面，跟 CSS 八碼 HEX 的 alpha 在最後剛好相反。把 #C1170C80 直接搬進 Android 程式碼，C1 會被當成 alpha、後面的 170C80 當成顏色，得到的是七成多不透明的深藍色，而不是半透明的紅色。
• Apple 平台：UIKit 與 SwiftUI 的通道是 0.0 到 1.0 的浮點數，不是 0 到 255，要先除以 255；同一個呼叫還會要色彩空間，沒指定就會被當成 sRGB。
• Photoshop 與繪圖軟體：取色器是 HSB（HSV）不是 HSL。色相對得上，第三個數字對不上：Photoshop 的 B 設 50 得到的是暗色，CSS 的 L 設 50 得到的是純色。
• Python：標準函式庫有 colorsys，但它回傳的是 (h, l, s) 這個順序、三個值都在 0 到 1 之間，色相要乘 360、另外兩個乘 100，數字才會長得像 CSS。
• Sass 與 Tailwind：Sass 的 lighten() 與 darken() 在 HSL 裡運算，連 HSL 的走色一起繼承；新版 Sass 的色彩函式控制得比較細。Tailwind CSS 4 的預設調色盤改用 OKLCH 而不是 HEX，要把自家品牌色對到它的色階之前先知道這件事。

JavaScript 裡從 HEX 字串換算短到可以直接寫在原地，同一段正規表達式也順便吃掉開頭的井字號：

const [r, g, b] = '#C1170C'.match(/\w\w/g).map(p => parseInt(p, 16))
// [193, 23, 12]

注意事項、隱私與無障礙

會離開瀏覽器的資料：沒有。換算就是在你裝置上跑的算術，不上傳、也不會來回伺服器。唯一要知道的是，只要你離開起始色，目前的顏色就會被寫進網址的查詢參數，所以你複製的連結、或是網址列的截圖，都會把顏色一起帶走。

本頁的 HSL 取到整數。色相顯示整數度、飽和度與亮度顯示整數百分比，所以 HEX 轉 HSL 再轉回 HEX，可能落在某個通道旁邊一階。那是 255 分之一的差、看不出來，但也代表 HSL 不適合拿來存一個之後要逐位元比對的值。

色碼不等於保證的外觀。瀏覽器把純六碼色碼當成 sRGB，螢幕實際呈現則看面板、色彩描述檔與現場光線。sRGB 以外的顏色，例如 Display P3 才有的飽和綠，根本寫不成六碼 HEX；在 OKLCH 區塊打出這種顏色時，本頁會保留亮度與色相、把彩度壓回 sRGB 並提示。顏色要跟實體產品或印刷品對得上時，量過的樣本永遠比螢幕可靠。

不要拿亮度欄位當對比度檢查。WCAG 的對比度是用相對亮度算的，三個通道的權重並不相同，所以 L 值一樣完全不代表文字讀得到。請把整組前景背景丟進WCAG 對比度檢查。另外記得 WCAG 的成功準則 1.4.1：資訊不能只靠顏色傳達，紅色旁邊的標籤、圖示或底線都要留著。