免費轉換器

HSL 轉 HEX 轉換器

即時將 HSL 顏色值轉換為 HEX 顏色代碼 — 免費即時顏色轉換器。

色相
飽和度 (%)
亮度 (%)

HEX 輸出

#368CE2
R:54
G:140
B:226

複製格式

#HEX 格式#368CE2
hsl() 格式hsl(210°, 75%, 55%)
rgb() 格式rgb(54, 140, 226)

關於此工具

將 HSL(色調、飽和度、亮度)顏色值轉換為十六進位代碼。 HSL 是一種直覺的顏色模型,其中色調是顏色角度 (0-360°),飽和度是顏色強度 (0-100%),亮度控制顏色的明暗程度 (0-100%)。對於使用 HSL 並需要 CSS 十六進位程式碼的設計師很有用。

使用方法

  1. 輸入色相值(色輪上的 0-360 度)。
  2. 設定飽和度 (0-100%) 和亮度 (0-100%)。
  3. 即時計算並顯示十六進位代碼。
  4. 複製十六進位程式碼以在 CSS 或設計工具中使用。

常見問題

為什麼使用 HSL 而不是十六進位或 RGB?
HSL 對人類來說更直觀。想要更深的色調嗎?降低亮度。想要靜音版本嗎?降低飽和度。這些關係在十六進位或 RGB 中並不明顯,您需要調整所有三個通道。
色相 0 與 360 是什麼意思?
0° 和 360° 都是紅色——色相輪環繞。主色調:0° = 紅色、60° = 黃色、120° = 綠色、180° = 青色、240° = 藍色、300° = 洋紅色。
0% 和 100% 飽和度時會發生什麼?
飽和度為 0% 時,任何色調都會變成灰色陰影(僅由亮度決定)。在 100% 飽和度下,您將獲得該色調最純淨、最生動的版本。
亮度如何發揮作用?
無論色調/飽和度如何,0% 亮度始終為黑色。 100% 始終是白色。 50% 提供最純淨、最鮮豔的顏色版本。 0-50% 之間的值是較深的色調,50-100% 之間的值是較淺的色調。