跳至主內容

顏色轉換器

顏色轉換器是一個線上工具,可以在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. 資料視覺化

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

相關工具