颜色选择概述

在创建网站时，选择字体、背景、边框或任何其他元素的色调是一项常规任务。利用颜色选择器选择色调并调整其透明度。此外，您可以在网站上定义颜色变量，并在使用颜色选择器时选择它们。

选择颜色并调整其透明度

您可以使用下列方法之一选择色调：

• 利用颜色选择工具
• 利用色谱和控件
• 在相应的输入字段中输入值

您可以直接从颜色选择器查看网站上文本的对比度，它不仅展示文本的对比度，还展示与该对比度相对应的 WCAG 级别评级。

对比度会影响网站的可访问性。足够的对比度受前景（文本）和背景颜色（文本背后的背景）、字体大小和字体粗细的影响。

您还可以切换“眼睛”颜色选择器对比度部分中的图标可查看 AA、AAA 和 WCAG 上的失败评级之间的转换。

利用颜色选择工具

要从画布上或当前浏览器窗口外的任何元素中选取色调，请利用颜色选取工具。您可以按空格键显示或隐藏目标色调的 RGB 数字。 

注意：要访问颜色选择工具，请使用 Chrome 或 Edge 作为浏览器（例如基于 Chromium 的浏览器）。 探索 Webflow 支持的浏览器列表.

利用色谱和控件

要从光谱中选择色调，请利用 色相滑块 选择色调，然后利用 颜色平面 选择合适的色调。如果你想降低色调的透明度，使用 透明度滑块.

颜色平面

色彩平面可让您选择要使用的色调。您可以沿 x 轴移动选择器以改变色调的饱和度，沿 y 轴移动选择器以修改亮度。要更改色调，请使用 色相滑块 以下。

色相滑块

色调滑块可让您从色调光谱中选择要使用的色调。然后，您可以使用 颜色平面 多于。

透明度滑块

透明度滑块可让您指定色调的透明度级别。100% 将使色调完全不透明，低于该值的任何值都将使色调透明。这在图像上添加色调叠加或建立透明背景时非常有用。

在相应的输入字段中输入值

如果您希望在选择色调时更加精确，可以使用 Web 颜色名称、十六进制代码、HSB/HSBA 值或 RGB/RGBA 值。您可以将这些值粘贴到样式面板或 十六进制输入字段 在颜色选择器中。或者，您可以分解代码并在其指定字段中输入每个值：

• 十六进制值 HEX 字段
• HSBA 值细分如下 HSB 和 A 字段
• RGBA 值，分开，在 RGB 和 A 字段

您可以通过单击标签在 HSB 和 RGB 之间切换。

十六进制输入字段

此输入字段支持所有网页颜色格式，允许您输入任何 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 颜色名称