半透明的十六進位HEX

網頁需要標示半透明的情況蠻常見的，大致上會遇到這幾種用法來讓一個色塊顯示出半透明：

三種半透明的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看起來卻乾淨許多。

計算工具

1. chrome dev tools
   chrome的取色工具可幫你的半透明轉換成hex的表示法。

1. VS code
   vs code也有同樣的的color picker幫你轉換各種表示法。