半透明的十六進位HEX
3 min readMar 20, 2019
網頁需要標示半透明的情況蠻常見的,大致上會遇到這幾種用法來讓一個色塊顯示出半透明:
三種半透明的CSS
1. Background-color & Opacity.
最簡單的就是把一個色塊設置一個底色,再利用opacity屬性來調整成半透明 。
background-color: #000;
opacity: .5;
2. RGBA (Red,Green,Blue).
經常用來寫透明的表示法,數值分別是:紅、綠、藍、透明度。
background-color: rgba(0, 0, 0, 0.5);
3. HSLA (Hue, Saturation, Lightness).
縮寫分別是指色調、飽和度、明亮度;最後一個參數跟rgba一樣,用來表示透明度。
background-color: hsla(0, 0%, 0%, 0.5)
4. HEX 十六進位.
hex表示法很容易,因為在photoshop用個滴管取色就可以得到顏色標示碼。要用hex去表現半透明的顏色,會看到#號後面出現8個位數。
background-color: #00000085
HEX 三原色
一般看到的6位的數值,每兩位數值依序代表是 R,G,B,也因此全部都最小的時候就是純白:#000000,而六位的數值都是最大的F,則顯示純黑#FFFFFF
HEX+透明表示
只要在最後加上兩位數值來表示灰階的計算,就可以調整出半透明。
我覺的用hex來表示並沒有rgba(0, 0, 0, 0.5);的直白,因為實在看不出到底透明度有多少,但code看起來卻乾淨許多。
計算工具
- chrome dev tools
chrome的取色工具可幫你的半透明轉換成hex的表示法。
- VS code
vs code也有同樣的的color picker幫你轉換各種表示法。