The color field is a Collection field that allows you and your Collaborators to specify a color for each Collection item using a color picker.
Color is one of the most versatile fields on the planet. And it's not because you have over a billion options when you include color and opacity; it's because you can use this field for almost anything.
When you set a color in a collection item, we can pull that color in our project.
See this text? We can get the text color straight from our collection. Just select a color field, and that's it.
See this button? We can set its background color. Same method here. Pulls right from each collection item.
And the border color on all these different Collection Item buttons? That's just as simple: we can do the same exact thing border color. Oh look, they're unique and amazing.
With the color field, we can set a color on an item and use that color anywhere in a project.
The color field is a Collection field that allows you and your collaborators to specify a color for each collection item using a color picker. This color can be used to style the background color, text color, and border color of elements within a Collection List or a Collection Page.
A color field can be added to a new or existing Collection. In Collection settings, click on New Field and then choose the Color field.
Now that the color field is part of your Collection structure, you and Collaborators can specify a color in the Color field of any Collection item by typing in a web color (hex, RGBA, or color name), or use the color picker to choose a color.
When you set a color for a Collection item, you can pull that color into your design. Each element in your Collection List or Collection Page will pull the color value specified for each Collection item.
You can connect color values to your elements in a Collection List or a Collection Page through the Collection Style Settings in the Settings Panel (D). You can select one or more of these options:
You can remove the connection any of these settings by unchecking the option checkbox.
If you want to set the text color of an element using the color value specified in the color field of a Collection:
Any font color styling set on this element in the Styles Panel will be overwritten with the color field value when this setting is checked.
You can set the background color of an element in the same way:
Any background color styling set on this element in the Styles Panel will be dynamically overwritten with the color field value when this setting is checked for this element.
To pull the border color of an element from a Collection, you need to first set a Border for your element:
At any time, you can change the style and width of the border in the Styles Panel. However, the color will be pulled from the connected color field and it will override any color value specified in the Styles Panel.
Something went wrong while submitting the form. Please contact support@webflow.com
Got a lesson suggestion? Let us know
Need more help? Want to report a bug? Contact support
Have feedback on the feature? Submit feature feedback