Streaming live at 10am (PST)

Color Swatches : more features and Global swatches


#1

I'd like the color palette to be like Sketchs' one.

  • ability to move the colors in the grid
  • global colors swatches, affect all user projects
  • document colors are the projects colors
  • global and document colors zones are collapsible

in the meantime, new projects could be created with a nice starter palette, a mix between trendy material design ones and some other usefull values:


New Feature: Color Swatches
Support for styling variables
Linked Colors - Updating same color theme across site
#2

I completely agree With Vince!


#3

What about a color swatch option like in adobe indesign? If you change a color, all the items that use the color change, too. I would love to see that happening in webflow. Designing would be super flexible and fast!


#4

That's actualy how CSS works... I don't think we'll see exactly what you ask for, binding the CSS styles with the color swatches would be somehow "magic" and Webflow tends to stick with HTML and CSS and avoid "magic".


#5

The CSS generated by webflow would stay exactly the same. Just as if you manually change all the colors on the page. Imagine only the Designer to work magically, not the site itself. Don't you think this is possible?

Also this would be possible implementing SASS or LESS.


#6

Oh it's totally possible! Technically. It may not be in Webflows' spirit, that's what I was saying. And it would raise a lot of potential issues: what to do when a color swatch is deleted, for example.

Nut I understand where you're going... as you can do with SASS, change a color that spans accross multiple classes. Like "Light Green". And you know, I'm in favor of this actually. Maybe not from the swatch box itself but another box, document palette or something like this... that would be quite cool to globally affect and fine tune colors, you're right.


#7

Why is that a problem? There would be a simple alert with two options. You could either reset the color to none or assign a new swatch. Sounds more than possible for me.

:blush:


#8

This would be pretty slick... ran into a situation recently where this would have been very helpful.


#9

You can make yourself a dashboard page where you lay out divs and text elements with the classes you use along the site. Then you can alter the colors—and every other property—in one place.

If you plan ahead your site work, it's easy to keep the colors in control, that's what CSS was made for.

There is no notion of palette or swatches in CSS. I feel that if Webflow bring such a functionality, it's breaking what makes the tool so good: sticking to CSS and avoiding "magic".

An automatic/assisted StyleGuide feature would be better than dynamic swatches.


#10

What if somehow there was something called a dynamic swatch that you could add where you could apply it to any style. This would be the way global styles would work, if webflow allowed that. Well actually, now that I think about it, you could simply create global styles with the correct color. Background color for example and apply it as combo classes to any element you want and then control that element's color from the global class. It obviously wouldn't work unless you knew which things would be color changed but you could create multiple global classes like bgcolor text color, outline color etc. and then just change them all from the globals.


#11

I was thinking it would be really great to have variable support in some fashion. A simple version of this would be the ability to set a color in the palette and change it, updating everything where that color has been assigned. Also being able to put a variable into any number input would be hugely helpful, even more so with math for creating flexible baselines, etc.

One thing I miss the most about hand coding is Sass, it was much easier to adjust entire design systems much more expressively, something I would love to see in Webflow!


#12

I agree that it would be great to have a brand colour swatch area for sure. It would allow someone to buy a template and change colours to match the business colours for example. Overall, you would only need a limited number of global swatches. This could work by setting these up at the site settings level, and having a small "Use global colour" option next to where you can currently select the colour for type, background, border etc for a CSS class.

So an early implementation phase would then simply add that global colour choice to the CSS class in the editor (just like if you had seleced a swatch colour now). Then if you update the global colours for the site, it finds everywhere where it's used in the CSS and changes all instances. (current hex code to new hex code)

Whilst you can be creative to set some colours more globally, the thought of having to go through a site and change all the various css classes where colour is used, would be annoying.

PS. I suppose another way is, if you could edit the CSS file itself that gets output, you could use a find and replace. Not perfect I know, but better than manually updating.


#13

@thesergie @callmevlad @PixelGeek @Waldo

Any plans to implement these global swatches? I read about the plans in a number of posts from 2-3 years ago, but am looking for a way to have global swatches for templates, so different users can change colors throughout the entire site to fit their needs.


#14

Yep this feature is in progress and should be released soon!


#15