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); /* 半透明紅色 */