Skip to content

CSS 色彩表示法

CSS 支援多種色彩表示法,常用的為色名、十六進位、RGB(A)、HSL(A)。根據需求選擇合適的表示法。

色名

直觀的用文字來描述,但缺色彩細部的調整。

css
color: red;
color: blue;
color: orange;

16 進位

# 開頭,後面接續色光三原色 (RGB) 所分成 0 ~ 255 階共 256 等分,並使用 16 進位來表示。

css
color: #ff0000;   /* 紅色 */
color: #00ff00;   /* 綠色 */
color: #0000ff;   /* 藍色 */
color: #fff;      /* 白色,縮寫 */

支援透明度

近年來瀏覽器也進步不少,亦支援 16 進位色碼的八碼寫法,多出來兩碼為透明度,數值越高透明度越低,00 表示全透明,ff 表示不透明。

css
color: #ff000080  /* 透明度 50% */
color: #00ff004d  /* 透明度 30% */

以下為轉換為 16 進位的小工具:

色彩函式

CSS 還有 函式 的色彩表示法,Away 列出一些較常見到的。

RGB

RGB 為色光三原色,其色彩的範圍在 0 ~ 255 之間。

color: rgb(R, G, B);
  • R: 0~255。例如: 255
  • G: 0~255。例如: 0
  • B: 0~255。例如: 0

RGBA

RGB 表示法的延伸,多加了透明度。其範圍在 0~1 之間。

css
color: rgba(255, 0, 0, .5);   /* 50% 透明度的紅色 */

HSL

HSL 為色彩空間的表示法。

color: hsl(色相, 飽和度, 明度);
  • 色相: 0~359。例如: 0
  • 飽和度: 0%~100%。例如: 100%
  • 明度: 0%~100%。例如: 50%

HSLA

HSL 表示法的延伸,多加了透明度。其範圍在 0~1 之間。

css
color: hsla(0, 100%, 50%, .5);  /* 半透明紅色 */