Announcements
|
Feb 17, 2017

New feature: Global swatches

Change a color in one place, watch it update across your whole site. Now possible in Webflow with global swatches.
The new global swatches make it faster and easier to create consistent, on-brand color schemes for your sites. And tons easier to update those color schemes when your client inevitably changes their mind.

Ever tweaked a color in your style guide or website and then had to update that color across 50 pages and 100 styles? Not fun.

But thanks to the newest Webflow feature — global swatches — that’s a thing of the past.

This new feature lets you define colors as global, so every instance of that color will update whenever you change it. It’s like Symbols, but for colors.

Editing a global swatch
‍See that text color changing alongside the color overlays? Magical, right?

You can still create regular swatches, but global swatches take us a step closer to variable, Sass- and LESS-inspired styling controls that will help you maintain more complex, multifaceted styling systems across their website.

Global swatches take us a step closer to variable, Sass- and LESS-inspired styling controls in Webflow.

Let’s take a look at how this feature works, then explore some of the many ways it can help you build and maintain your Webflow sites.

Creating a global swatch

To create a global swatch, choose the color you want to make global, then tick the “Global” checkbox.

Check "Global" when making a new swatch
Global swatches display a triangular shape in the lower right in the swatches panel.

Updating a global swatch

This one’s pretty simple. Open the global swatch in your color panel, click the settings gear, edit it, then confirm that you want to update the swatch across your site. We’ll even show you how many instances of the color will update.

Editing a global swatch
‍As you edit, you can see how many instances of that global swatch appear across your site.

Making a swatch instance non-global

To disconnect an instance of a global color from its swatch — so it won’t update next time you edit the global swatch — just reapply the color from the regular palette.

How can I use this?

These are far from the only ways to use global swatches, but they are some of the most powerful:

  • Updating and maintaining brand colors
  • Experimenting with color schemes during the design phase
  • Tweaking brand gradients across your site

How are you planning to use global swatches? Let us know in the comments!

Get our top web design content in your inbox
Just like over 500,000 other designers.

Thanks! Check your inbox to confirm your subscription.

Oops! Something went wrong while submitting the form

We hate spam just as much as you do.
Tai Huynh

Engineer/musician @webflowapp.

Related Articles
Tutorials
Jan 20, 2017
Webflow Bit #2: Sidebar navigation
See how quick and easy it is to build sidebar navigation in Webflow.
Inspiration
Jan 13, 2017
15 unique website layouts
We’ve sifted through many of the mundane to find examples of creative layouts that let their content shine.
Inspiration
Jan 6, 2017
22 web design inspiration resources you’ll love
Discover your new favorite sources of web, app, email, and content design inspiration!
What's Webflow?

It’s a web design tool, CMS, and hosting platform in one.

Trusted by design teams everywhere
Get our top web design content in your inbox
Just like over 500,000 other designers.

Thanks! Check your inbox to confirm your subscription.

Oops! Something went wrong while submitting the form

We hate spam just as much as you do.