How do I add a color field to a Webflow Collection?

Add a Color field in Collection settings

A color field stores one color on each Collection item. Webflow describes it as a unique color you can apply as text color, background color, or border color. It is data on the item. It is not a class, and it is not a swatch in the Variables panel.

Open the CMS panel, hover the Collection, and click the Settings icon. Under custom fields, click Add Field, or click Add New Field, and choose Color. Name it for the job, such as Label color. Help text can tell an editor what the color is for. You can mark the field required if every item must have one.

Name and Slug already exist on every Collection. The color field is an extra. Webflow says a schema change needs a full site publish before the live site reflects it. Plan that publish after the field exists and at least one item has a color.

Example: a Categories Collection has a Label color field. Announcements uses one color. Guides uses another. The card layout stays one class. Only the label color changes with the item.

Set the color on each item

Open a Collection item. The fields you added are there for that item's data. Set Label color on this item, then save. Repeat for the items that should look different. An item with no color has nothing for the list to read until you set one or hide the element that expects it.

Help text is the note under the label. It does not pick the color for you. If you marked the field required, set a color on each item you plan to publish.

This is different from a variable. A color variable stores one value and updates every style linked to it. A color field can be a different value on every item. Use a variable when the brand blue should change everywhere from one edit. Use a color field when each category, author, or event carries its own color.

Connect the color inside the Collection list

Add a Collection list and set its source to the Collection. Elements you place in the Collection item stay the same on every row until you connect them. Webflow marks a connected element with a purple icon in the Navigator.

Select the element that should take the color, such as a label or the card itself. Open Settings, then Dynamic style settings. Check the style you want. Webflow's example is getting the text color from a field. Choose the color field. The same settings can take a background color or a border color. Webflow also lets an image field supply a background image from this area. A color field is the color. An image field is the picture.

To remove the connection, select the element, open Settings, click the field name, and click Disconnect property. The element goes back to the style on its class.

Example: the category name is a text element. Dynamic style settings gets its text color from Label color. The card background stays the class color, unless you also connect a background color.

Let the class keep the shared layout

Webflow says a style you apply to an element in a Collection list applies to every item, whether or not the element is dynamic. If you raise the font size on the label, every label grows. The color field does not do that. It only feeds the property you checked.

Set type size, spacing, and radius on the class. Leave the per-item difference to the color field. If one category needs a different layout, that is a class or a combo class, not a second color field.

You can filter or show and hide elements from other field types when a color is missing and the design looks unfinished. A conditional belongs on an element inside the list or on a Collection page. A filter decides which items appear. The conditional visibility guide covers the show and hide rule. Use it when an empty color should remove a swatch. Keep the text either way.

Publish the schema, then check two items

Publish the whole site after you add the field, so the schema change is live. Publish the items that have colors. Open the list and compare two categories. The labels should use the colors you set. The type size should match.

If every label is the same color, Dynamic style settings is still unchecked, or it points at the wrong field. If the live list has no color field at all, the full site publish may not have happened after the schema edit. If one item is wrong, open that item and correct its color, then publish the item again.

A color field that is already connected cannot be deleted until those connections are gone. Webflow's collection fields article says to open the field, use View field connections, and disconnect each use. Also check the Collection page settings for SEO, Open Graph, RSS, site search, and custom code. Back up the site before you disconnect a field that is already in the design.

If you would rather send the color with the item name, I can set the field from that note. The membership is one plan for every existing Webflow site: $999 per month, including 10 hours of Webflow work. Your Webflow subscription and hosting stay in your own account.