跳至主內容

顏色轉換器

顏色轉換器是一個線上工具，可以在HEX、RGB、HSL顏色格式之間進行轉換。支援即時雙向轉換和預設顏色選擇。

#3498DB

🎨 顏色選擇器

HEX

網頁上最常用

RGB

HSL

🎨 預設顏色

支援HEX、RGB和HSL顏色格式之間的轉換。使用顏色選擇器直接選擇顏色或手動輸入值。

功能​

  • 多格式支援：支援HEX、RGB、HSL格式
  • 即時轉換：自動在所有格式之間同步
  • 顏色預覽：即時顯示選中的顏色
  • 預設顏色：10種常用顏色快速選擇
  • 一鍵複製：快速複製任何格式的顏色值

顏色格式​

HEX（十六進位）​

6位十六進位代碼表示顏色：

#RRGGBB
#FF5733 → 紅色:255, 綠色:87, 藍色:51

RGB（紅綠藍）​

使用0-255範圍內的三個值：

rgb(255, 87, 51)

HSL（色相、飽和度、亮度）​

  • 色相（H）：0-360度（色輪上的顏色）
  • 飽和度（S）：0-100%（顏色強度）
  • 亮度（L）：0-100%（明暗程度）
hsl(9, 100%, 60%)

程式範例​

JavaScript​

// HEX轉RGB
function hexToRgb(hex) {
  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null;
}

console.log(hexToRgb('#FF5733'));
// 輸出: {r: 255, g: 87, b: 51}

// RGB轉HEX
function rgbToHex(r, g, b) {
  return "#" + [r, g, b].map(x => {
    const hex = x.toString(16);
    return hex.length === 1 ? "0" + hex : hex;
  }).join('');
}

console.log(rgbToHex(255, 87, 51));
// 輸出: #ff5733

CSS使用​

/* HEX */
.element {
  color: #FF5733;
}

/* RGB */
.element {
  color: rgb(255, 87, 51);
}

/* RGBA（帶透明度） */
.element {
  color: rgba(255, 87, 51, 0.5);
}

/* HSL */
.element {
  color: hsl(9, 100%, 60%);
}

/* HSLA（帶透明度） */
.element {
  color: hsla(9, 100%, 60%, 0.5);
}

預設顏色​

顏色名稱HEXRGB用途
紅色#FF0000rgb(255, 0, 0)錯誤、警告
藍色#0000FFrgb(0, 0, 255)連結、資訊
綠色#00FF00rgb(0, 255, 0)成功、確認
黃色#FFFF00rgb(255, 255, 0)警告、注意
紫色#800080rgb(128, 0, 128)創意、奢華
橙色#FFA500rgb(255, 165, 0)動作、能量
粉紅色#FFC0CBrgb(255, 192, 203)浪漫、溫柔
青色#00FFFFrgb(0, 255, 255)清新、現代
灰色#808080rgb(128, 128, 128)中性、平衡
黑色#000000rgb(0, 0, 0)對比、優雅

使用場景​

1. Web開發​

CSS中定義顏色：

:root {
  --primary-color: #667eea;
  --secondary-color: rgb(102, 126, 234);
  --accent-color: hsl(232, 75%, 67%);
}

2. 設計系統​

建立一致的顏色調色盤：

const colors = {
  primary: {
    hex: '#667eea',
    rgb: 'rgb(102, 126, 234)',
    hsl: 'hsl(232, 75%, 67%)'
  }
};

3. 資料視覺化​

在圖表和圖形中使用顏色代碼。

相關工具​