色碼轉換器

HEX、RGB、HSL 色碼即時互轉，一鍵複製各種 CSS 寫法，還能檢查文字與背景的色彩對比是否符合 WCAG 無障礙標準。

#

選擇或輸入顏色

修改任何一欄，其他格式會立刻同步，不用按任何按鈕

#2A62F0rgb(42, 98, 240)hsl(223, 87%, 55%)
RGB（各 0–255）與透明度（0–1）
HSL（色相 0–360、飽和度與亮度 0–100%）
°
%
%
可直接複製的色碼寫法
  • HEX#2A62F0
  • RGBrgb(42, 98, 240)
  • RGBArgba(42, 98, 240, 1)
  • HSLhsl(223, 87%, 55%)
  • HSLAhsla(223, 87%, 55%, 1)
  • CSS 新語法rgb(42 98 240 / 100%)

HSL 四捨五入到整數，因此由 HSL 再換回 RGB 時，可能與原本的數值相差 1。

Aa

對比檢查

把目前顏色當成文字顏色，檢查放在不同背景上是否夠清楚（WCAG 2.x）

大字預覽 Aa一般文字預覽：色彩對比 Contrast 123
放在白色背景上（#FFFFFF）
5.11 : 1
AA 一般文字（≥ 4.5）：通過AA 大字（≥ 3）：通過AAA 一般文字（≥ 7）：未通過
大字預覽 Aa一般文字預覽：色彩對比 Contrast 123
放在黑色背景上（#000000）
4.10 : 1
AA 一般文字（≥ 4.5）：未通過AA 大字（≥ 3）：通過AAA 一般文字（≥ 7）：未通過
大字預覽 Aa一般文字預覽：色彩對比 Contrast 123
放在自訂背景上（#FFD84D）
3.69 : 1
AA 一般文字（≥ 4.5）：未通過AA 大字（≥ 3）：通過AAA 一般文字（≥ 7）：未通過

大字指 24px 以上，或 18.66px 以上的粗體。對比值以無條件捨去顯示到小數 2 位。

配

相近色與配色

點任何一個色塊，就會把它設為目前顏色

色相環配色
同色相的 5 階明暗（每階亮度相差 15%）
?

三種色碼怎麼讀

HEX 的 #RRGGBB 每兩位代表紅、綠、藍，範圍是十六進位的 00 到 FF（也就是 0 到 255）； RGB 直接用十進位寫出同樣的三個數字；HSL 則改用色相（0–360°）、飽和度與亮度來描述， 比較容易調出「同一個顏色再亮一點」的變化。

#2A62F0 → 2A＝42、62＝98、F0＝240 → rgb(42, 98, 240) → hsl(223, 87%, 55%)

色碼轉換器：HEX、RGB、HSL 一次換好

做網頁、簡報或教材時，同一個顏色常常要在不同軟體之間搬來搬去： 設計稿給的是 #2A62F0，CSS 想寫成 rgb()，調整明暗時又覺得 HSL 比較直覺。 這個色碼轉換器把三種格式放在同一個畫面，用取色器選色或在任何一欄輸入， 其他格式都會即時更新，並列出可以直接貼進 CSS 的寫法。 下方還有色彩對比檢查與配色建議，所有運算都在瀏覽器中完成，不會上傳任何資料。

HEX、RGB、HSL 各是什麼？

螢幕上的顏色是由紅（R）、綠（G）、藍（B）三種光混合而成，每一種的強度是 0 到 255。 RGB 寫法直接列出這三個數字，例如 rgb(42, 98, 240)。 HEX 色碼是同一組數字的十六進位寫法：#RRGGBB 每兩位代表一個顏色， 範圍從 00 到 FF，FF 就是十進位的 255。 HSL 則換了一種描述方式：H 是色相（0–360 度，0 是紅、120 是綠、240 是藍）， S 是飽和度（0% 是灰、100% 最鮮豔），L 是亮度（0% 是黑、50% 是純色、100% 是白）。

算例：#2A62F0 拆成 2A、62、F0 三組。2A＝2×16＋10＝42，62＝6×16＋2＝98， F0＝15×16＋0＝240，所以它等於 rgb(42, 98, 240)。 再換成 HSL：三個數字除以 255 後，最大值約 0.941、最小值約 0.165， 亮度是兩者的平均 (0.941＋0.165)÷2≈0.553，也就是 55%； 飽和度是 (0.941－0.165)÷(1－|2×0.553－1|)≈0.868，也就是 87%； 最大的是藍色，色相為 60×((42－98)÷198＋4)≈223 度。 結果是 hsl(223, 87%, 55%)，是一個偏亮的鮮豔藍色。

