顏色選擇概述

建立網站時，為字體、背景、邊框或任何其他元素選擇陰影是一項例行任務。使用顏色選擇器選擇陰影並調整其透明度。此外，您可以在網站上定義顏色變量，並在使用顏色選擇器時選擇它們。

選擇一種顏色並調整其透明度

您可以使用以下方法之一選擇色調：

• 使用顏色選擇工具
• 利用色譜和控件
• 在對應的輸入欄位中輸入值

您可以直接從顏色選擇器查看網站上文字的對比度，它不僅顯示文字的對比度，還顯示與該對比度相對應的 WCAG 等級評級。

對比度會影響網站的可訪問性。足夠的對比度受前景（文字）和背景顏色（文字後面的背景）、字體大小和字體粗細的影響。

您也可以切換“眼睛」 圖示（位於顏色選擇器的對比部分），可查看 AA、AAA 和 WCAG 失敗評級之間的過渡。

使用顏色選擇工具

若要從畫布上或目前瀏覽器視窗外部的任何元素選擇色調，請利用顏色選擇工具。您可以按空白鍵顯示或隱藏目標色調的 RGB 數字。 

注意：若要存取顏色選擇工具，應使用 Chrome 或 Edge 作為瀏覽器（例如基於 Chromium 的瀏覽器）。 瀏覽 Webflow 支援的瀏覽器列表.

利用色譜和控件

若要從光譜中選擇色調，請使用 色調滑桿 選擇色調，然後使用 色彩平面 選擇合適的色調。如果您想降低色調的透明度，請使用 透明度滑桿.

色彩平面

顏色平面使您能夠選擇想要使用的色調的深淺。您可以沿著 x 軸移動選取器以變更色調的飽和度，並沿著 y 軸移動選取器以修改亮度。若要改變色調，請使用 色調滑桿 以下。

色相滑桿

色調滑桿使您能夠從色調光譜中選擇您想要使用的色調。然後您可以使用 色彩平面 多於。

透明度滑桿

透明度滑桿可讓您指定色調的透明度等級。 100% 將使色調完全不透明，任何低於該值的值都會使色調透明。當在影像上添加色調疊加或建立透明背景時，這非常有用。

在對應的輸入欄位中輸入值

如果您希望在選擇色調時更加精確，可以使用網頁顏色名稱、十六進位代碼、HSB/HSBA 值或 RGB/RGBA 值。您可以將這些值貼到「樣式」面板或「樣式」面板中的任何顏色欄位中。 十六進位輸入字段 在顏色選擇器中。或者，您可以分解代碼並在其指定欄位中輸入每個值：

• 十六進位值在 十六進位字段
• HSBA 值細分為 HSB 和 A 字段
• RGBA 值，分開，在 RGB 和 A 字段

您可以透過點擊標籤在 HSB 和 RGB 之間切換。

十六進位輸入字段

此輸入欄位支援所有 Web 顏色格式，可讓您輸入任何 HTML 顏色值。所有值都將轉換為十六進制。了解有關十六進位代碼和網頁顏色格式的更多資訊。

HSB 和 RGB 輸入

與 HEX 輸入欄位相鄰，有 3 個標示為「HSB」的輸入欄位。如果單擊標籤，它將切換到“RGB”。若要恢復，請再次按一下該標籤。

“H”代表色調。當您使用 色調滑桿，「H」欄位中的值將會更新。 “S”代表飽和度，“B”代表亮度。當您在區域中移動選取器時，這些值將會發生變化 色彩平面。如果您知道要使用的色調的 HSB 值，則可以在適當的欄位中輸入值。

如果您知道色調的 RGB 值，請點選 HSB 標籤並輸入紅色「R」、綠色「G」和藍色「B」的值。無論使用什麼工具來選擇色調，這些欄位都會自動顯示正確的值。

“A”或 Alpha 輸入字段

“A”表示 Alpha 通道。 Alpha 通道決定色調的透明度。該值受以下因素影響 透明度滑桿。 Alpha 值的範圍是 0 到 100%。如果您知道色調的 Alpha 值，請將其乘以 100 並將其輸入到此輸入欄位中。

發現更多

• 顏色格式 HEX、RGB 和 RGBA
• HTML 顏色名稱