在CSS中探索顏色

<p>掌握CSS顏色：綜合指南

<p>>在上一課中，我們探索了CSS選擇器。現在，讓我們通過學習如何操縱所選元素的外觀，從顏色修改開始。本指南涵蓋了定義CSS中顏色的各種方法，包括顏色名稱，十六進制代碼，RGB值和HSL格式。

> <p>如前所述，在選擇HTML元素（例如A<p>>段落）之後，您可以使用color>屬性來修改其文本顏色：>

<code class="language-css">p {
  color: red;
}</code>

同樣，<p>屬性會更改元素的背景：> background-color

> CSS支持常見的顏色名稱，例如“紅色”和“ DarkOrange”，但並不包含所有可能的色調。 對於精確的顏色控制，RGB，HEX和HSL顏色型號具有更大的靈活性。

<code class="language-css">p {
  background-color: darkorange;
}</code>

> RGB顏色模型<p> RGB（紅色，綠色，藍色）構成計算機系統中顏色表示的基礎。 混合這三種原色會產生廣泛的色調。

函數定義了RGB顏色：

<p>每個參數（rgb()，

，

<code class="language-css">rgb(<red>, <green>, <blue>)</code>

）接受整數值在0到255之間，代表每個顏色組件的強度。 0表示最弱的強度，而255最強。例如：<p> red green組合不同的強度會產生各種顏色：blue

強烈建議使用顏色拾取器工具來視覺選擇RGB值，因為僅靠數值的值預測所得顏色很具有挑戰性。

<code class="language-css">p {
  color: rgb(255, 0, 0); /* Equivalent to color: red; */
}</code>

<p>

<code class="language-css">p {
  color: rgb(168, 189, 45);
}</code>

<p>函數通過添加alpha通道擴展

： <p>

參數（0.0至1.0）控制透明度； 0.0是完全透明的，1.0完全不透明： <p> rgba()rgb()

<code class="language-css">rgba(<red>, <green>, <blue>, <alpha>)</code>

十六進制顏色模型<p> alpha十六進制的顏色使用十六進制符號：

<code class="language-css">p {
  color: rgba(167, 189, 45, 0.408);
}</code>

<p>符號先於六位數十六進制代碼。 每對（，

，

）分別代表紅色，綠色和藍色組件，範圍從00（0小數）到FF（255個小數）。 例如：

<p> 可以使用八位數十六進制代碼添加

透明度：>

<code class="language-css">#rrggbb</code>

<p>#表示alpha通道（00至ff，映射到0.0至1.0）。 rr gg這相當於bb。

<code class="language-css">p {
  color: #ff0000; /* Equivalent to color: rgb(255, 0, 0); and color: red; */
}</code>

<p>

> HSL顏色模型

<p>hsl（色相，飽和，輕度）是圖形設計師熟悉的顏色模型。 hsl()函數使用：

<code class="language-css">p {
  color: red;
}</code>

<p>hue代表顏色在色輪上的位置（0至360度）。

<p>

><p>（0％至100％）表示顏色的強度（0％是灰色，100％是全顏色）。 saturation

<p> >

（0％至100％）確定添加的黑色或白色的量（0％為黑色，100％是白色）。 <p>lightness

在 <p>

這等效於<p>和hsla()。

進一步探索

<code class="language-css">p {
  background-color: darkorange;
}</code>

<code class="language-css">rgb(<red>, <green>, <blue>)</code>

<p>>使用CSS #a7bd2d68創建多列佈局 rgba(167, 189, 45, 0.408)掌握CSS網格佈局

>使用CSS

構建Flexbox佈局

以上是在CSS中探索顏色的詳細內容。更多資訊請關注PHP中文網其他相關文章！