跳至正文

色彩轉換器

支援 HEX、RGB、HSL 色彩格式互轉的免費線上工具。

#3498DB

🎨 색상 선택

HEX

웹에서 가장 많이 사용

RGB

HSL

🎨 미리 설정된 색상

HEX, RGB, HSL 색상 형식 간 변환을 지원합니다. 색상 피커로 직접 색상을 선택하거나, 값을 직접 입력할 수 있습니다.

什麼是色彩格式？​

在數位環境中，有多種表示色彩的方法。每種格式都有特定用途和優點，應根據情況選擇適當的格式。

主要功能​

  • 3 種格式支援：HEX、RGB、HSL
  • 即時轉換：變更一種格式時，所有格式自動更新
  • 色彩選擇器：視覺化選擇色彩
  • 大型預覽：大面積確認選擇的色彩
  • 即時複製：一鍵複製各格式
  • 預設色彩：提供 10 種熱門色彩

色彩格式說明​

HEX（Hexadecimal）- 十六進位​

在網頁中最常使用的格式。

格式：

#RRGGBB

範例：

#3498db  /* 藍色 */
#e74c3c  /* 紅色 */
#2ecc71  /* 綠色 */

結構：

  • #：前綴
  • RR：紅色（00-FF）
  • GG：綠色（00-FF）
  • BB：藍色（00-FF）

3 位數縮寫形式：

#f00  /* 與 #ff0000 相同 */
#abc  /* 與 #aabbcc 相同 */

優點：

  • 簡潔
  • CSS 的基本格式
  • 易於複製

缺點：

  • 難以理解
  • 色彩調整不直觀

RGB（Red, Green, Blue）​

使用光的三原色的格式。

格式：

rgb(R, G, B)

範例：

rgb(52, 152, 219)   /* 藍色 */
rgb(231, 76, 60)    /* 紅色 */
rgb(46, 204, 113)   /* 綠色 */

值範圍：

  • 各通道：0-255
  • 0 = 暗，255 = 亮

RGBA（含透明度）：

rgba(52, 152, 219, 0.5)  /* 50% 透明度 */

優點：

  • 易於理解
  • 可獨立調整各色彩通道
  • 在程式設計中直觀

缺點：

  • 比 HEX 長
  • 亮度調整不直觀

HSL（Hue, Saturation, Lightness）​

使用色相、飽和度、亮度的格式。

格式：

hsl(H, S%, L%)

範例：

hsl(204, 70%, 53%)   /* 藍色 */
hsl(6, 78%, 57%)     /* 紅色 */
hsl(145, 63%, 49%)   /* 綠色 */

值範圍：

  • H（Hue）：0-360°（色相環）
    • 0° = 紅色
    • 120° = 綠色
    • 240° = 藍色
  • S（Saturation）：0-100%（飽和度）
    • 0% = 灰色
    • 100% = 純色
  • L（Lightness）：0-100%（亮度）
    • 0% = 黑色
    • 50% = 純色
    • 100% = 白色

HSLA（含透明度）：

hsla(204, 70%, 53%, 0.5)  /* 50% 透明度 */

優點：

  • 色彩調整非常直觀
  • 易於調整亮度/飽和度
  • 適用於建立色彩調色板

缺點：

  • 不如 HEX/RGB 直觀
  • 部分舊版瀏覽器不支援

相關工具​

💬 這個工具對您有幫助嗎？​

歡迎隨時向我們發送您的意見或建議！

🔒 隱私權保護​

此工具完全在客戶端運作。您選擇的色彩資訊不會傳送到伺服器，僅在瀏覽器中處理。