在網(wǎng)頁設(shè)計(jì)領(lǐng)域，顏色在創(chuàng)建具有視覺吸引力和用戶友好的網(wǎng)站方面起著至關(guān)重要的作用。了解如何在 CSS（層疊樣式表）中有效使用顏色可以增強(qiáng)網(wǎng)站的美感並改善使用者體驗(yàn)。本部落格將探討在 CSS 中指定顏色的各種方法，包括十六進(jìn)位、RGB、RGBA、HSL 和 HSLA 值。我們還將討論色彩對(duì)比度和可訪問性的重要性，以及創(chuàng)建漸層的技術(shù)。閱讀本指南後，您將為在 Web 專案中使用顏色奠定堅(jiān)實(shí)的基礎(chǔ)。

在 CSS 中使用顏色
以下方法可以在 CSS 中指定顏色：

• 十六進(jìn)位顏色
• RGB 顏色
• 預(yù)先定義/跨瀏覽器顏色名稱
• RGBA 顏色
• HSL 顏色
• HSLA 顏色

十六進(jìn)位顏色

十六進(jìn)位顏色由 #RRGGBB 指定，其中 RR（紅色）、GG（綠色）和 BB（藍(lán)色）十六進(jìn)位整數(shù)指定顏色的組成部分。
十六進(jìn)位範(fàn)圍是 0 到 F，表示 00 到 FF。
例如，#0000ff 值渲染為藍(lán)色，因?yàn)榧t色和藍(lán)色設(shè)定為 00，藍(lán)色分量設(shè)定為最高值（ff）。

RGB 顏色

RGB 顏色值透過 rgb() 函數(shù)指定，其語法如下 rgb(red, green, blue)。
每個(gè)參數(shù)（紅色、綠色和藍(lán)色）定義顏色的強(qiáng)度，可以是 0 到 255 之間的整數(shù)，也可以使用 0 % 到 100 % 之間的百分比值。
例如，rgb(0,0,255) 值渲染為藍(lán)色，因?yàn)榧t色和綠色設(shè)定為最低參數(shù) (0)，藍(lán)色參數(shù)設(shè)定為其最高值 (255)。

RGBA 顏色

RGBA 包含一個(gè)額外的 Alpha 通道以實(shí)現(xiàn)透明度。
Alpha 分量指定顏色的透明度等級(jí)。 Alpha 值介於 0（完全透明）和 1（完全不透明）之間。

0：完全透明，使顏色不可見。

0.5：半透明，提供部分透明的效果。

1：完全不透明，表示不透明。

預(yù)定義/跨瀏覽器顏色名稱

都是常見的名字，像是白色、黑色、粉紅色等等
HTML 和 CSS 顏色規(guī)格中預(yù)先定義了 140 種顏色名稱。

HSL 顏色

HSL 代表色調(diào)、飽和度和亮度。 HSL 透過 HSL() 函數(shù)指定，其語法如下 HSL(120, 100%, 50%)。
色調(diào) (0 - 360)：代表顏色類型。它是色輪上的度數(shù)，紅色為 0，綠色為 120，藍(lán)色為 240。
飽和度 (0% - 100%)：描述顏色的強(qiáng)度。 0% 為灰度，100% 為完全飽和。
亮度 (0% - 100%)：指定顏色的亮度。 0% 為黑色，100% 為白色，50% 為正常。

HSLA 顏色

HSLA 包含一個(gè)額外的 Alpha 通道以實(shí)現(xiàn)透明度。
Alpha 分量指定顏色的透明度等級(jí)。 Alpha 值介於 0（完全透明）和 1（完全不透明）之間。

<h1>HEX Color</h1>
<h2>RGB Color</h2>
<h3>RGBA Color</h3>
<p>





</p><pre class="brush:php;toolbar:false">h1 {
  color: #ff5733; /* hex code for an orange color */
}
h2 {
  color: rgb(255, 87, 51); /*RGB code for the same orange color */
}
h3 {
    color: rgba(255, 87, 51, 0.7); /* RGBA code with 70% opacity */
}
.pre {
  color: red; /* color name */
}
.hsl {
  color: hsl(120, 100%, 50%); /* HSL code */
}
.hsla {
  color: hsla(240,100%,50%,0.3); /* /* HSL code with 30% lightness */
}

不透明度

在 CSS 中，opacity 屬性用來設(shè)定元素的透明度。它的值介於 0 和 1 之間。
0：元素完全透明（完全不可見）。
1：元素完全不透明（完全可見）。

