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.
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.