顏色轉換器

在 HEX、RGB 和 HSL 色彩程式碼之間轉換,並整理為便於複製和分享的程式碼片段。

顏色轉換器
所選顏色 rgb(255, 87, 51)
分享 URL https://comutil.com/zh-hant/color?preset=rgb-handoff
清除
色板預覽
推薦文字顏色
#111827
已將 設計稿 RGB 整理 規範化為便於複製的 HEX、RGB、HSL 和令牌片段。
預設可分享 #FF5733

已將 設計稿 RGB 整理 規範化為便於複製的 HEX、RGB、HSL 和令牌片段。

當前輸入 rgb(255, 87, 51)
推薦文字顏色 #111827
規範化輸出
HEX
適合用於 CSS、瀏覽器工具和設計文件的緊湊格式。
#FF5733
RGB
適合設計交接、Canvas 工作和影像工具的精確通道值。
rgb(255, 87, 51)
HSL
當你需要分別調整色相、飽和度或明度時更方便。
hsl(11, 100%, 60%)
R、G、B 通道
適合寫入工單、規格和令牌的純數字通道值。
255, 87, 51
可讀性上下文

在此色塊上使用 深色文字 可獲得最強的小字號文字對比度。

白色文字
#FFFFFF
3.15:1
預覽文字
Aa 正文示例
正常文字: 需要更高對比度
大號文字: 透過
深色文字
#111827
5.63:1
預覽文字
Aa 正文示例
正常文字: 透過
大號文字: 透過
交接程式碼片段
CSS 變數
:root {
  --brand-accent: #FF5733;
  --brand-accent-rgb: 255 87 51;
}
設計令牌 JSON
{
  "color": {
    "accent": {
      "value": "#FF5733",
      "rgb": "255 87 51",
      "hsl": "hsl(11, 100%, 60%)"
    }
  }
}
內聯樣式
background-color: #FF5733;
color: #111827;
什麼是顏色格式?

Web 上的顏色可以用多種格式表示。HEX 使用十六進位制表示法 (#RRGGBB),RGB 指定紅、綠、藍分量 (0-255),而 HSL 使用色相 (0-360)、飽和度和亮度 (0-100%)。每種格式在不同的用例中都有其優勢,例如設計工作或程式化顏色處理。

顏色格式詳情

HEX 顏色以十六進位制對 RGB 值進行編碼(每個通道 16-255)。RGB 直接指定顏色強度 (0-255)。HSL 將顏色(色相)與強度(飽和度/亮度)分離,使得建立顏色變體更加直觀。所有格式都可以表示相同的 1670 萬種顏色。

常見使用場景
  • 將設計工具顏色轉換為 CSS
  • 建立顏色主題和調色盤
  • 調整顏色亮度和飽和度
  • 跨平臺匹配品牌顏色
  • 顏色對比度的無障礙測試
格式比較
HEX #RRGGBB - 緊湊、支援廣泛、易於複製/貼上
RGB rgb(R, G, B) - 易於程式化操作
HSL hsl(H, S%, L%) - 透過調整分量易於建立變體
常見問題

什麼時候應該使用 HSL 而不是 RGB?

當您需要建立顏色變體(更亮、更暗、更高/更低飽和度)時,HSL 更好,因為您可以調整單個分量。RGB 更適合混色以及影像處理工作。

什麼是 HEX 簡寫?

HEX 簡寫使用 3 位數字而不是 6 位(用 #RGB 代替 #RRGGBB)。每一位數字都會重複一次:#F00 變成 #FF0000(紅色)。僅當每對數字相同時才有效。