<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173593396410460.jpg" class="lazy" alt="在 CSS 中使用顏色的終極初學(xué)者指南">

img {
  opacity: 0.5;
}
img:hover {
  opacity: 1;
}

之前：

之後-將滑鼠停留在影像上：

顏色對(duì)比度和可訪問性：

顏色對(duì)比是確?？床坏侥承╊伾蚋究床坏筋伾娜丝梢哉Ｊ褂萌魏尉W(wǎng)站的重要準(zhǔn)則之一。

可訪問性，或更準(zhǔn)確地說是網(wǎng)頁內(nèi)容可訪問性指南（WCAG），是由W3C 或萬維網(wǎng)聯(lián)盟提出的一套指南，該聯(lián)盟開發(fā)了HTML、CSS 等Web 標(biāo)準(zhǔn)，這些指南有幫助於使Web 變得可存取給殘疾人士。

我們必須確保使用適當(dāng)?shù)念伾珜?duì)比度，WCAG 已為此設(shè)定了一些最小比率作為透過網(wǎng)路可訪問性指南的標(biāo)準(zhǔn)。我們有很多類別，例如 WCAG AA、AAA、介面組件等等。

計(jì)算色彩對(duì)比度

顏色對(duì)比度是使用相對(duì)亮度計(jì)算的。它被定義為色彩空間中任何點(diǎn)的相對(duì)亮度，對(duì)於最深的黑色標(biāo)準(zhǔn)化為零，對(duì)於最亮的白色標(biāo)準(zhǔn)化為 1。
因此，簡(jiǎn)單來說，正如您在這裡看到的，最暗的黑色只不過是十六進(jìn)制代碼#000000，其相對(duì)亮度為0，對(duì)於最亮的白色（十六進(jìn)制代碼#ffffff）來說，相對(duì)亮度可達(dá)1，這幾乎適用於任何色輪上的顏色如果您以紅色為例並從中採樣顏色，相對(duì)亮度值將看起來像這樣，同樣從零開始並以一結(jié)束。

要計(jì)算相對(duì)亮度值涉及大量數(shù)學(xué)運(yùn)算，但這裡有一個(gè)稱為對(duì)比度Contrast Ratio 的工具，您只需在其中輸入十六進(jìn)位代碼，它就會(huì)告訴您相對(duì)亮度值所以，現(xiàn)在我們已經(jīng)有了所有相對(duì)亮度值我們要做的就是應(yīng)用色彩對(duì)比公式。

色彩對(duì)比公式= (L1 0.05)/(L2 0.05)
哪裡，
L1 是較淺顏色的亮度
L2 是較暗顏色的亮度。

範(fàn)例

白底藍(lán)色文字。

此處白色是較淺的顏色，亮度為 1。
藍(lán)色是較暗的顏色，亮度為 0.0722。
亮度是使用對(duì)比度工具計(jì)算的。

現(xiàn)在將這些值應(yīng)用到公式中，

色彩對(duì)比公式= (L1 0.05)/(L2 0.05)
= (1 0.05)/(0.0722 0.05)
= 8.59 = 8.59 : 1

您可以檢查我們的顏色對(duì)比度，以了解它是否通過 WCAG 準(zhǔn)則。
檢查這一點(diǎn)的工具是對(duì)比檢查器。
您還可以使用「顏色對(duì)比度分析器」等瀏覽器擴(kuò)展，它可以提供網(wǎng)頁上元素對(duì)比度的即時(shí)回饋。

白色背景上的藍(lán)色文本傳遞文本，如下所示。

可讀性：足夠的色彩對(duì)比度對(duì)於確保文字和視覺元素易於閱讀至關(guān)重要。
可訪問性：網(wǎng)頁內(nèi)容的設(shè)計(jì)應(yīng)具有包容性，並且可供具有不同能力的使用者存取。高色彩對(duì)比度增強(qiáng)了網(wǎng)站或應(yīng)用程式的整體可訪問性，使其可供更廣泛的受眾使用。

漸變

CSS 漸層可讓您在兩個(gè)或多個(gè)指定顏色之間顯示平滑過渡。

CSS 定義漸變型。

• 線性漸層（下/上/左/右/對(duì)角線）
• 徑向漸層（由中心定義）

線性漸變

要建立線性漸變，您必須定義至少兩個(gè)色標(biāo)。色標(biāo)是我們想要在其中呈現(xiàn)平滑過渡的顏色。您也可以設(shè)定起點(diǎn)和方向（或角度）以及漸層效果。
語法

背景影像：線性漸層（方向，color-stop1，colorstop2，...）；

