顏色

顏色是所有網站不可或缺的一環,而且在 CSS 中有很多顏色類型 函數和治療方法

如何決定要使用哪一種顏色類型? 如何將顏色設定為半透明? 本課程 您會學到哪些方案可以幫助您為專案和團隊做出正確的決策。

CSS 提供多種資料類型, 例如字串和數字 顏色是上述類型之一,並使用其他類型。 例如其定義的數字

數字顏色

您在 CSS 中第一次接觸色彩時,很可能是透過數字來增加色彩。 數字顏色值可運用在幾種不同形式中。

十六進位顏色

h1 {
  color: #b71540;
}

十六進位標記法 (通常縮短為十六進位) 是 RGB、 會將數值指派給紅色和藍色 也就是三種主要顏色

十六進位範圍是 0-9A-F。 如果是 6 位數序列中使用 轉換成 RGB 數值範圍 (介於 0 到 255) 每個頻道分別對應至紅色、綠色和藍色頻道

您也可以定義任何數字顏色的 Alpha 值。 Alpha 值是透明度的百分比。 若是 16 個數字,您可以在 6 位數字的序列中加入另外兩位數, 產生八位數序列 舉例來說,如要將十六進位代碼設為黑色,請編寫 #000000。 如要增加 50% 的透明度,請變更為 #00000080

由於十六進位尺碼為 0-9A-F,因此透明度值可能不如預期。 以下是新增至黑色十六進位碼 #000000 的一些鍵/常見值:

  • 0% Alpha (完全透明) 為 00#00000000
  • 50% Alpha 為 80#00000080
  • 75% Alpha 為 BF#000000BF

如要將二位數十六進位轉換成十進位, 第一個數字再乘以 16 (因為十六進位是底數 16), 然後加上第二位數以 BF 做為 75% Alpha 的範例:

  1. B 等於 11,乘以 16 等於 176
  2. F 等於 15
  3. 176 + 15 = 191
  4. Alpha 值為 191 到 255 的 75%
,瞭解如何調查及移除這項存取權。

RGB (紅、綠、藍色)

h1 {
  color: rgb(183, 21, 64);
}

RGB 顏色是以 rgb() 色彩函式, 將數字或百分比做為參數 數字必須介於 0-255 的範圍內,且百分比介於 0% 至 100% 之間。 RGB 大小為 0 至 255 所以 255 就等於 100%,0 到 0%。

如要在 RGB 中設定黑色,請將其定義為 rgb(0 0 0)、 也就是零紅色、零綠色和零藍色 黑色也可以定義為 rgb(0%, 0%, 0%)。 白色為正反對面:rgb(255, 255, 255)rgb(100%, 100%, 100%)

Alpha 是透過以下兩種方式在 rgb() 中設定。 請在紅色、綠色和藍色參數「後面」加上 /。 或使用 rgba() 函式。 可使用 0 到 1 之間的百分比或小數來定義 Alpha。 舉例來說,如要在新型瀏覽器中將 50% 的 Alpha 值設為黑色,請編寫:rgb(0 0 0 / 50%)rgb(0 0 0 / 0.5)。 如需更廣泛的支援,請使用 rgba() 函式 寫入:rgba(0, 0, 0, 50%)rgba(0, 0, 0, 0.5)

,瞭解如何調查及移除這項存取權。

HSL (色調、飽和度、亮度)

h1 {
  color: hsl(344, 79%, 40%);
}

HSL 代表色調、飽和度和亮度。 Hue 表示從 0 到 360 度的色彩轉盤上,從紅色開始 (同時是 0 和 360) 的值。 180 或 50% 的色調則代表藍色範圍。 這是我們看到色彩的起點。

附有以 60 度為單位遞增的度數值標籤的色彩轉盤,讓您清楚瞭解每個角度值所代表的意義

飽和度是指所選色調的生動程度。 完全不飽和的顏色 (飽和度為 0%) 將顯示為灰階。 最後,Lightness 參數用來說明增加亮度的比例由白色到黑色。 亮度為 100% 時一律會呈現白色。

使用 hsl() 顏色函式時, 您可以編寫 hsl(0 0% 0%),甚至是 hsl(0deg 0% 0%),定義真實黑色。 這是因為 hue 參數會定義色輪的度數 如果使用數字類型,則該類型為「0-360」。 您也可以使用角度類型,也就是 (0deg) 或 (0turn)。 飽和度和亮度兩者都是以百分比定義。

HSL 色彩功能以視覺化方式細分。色調使用色彩轉輪。飽和度呈現灰色融入藍綠色。光線變成白色。

Alpha 定義在 hsl() 中 方法與 rgb() 相同,方法是在色調、飽和度和亮度參數後方加上 /使用 hsla() 函式。 可使用 0 到 1 之間的百分比或小數來定義 Alpha。 舉例來說,如要將 50% 的 Alpha 值設為黑色,請使用 hsl(0 0% 0% / 50%)hsl(0 0% 0% / 0.5)。 請使用 hsla() 函式寫入:hsla(0, 0%, 0%, 50%)hsla(0, 0%, 0%, 0.5)

顏色關鍵字

CSS 中有 148 種具名顏色, 這些是實際的英文名稱,例如紫色、番茄和黃金。 還有一些最熱門的名稱 Web Almanac 的研究基礎 分別是黑、白、紅、藍和灰色 我們的精選應用程式包括金黃、紅杉和辣椒。

除了標準顏色之外,您還可以使用特殊關鍵字:

  • transparent 是完全透明的顏色。 也是 background-color 的初始值
  • currentColorcolor 屬性根據內容計算的動態值。 如果文字顏色為 red,然後將 border-color 設為 currentColor,該文字也會呈現紅色。 如果您定義 currentColor 的元素並未定義 color 值, 系統會改為透過串聯計算「currentColor
,瞭解如何調查及移除這項存取權。

在 CSS 規則中使用顏色的位置

如果 CSS 資源接受 <color> 資料類型做為值。 即可接受上述任一種色彩方式。 如要設定文字樣式,請使用 colortext-shadowtext-decoration-color 屬性 這些值都會接受顏色做為值或顏色的一部分。

背景可以將顏色設為 backgroundbackground-color 的值。 顏色也可以用於漸層,例如 linear-gradient。 漸層是可在 CSS 中透過程式定義的圖片類型。 漸層值支援兩種以上顏色格式組合的顏色,例如十六進位、 rgb 或 hsl。

最後,border-coloroutline-color 會設定方塊的框線和外框顏色。 box-shadow 屬性也接受使用顏色做為其中一個值。

隨堂測驗

測試您對顏色的瞭解程度

以下何者是有效的顏色?

rgb(255, 0, 0)
rbga(400 0 1)
#OOFZ2
#0f08
hsl(180deg 50% 50%)
hotpink

找出無效的 hsl 顏色。

hsl(0 0% 0% / 20%)
hsl(2rad 50% 50%)
hsl(.5turn 40% 60%)
hsl(0, 0, 0)
hsl(5, 0%, 90%)

資源