回到所有的课程
课程库

使用色板保持颜色一致

添加可重复使用的色板来定义站点范围内的颜色,并保持您的设计一致。

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

色彩是设计中一个令人难以置信的引人注目和强大的方面——调色板形成了你的网站和品牌的视觉标识,甚至可以影响网站访问者的情绪或促使他们采取某些行动。可重复使用的色板提供了一种方便而有效的方法来定义站点的调色板,并使整个站点的设计保持一致。

在这节课中,你将学到:

  1. 如何创建一个样本
  2. 如何重用一个样本
  3. 如何更新一个样本
  4. 如何断开一个样本

如何创建一个样本

很高兴知道:你可以创建一个样本任何颜色属性(例如,背景、排版、轮廓或边框)。

为了在整个网站中重用颜色,你首先需要创建一个swatch:

  1. 元素中添加一个元素Webflow帆布(或选择任何现有元素)
  2. 打开风格的面板然后向下滚动到背景部分
  3. 点击元素的色卡打开颜色选择器选择一种颜色
  4. 点击“+图标的底部颜色选择器
  5. 给你的swatch一个名字,然后点击创建
专家提示:使用颜色对比检查颜色选择器确保你的颜色组合是可理解和易读的。了解更多关于颜色对比度的信息
Webflow设计器的样式面板中的颜色选择器,选择背景颜色
样式面板的背景部分。当单击时,颜色样本图标将高亮显示以打开颜色选择器
样式面板中的颜色选择器,创建一个名为“Blue”的新swatch

如何重用一个样本

现在你已经创建了一个swatch,你可以在你的网站中重复使用它:

  1. 选择一个元素来使用色板颜色(例如,Div块)
  2. 打开风格的面板并滚动到包含您想要更改的颜色属性的部分(例如,背景、排版或边框)
  3. 打开颜色选择器选择你的色块
专家提示:不要忘记向元素中添加类,以保持样式有组织和可重用。了解关于使用类跨元素保存样式信息的更多信息

如何更新一个样本

将来,您可能希望更改色板的颜色,以便在整个站点中更新该颜色。更新一个样本:

  1. 选择任何使用swatch的元素
  2. 打开风格的面板并滚动到包含使用swatch的颜色属性的部分(例如,背景、版式或边框)
  3. 打开颜色选择器,选择swatch,然后点击“铅笔的图标
  4. 更改颜色并单击保存
Burnaby Bouquets Webflow网站在标题、边框和按钮上使用了霓虹绿色色块。打开“编辑swatch”菜单以更新该swatch的颜色。
色块已经从霓虹绿更新为鲜艳的紫色,网站上所有的标题、边框和按钮都反映了这一变化。

如何断开一个样本

假设您想要更改使用swatch的元素的颜色,而不影响共享swatch的其他元素。你可以将swatch从元素中分离出来,独立地改变它的颜色:

  1. 选择要更改的元素
  2. 打开风格的面板并滚动到使用swatch的部分(例如,背景,排版,或边框)。
  3. 打开颜色选择器,选择swatch,然后点击“拆开的图标
样式面板中的颜色选择器,选中“蓝色”样本。“unlink”图标被高亮显示,以从所选元素中解除swatch的链接。

了解关于颜色选择器的更多信息,查看我们的初学者指南,使用颜色理论来创建有影响力的设计

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