Use Data Models to create a color palette or swatches for your content

[logan]

If you have a few universal colors for your content, it’s handy to have them saved in Builder so you can easily find and select them.

1. Create a Data Model at Builder.io: Drag and drop page builder and CMS and give it a name, like “Palette”.

2. Create new inputs for each color you’d like to add to the palette. Click “+ New Field” and give the input a good color name and set the “Type” to color. Save your changes to the model.

3. Head to Builder.io: Drag and drop page builder and CMS and create a new Palette entry.

4. Click each swatch to set a color value, then give the palette a name in the top left. Publish the palette.

5. Next, open a page or section model where you’d like to import the palette. Navigate to the Data tab and click the Builder icon under “Connect data from popular sources”. Select the Palette model. Choose “Select an Entry” in the Data tab, then click the name of the palette you’d like to use.

6. You can now use the data binding UI to bind styles to the main colors. Select an element on your page and navigate to the Style tab. Under Background > Fill Color or Typography > Text Color, click the down arrow next to the input box. Choose “Binding”, then “Get this value from”. Select the color swatch you’d like to apply.

[balleverte]

I created a Palette model, but the buttons for the color-picker are invisible:

They are on the page and interactive:

If I hadn’t watched this video, I wouldn’t have ever seen them. This can easily be fixed by giving the field a default value of something other than white.

[logan]

Thanks, @balleverte!

I think this will be solved by adding an outline to the color swatch so that you can see that its default is white.

I’ve asked my team to update!