CSS顏色標示器

顏色(color)

關於色彩，讓我想起電視機收播時的畫面，在昏暗的客廳之中，唯一的光源僅來自於厚重的映像管螢幕，紅黃藍綠的色塊打在爺爺的臉上，映照出慈祥的面容。CSS呈現顏色的方式，大致上可以分成三種：

• 顏色名稱(關鍵字)：例如blue,red,yellow

<p style="color:aliceblue;"> 文字在這兒 </p>

• HEX/RGB色碼：

以3組16進位的數字來組合成顏色，最後的透明度(opacity)可加可不加

<p style="color:#F0F8FF;"> 文字在這兒 </p>
<p style="color:rgba(240, 248, 255, 0.8);"> 文字在這兒 </p>

• HSL色碼：

hsl代表色相(Hue)、飽和度(Saturation)及亮度（Lightness / Luminance)

<p style="color:hsla(240, 248, 255, 0.8);"> 文字在這兒 </p>

漸層(gradient)

起點與終點的過程，想像一下吞下藥，慢慢地殺死痛苦，在繁盛與凋零中間的模糊過程，就是漸層。
CSS將兩種顏色透過漸層功能來顯示更為自然的轉換方式，包含：

linear-gradient <!-- 線性漸層 -->
radial-gradient <!-- 放射漸層 -->
conic-gradient <!--圓錐形漸層 -->
repeating-linear-gradient <!--線性重複漸層 -->
repeating-radial-gradient <!--放射重複漸層 -->
repeating-conic-gradient <!--圓錐形重複漸層 -->

這一次就從CSS顏色標示器課程的畫面，慢慢地將上面學到的東西，實踐出來吧。

下一篇：問候

引用與資源：
freecodecamp
mdn_web_docs
我的CSS顏色標示器