什麼時候用哪一種？

HEX 最短、最容易複製貼上，設計稿與品牌色規範多半用它。 RGB 適合需要用程式計算顏色，或要和其他軟體對照數值的時候。 HSL 適合「調整」顏色：想讓按鈕滑過時深一點，只要把 L 減少幾個百分點； 想做一組同色系的色票，固定 H 與 S、改變 L 就可以。 三種寫法在瀏覽器裡代表的是同一個顏色，挑自己和團隊看得懂的即可。

透明度怎麼寫？

透明度（alpha）是 0 到 1 之間的數字，0 是完全透明、1 是完全不透明。 可以寫成 rgba(42, 98, 240, 0.5)、hsla(223, 87%, 55%, 0.5)， 或 CSS 新語法 rgb(42 98 240 / 50%)。 HEX 則在後面多加兩位，變成 8 位的 #RRGGBBAA：把透明度乘以 255 再換成十六進位， 0.5×255＝127.5，四捨五入成 128，也就是 80，所以半透明的寫法是 #2A62F080。 常用的對照是 25%＝40、50%＝80、75%＝BF、100%＝FF。

如何使用色碼轉換器？

  1. 用取色器選色，或在 HEX、RGB、HSL 任何一欄輸入數值，也可以拖動滑桿。
  2. HEX 可輸入 3、4、6 或 8 位，有沒有加 # 都可以。
  3. 在「可直接複製的色碼寫法」按下想要的格式旁邊的「複製」。
  4. 在「對比檢查」查看這個顏色當文字時，放在白底、黑底或自訂背景上是否夠清楚。
  5. 在「相近色與配色」點選互補色、類比色或明暗色階，把它設為目前顏色繼續調整。

色彩對比與無障礙

文字和背景的顏色太接近，視力較弱的人、長輩，或在大太陽下看手機的人就會讀得很吃力。 WCAG（網頁內容無障礙指引）用「對比值」來衡量，範圍從 1:1（完全相同）到 21:1（黑配白）。 AA 等級要求一般文字至少 4.5:1、大字至少 3:1；更嚴格的 AAA 等級要求一般文字至少 7:1。 大字指 24px 以上，或 18.66px 以上的粗體。

算例：#2A62F0 的相對亮度約 0.1552，白色是 1，對比值為 (1＋0.05)÷(0.1552＋0.05)≈5.117， 工具以無條件捨去顯示為 5.11，所以藍字配白底通過 AA，但還不到 AAA 的 7。 同一個藍色放在黑底上只有約 4.10:1，一般文字就不合格了，只能用在大字。 另一個常見的例子是灰色 #767676，它在白底上的對比約 4.54:1，剛好通過 AA； 只要再淺一點變成 #777777，就掉到約 4.47:1 而不合格。

實用提醒

對比值只看亮度差異，不代表配色好不好看；紅配綠即使亮度不同，色覺辨識有困難的人仍可能分不清， 重要資訊最好同時搭配文字或圖示。另外，半透明的文字實際看到的顏色會和背景混在一起， 本工具會先把顏色疊在背景上再計算對比，數值會比不透明時低。

色碼轉換器常見問題

HEX 色碼怎麼轉成 RGB？

把 #RRGGBB 每兩位當成一個十六進位數字，換成十進位即可。 十六進位的 A 到 F 分別代表 10 到 15，所以 2A＝2×16＋10＝42。 不想手算的話，直接把色碼貼進上方的 HEX 欄就會看到結果。

3 位的 HEX 色碼是什麼意思？

3 位是 6 位的縮寫，每一位各重複一次，例如 #0AF 等於 #00AAFF，也就是 rgb(0, 170, 255)。 4 位則多了一位透明度，例如 #0AF8 等於 #00AAFF88，透明度約為 0.53。

為什麼 HSL 轉回 RGB 後數字差了 1？

HSL 通常四捨五入成整數，會損失一點精確度。#2A62F0 精確的 HSL 約為 223.03、86.84%、55.29%， 寫成 hsl(223, 87%, 55%) 後再換回 RGB 會得到 rgb(40, 97, 240)， 和原本的 rgb(42, 98, 240) 相差一兩個單位，肉眼幾乎看不出來。 需要完全一致時，請以 HEX 或 RGB 為準。

色彩對比要多少才算合格？

一般網站以 WCAG 的 AA 等級為目標：內文至少 4.5:1，大標題至少 3:1。 政府、教育等對無障礙要求較高的網站，可以進一步以 AAA 的 7:1 為目標。