new course
CSS grid landing page tutorial (36min)

Lesson info

Lesson info

The color field is a CMS field used in Collections. It 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.

Explore this project

Want to dig into the project featured in this video and see how everything is put together? We've included the full project we used when making this lesson, and we've shared the link right under this very paragraph.

View and clone this projectDownload lesson assets
Clone this projectDownload project assets


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.