方向預(yù)設(shè)方向：從上到下

<h1>HEX Color</h1>
<h2>RGB Color</h2>
<h3>RGBA Color</h3>
<p>





</p><pre class="brush:php;toolbar:false">h1 {
  color: #ff5733; /* hex code for an orange color */
}
h2 {
  color: rgb(255, 87, 51); /*RGB code for the same orange color */
}
h3 {
    color: rgba(255, 87, 51, 0.7); /* RGBA code with 70% opacity */
}
.pre {
  color: red; /* color name */
}
.hsl {
  color: hsl(120, 100%, 50%); /* HSL code */
}
.hsla {
  color: hsla(240,100%,50%,0.3); /* /* HSL code with 30% lightness */
}

<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173593397012567.jpg" class="lazy" alt="在 CSS 中使用顏色的終極初學(xué)者指南">

具體方向：向右、向上、向下、向左、向左上

img {
  opacity: 0.5;
}
img:hover {
  opacity: 1;
}

<h1>Linear gradient without direction</h1>

使用角度：

<h1>HEX Color</h1>
<h2>RGB Color</h2>
<h3>RGBA Color</h3>
<p>





</p><pre class="brush:php;toolbar:false">h1 {
  color: #ff5733; /* hex code for an orange color */
}
h2 {
  color: rgb(255, 87, 51); /*RGB code for the same orange color */
}
h3 {
    color: rgba(255, 87, 51, 0.7); /* RGBA code with 70% opacity */
}
.pre {
  color: red; /* color name */
}
.hsl {
  color: hsl(120, 100%, 50%); /* HSL code */
}
.hsla {
  color: hsla(240,100%,50%,0.3); /* /* HSL code with 30% lightness */
}

<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173593397012567.jpg" class="lazy" alt="在 CSS 中使用顏色的終極初學(xué)者指南">

使用透明度：要新增透明度，可以使用 rgba() 函數(shù)，其中最後一個(gè)參數(shù)是透明度，範(fàn)圍是 0（完全透明度）到 1（不透明度）

img {
  opacity: 0.5;
}
img:hover {
  opacity: 1;
}

<h1>Linear gradient without direction</h1>

徑向漸變

徑向漸層由其中心定義。若要建立徑向漸變，您必須定義至少兩個(gè)色標(biāo)。

文法

背景影像：徑向漸層（位置處的形狀大小，起始顏色，..，最後顏色）;

範(fàn)例

h1 {
  background-image: linear-gradient(blueviolet, black);
  color: white;
}

<h2>Linear gradient with right direction</h2>

h2 {
  color: white;
  background-image: linear-gradient(to right, blueviolet, black);
}

工具和資源

調(diào)色板產(chǎn)生器：

冷卻器

Coolors 是一個(gè)配色方案產(chǎn)生器，可讓您探索、建立和自訂調(diào)色板。您可以鎖定特定顏色並產(chǎn)生互補(bǔ)調(diào)色板。

Adobe 色輪

Adobe Color Wheel 色輪可讓您根據(jù)類似色、單色、三色等顏色規(guī)則建立配色方案。它是設(shè)計(jì)和諧調(diào)色板的強(qiáng)大工具。

瀏覽器開發(fā)者工具：Google Chrome 開發(fā)者工具：右鍵單擊元素，選擇“檢查”，轉(zhuǎn)到“樣式”面板，然後將滑鼠懸停在顏色值上以選擇顏色。顏色選擇器可讓您即時(shí)測(cè)試和修改顏色。

結(jié)論
掌握 CSS 中的顏色對(duì)於任何網(wǎng)頁設(shè)計(jì)師或開發(fā)人員來說都是至關(guān)重要的。透過利用不同的顏色規(guī)範(fàn)並了解顏色對(duì)比對(duì)於可訪問性的重要性，您可以創(chuàng)建更具吸引力和包容性的網(wǎng)站。請(qǐng)記住，顏色不僅可以美化您的設(shè)計(jì)，還會(huì)影響可用性和使用者體驗(yàn)。使用本部落格中提供的工具和資源，您現(xiàn)在可以自信地嘗試顏色並增強(qiáng)您的 Web 專案。

感謝您閱讀部落格並投入時(shí)間。我希望您覺得這個(gè)部落格富有洞察力，並從中學(xué)到一些東西。如果您這樣做了，請(qǐng)透過對(duì)部落格做出回應(yīng)來提供一些支持。

以上是在 CSS 中使用顏色的終極初學(xué)者指南的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！