半透明的十六進位HEX - Medium

hex表示法很容易，因為在photoshop用個滴管取色就可以得到顏色標示碼。

要用hex去表現半透明的顏色，會看到#號後面出現8個位數。

background-color: # ... GetunlimitedaccessOpeninappHomeNotificationsListsStoriesWrite半透明的十六進位HEX網頁需要標示半透明的情況蠻常見的，大致上會遇到這幾種用法來讓一個色塊顯示出半透明：三種半透明的CSS1.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:#00000085HEX三原色一般看到的6位的數值，每兩位數值依序代表是R,G,B，也因此全部都最小的時候就是純白:#000000，而六位的數值都是最大的F，則顯示純黑#FFFFFFHEX+透明表示只要在最後加上兩位數值來表示灰階的計算，就可以調整出半透明。

我覺的用hex來表示並沒有rgba(0,0,0,0.5);的直白，因為實在看不出到底透明度有多少，但code看起來卻乾淨許多。

計算工具chromedevtoolschrome的取色工具可幫你的半透明轉換成hex的表示法。

VScodevscode也有同樣的的colorpicker幫你轉換各種表示法。

MorefromFangkeHsiehFollowpartimedesigner,full-timecatfeeder,http://fangke.designLovepodcastsoraudiobooks?Learnonthegowithournewapp.TryKnowableAboutHelpTermsPrivacyGettheMediumappGetstartedFangkeHsieh11Followerspartimedesigner,full-timecatfeeder,http://fangke.designFollowHelpStatusWritersBlogCareersPrivacyTermsAboutKnowable