> 轉換 | 預覽 | 選擇 <
// 在HEX、RGB、HSL、HSV和CMYK之間轉換
顏色預覽
即時顏色預覽更新。
任意格式輸入
所有格式自動更新。
5種顏色格式
HEX, RGB, HSL, HSV/HSB, CMYK轉換。
// 關於顏色格式
顏色模型:
加色RGB用於螢幕，減色CMYK用於印刷，HEX為緊湊RGB表示，HSL/HSV用於色相飽和度。
範例:
#FF5733 → rgb(255, 87, 51) → hsl(11, 100%, 60%)
常見用途:
- >Web開發: CSS顏色
- >印刷: RGB轉CMYK
- >UI設計: HSL調整
- >品牌: 一致顏色
- >無障礙: 對比度
>> 常見問題
Q: HEX vs RGB?
HEX and RGB represent the same color model in different notations. HEX uses hexadecimal (#FF5733) while RGB uses decimal (rgb(255, 87, 51)).
Q: HSL?
HSL = Hue, Saturation, Lightness. More intuitive for humans. CSS supports hsl() natively.
Q: CMYK?
CMYK is for print. Not all RGB colors can be reproduced in CMYK.
Q: CSS color formats?
Modern browsers support HEX, RGB, HSL, named colors, hwb(), lab(), lch(), oklch().
Q: Accessibility?
Color format does not directly affect accessibility. WCAG 2.1 requires 4.5:1 minimum contrast for normal text.
// 常用顏色的 HEX、RGB、HSL
| HEX | RGB | HSL |
|---|---|---|
| #FF0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| #00FF00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| #0000FF | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| #FFFF00 | rgb(255, 255, 0) | hsl(60, 100%, 50%) |
| #00FFFF | rgb(0, 255, 255) | hsl(180, 100%, 50%) |
| #FF00FF | rgb(255, 0, 255) | hsl(300, 100%, 50%) |
| #FFA500 | rgb(255, 165, 0) | hsl(39, 100%, 50%) |
| #808080 | rgb(128, 128, 128) | hsl(0, 0%, 50%) |
| #FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
// CSS 顏色寫法與換算
color: #ff8000; color: #f80; /* shorthand for #ff8800 */ color: #ff800080; /* 8 digits: last two = alpha */ color: rgb(255 128 0); color: rgb(255 128 0 / 50%); color: hsl(30 100% 50%); #FF8000 -> FF=255 80=128 00=0 -> rgb(255, 128, 0)
>> 更多問題
問：如何手動把 HEX 轉成 RGB？
答：把代碼依兩位分組，每組從十六進位轉為十進位：#FF8000 → FF = 255，80 = 128，00 = 0，即 rgb(255, 128, 0)。
問：簡寫（#F80）和 8 位 HEX 是什麼意思？
答：#F80 是 #FF8800 的簡寫（每位重複一次）。8 位（#RRGGBBAA）時，最後兩位是 Alpha 通道，即不透明度。
問：為什麼印刷和螢幕上的顏色不一樣？
答：螢幕以加色法（RGB）混合光線，色域更廣；印刷以減色法（CMYK）混合油墨。鮮豔的綠色、藍色和螢光色往往只能近似印刷，建議以打樣確認。