学习如何选择颜色和使用颜色选择器创建色板。
为字体、背景、边框等选择颜色是设计网站时最常见的操作之一。颜色选择器有不同的工具,允许您:
你可以通过以下方式选择颜色:
您可以直接从Webflow中的颜色选择器中检查站点上文本的对比度,它不仅显示文本的对比度,还显示与该对比度对应的WCAG级别评级。
对比度影响网站的可访问性。充分的对比度取决于前景(你的文本)和背景颜色(文本出现的背景)、字体大小和字体重量。
您还可以切换颜色选择器的对比度区域中的“眼睛”图标,以查看WCAG上AA、AAA和失败评级之间的曲线。
要从画布上或当前浏览器窗口外的任何元素中选择颜色,请使用滴管工具。
点眼药器
滴管工具是一种很好的方法,可以从画布上的任何地方或当前浏览器窗口之外拉出精确的颜色。因此,如果您想从图像、页面上的现有类或计算机上的另一个应用程序中的图形中提取颜色,您可以使用这个工具。
要从光谱中选择一种颜色,请使用颜色滑块要选择色调,请使用颜色平面选择合适的颜色。如果你想让颜色不那么不透明,使用不透明度滑块.
颜色平面允许你选择你想要使用的颜色的深浅。你可以沿着x轴移动拾取器来调整颜色的饱和度,沿着y轴来调整亮度。要更改颜色,请使用颜色滑块在下面。
色相滑块允许您选择色相的颜色,你想使用的颜色光谱。然后,你可以选择正确的色调使用颜色平面以上。
不透明度滑块允许您指定颜色的透明度级别。100%将使颜色完全不透明,任何低于该值将使颜色透明。当在图像上添加颜色叠加或创建透明背景时,这是很有用的。
如果你想在选择颜色时更精确,你可以使用网页颜色名称,十六进制代码,HSB/HSBA值,或RGB/RGBA值。的任何颜色字段中都可以粘贴这些值十六进制输入字段在颜色选择器中。或者,你也可以将代码分解并在其各自的字段中输入每个值:
您可以通过单击标签在HSB和RGB之间切换。
此输入字段支持所有网页颜色格式。因此,您可以键入或输入任何HTML颜色值。所有的值都将被转换为HEX。
在HEX输入字段的旁边,你会注意到3个标记为“H S B”的输入字段。如果你点击标签,它会切换到“R G B”。您可以再次单击标签切换回去。
" H "代表色调,你会注意到当你改变颜色使用颜色滑块,标记为“H”的字段中的值也会发生变化。“S”代表饱和度,“B”代表亮度。中移动选择器时,这些值将被更新颜色平面.如果知道想要使用的颜色的HSB值,则可以在适当的字段中输入这些值。
如果你知道你的颜色的RGB值,点击HSB标签并输入红色“R”,绿色“G”和蓝色“B”的值。这些字段也将自动显示正确的值,无论您使用什么工具来选择颜色。
“A”代表alpha通道。alpha通道决定了颜色的透明度。该值受不透明度滑块.Alpha值可以是0到100%之间的任何值。如果你知道颜色的alpha值,将其乘以100并在输入框中输入。
选择颜色后,可以将其保存为样本,以便在整个项目中重用。
保存你的swatch:
swatch的强大之处在于你可以在未来更新swatch的颜色,并立即改变所有使用你正在更新的swatch的元素的颜色。这是在整个项目中保持颜色一致性的好方法,快速且容易。
编辑色板的颜色:
如果你有一个元素,它的颜色使用了一个swatch,你总是可以选择从swatch断开颜色的链接。如果您计划在未来编辑色板颜色,但不希望它影响特定的元素,这可能是有用的。
把颜色从色块中去掉:
颜色只显示其HEX值,对原始色板颜色的任何更改都不会影响未链接的元素。
提交表单时出错了。请联系support@www.raktarban.com