回到所有的课程
课程库

颜色选择器概述

学习如何选择颜色和使用颜色选择器创建色板。

这个视频的特点是一个旧的UI。更新版本即将发布!

为字体、背景、边框等选择颜色是设计网站时最常见的操作之一。颜色选择器有不同的工具,允许您:

  1. 选择一个颜色并设置它的不透明度
  2. 创建色板
左:调整非排版元素的颜色时出现的颜色选择器。右:在为排版元素调整颜色时出现的颜色选择器,其中包括对比度检查器。您可以选择您的颜色与HEX代码,颜色平面和滑块,一个滴管,并设置色板在整个项目中使用。
左:为非排版元素调整颜色时出现的颜色选择器。正确的:在为排版元素调整颜色时出现的颜色选择器(带有对比度检查器)。

选择一个颜色并设置它的不透明度

你可以通过以下方式选择颜色:

  1. 使用滴管工具
  2. 使用颜色平面和滑块
  3. 在适当的输入字段中键入值。
如果你正在设计你可以在页面上看到的东西,颜色的变化会实时更新。

您可以直接从Webflow中的颜色选择器中检查站点上文本的对比度,它不仅显示文本的对比度,还显示与该对比度对应的WCAG级别评级。

对比度影响网站的可访问性。充分的对比度取决于前景(你的文本)和背景颜色(文本出现的背景)、字体大小和字体重量。

在黑色背景下的浅蓝色文本通过了AAA WCAG等级的对比度检查。
本例中文本的对比度(浅蓝色与黑色背景的对比)在WCAG上具有“AAA”通过评级。
白色背景下的浅蓝色文本没有通过WCAG“失败”评级的对比度检查。
白色背景下的浅蓝色文本的WCAG评级为“失败”,因为白色背景颜色降低了对比度。

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

使用滴管工具

要从画布上或当前浏览器窗口外的任何元素中选择颜色,请使用滴管工具。

注意:要使用滴管工具,您必须使用Chrome或Edge作为浏览器(例如,基于Chrome的浏览器)。在未来,随着对滴管工具的支持开发完成,该工具可能会在其他浏览器(如Safari、Firefox等)上使用。不过,与此同时,你现在需要使用Chrome或Edge来访问滴管工具。查看Webflow支持的浏览器列表

点眼药器

滴管工具是一种很好的方法,可以从画布上的任何地方或当前浏览器窗口之外拉出精确的颜色。因此,如果您想从图像、页面上的现有类或计算机上的另一个应用程序中的图形中提取颜色,您可以使用这个工具。

专家提示:按空格键显示或隐藏目标颜色的RGB数字。

使用颜色平面和滑块

要从光谱中选择一种颜色,请使用颜色滑块要选择色调,请使用颜色平面选择合适的颜色。如果你想让颜色不那么不透明,使用不透明度滑块

颜色平面

颜色平面允许你选择你想要使用的颜色的深浅。你可以沿着x轴移动拾取器来调整颜色的饱和度,沿着y轴来调整亮度。要更改颜色,请使用颜色滑块在下面。

颜色滑块

色相滑块允许您选择色相的颜色,你想使用的颜色光谱。然后,你可以选择正确的色调使用颜色平面以上。

不透明度滑块

不透明度滑块允许您指定颜色的透明度级别。100%将使颜色完全不透明,任何低于该值将使颜色透明。当在图像上添加颜色叠加或创建透明背景时,这是很有用的。

在适当的输入字段中键入值

如果你想在选择颜色时更精确,你可以使用网页颜色名称,十六进制代码,HSB/HSBA值,或RGB/RGBA值。的任何颜色字段中都可以粘贴这些值十六进制输入字段在颜色选择器中。或者,你也可以将代码分解并在其各自的字段中输入每个值:

  • 中的十六进制值十六进制字段
  • 中分解的HSBA值H S B和A场
  • RGBA的价值,分解,在R G B和A场

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

十六进制输入字段

此输入字段支持所有网页颜色格式。因此,您可以键入或输入任何HTML颜色值。所有的值都将被转换为HEX。

了解更多关于HEX代码和网页颜色格式

HSB和RGB输入

在HEX输入字段的旁边,你会注意到3个标记为“H S B”的输入字段。如果你点击标签,它会切换到“R G B”。您可以再次单击标签切换回去。

" H "代表色调,你会注意到当你改变颜色使用颜色滑块,标记为“H”的字段中的值也会发生变化。“S”代表饱和度,“B”代表亮度。中移动选择器时,这些值将被更新颜色平面.如果知道想要使用的颜色的HSB值,则可以在适当的字段中输入这些值。

如果你知道你的颜色的RGB值,点击HSB标签并输入红色“R”,绿色“G”和蓝色“B”的值。这些字段也将自动显示正确的值,无论您使用什么工具来选择颜色。

“A”或Alpha输入字段

“A”代表alpha通道。alpha通道决定了颜色的透明度。该值受不透明度滑块.Alpha值可以是0到100%之间的任何值。如果你知道颜色的alpha值,将其乘以100并在输入框中输入。

了解更多

创建色板

选择颜色后,可以将其保存为样本,以便在整个项目中重用。

保存你的swatch:

  1. 打开颜色选择器
  2. 选择你的颜色
  3. 点击“+图标在颜色选择器的左下角添加你的颜色作为一个新的色板
  4. 给你的样本一个的名字(或使用出现的默认名称)
  5. 新闻创建保存您的swatch
您可以创建希望在整个项目中重用的颜色色板。打开颜色选择器,选择您的颜色,单击加号图标,给您的swatch一个名称,并按创建保存您的swatch。

swatch的强大之处在于你可以在未来更新swatch的颜色,并立即改变所有使用你正在更新的swatch的元素的颜色。这是在整个项目中保持颜色一致性的好方法,快速且容易。

编辑色板的颜色:

  1. 打开颜色选择器然后单击要编辑的样本
  2. 点击“铅笔图标
  3. 选择你的新颜色
  4. 重命名如果你喜欢的话,就用样品吧
  5. 新闻保存
您可以编辑色板颜色以在整个项目中更新该颜色。打开颜色选择器,单击要编辑的swatch,单击铅笔图标,选择新颜色,重命名swatch,然后按Save。

如果你有一个元素,它的颜色使用了一个swatch,你总是可以选择从swatch断开颜色的链接。如果您计划在未来编辑色板颜色,但不希望它影响特定的元素,这可能是有用的。

把颜色从色块中去掉:

  1. 选择元素你想从色板上去掉谁的颜色
  2. 打开颜色选择器
  3. 点击“拆开图标

颜色只显示其HEX值,对原始色板颜色的任何更改都不会影响未链接的元素。

要从色板中断开链接,请选择要断开链接的元素显示颜色,打开颜色选择器,然后单击“断开链接”图标。


尝试Webflow——它是免费的
Baidu
map