Color
Last updated
A color field in the Page Builder.
The color field allows content writers to select a color. The field is displayed as a color picker in the Page Builder.
The color is saved as a hex value, like #FFFFFF.
Color field values can be used anywhere hex color values are supported.
<span style={{ color: slice.primary.text_color }}>Hello!</span>Add a color field to a content model
Color fields are added using the Type Builder, a tool for building by hand, or the Prismic CLI, a tool for AI agents.
Watch for changes
In your local website project, start the Prismic CLI’s
synccommand. The CLI will watch for changes in the Type Builder and pull them into your project.npx prismic sync --watchAdd a color field
In the Type Builder, navigate to the slice, page type, or custom type you want to modify. Add a color field and provide the following:
- Label: The label shown to content writers in the Page Builder. Use an easily understandable name.
- API ID: The property name in the Content API. Use a short, snake-cased name.
You can now close the Prismic CLI
synccommand or add your next field.
Add a color field
Use the
prismic field add colorcommand to add a color field to a slice.npx prismic field add color text_color --to-slice MySliceUse
--to-typeto add the field to a page type or custom type instead.npx prismic field add color text_color --to-type page
Open Slice Machine
In your Prismic project, start Slice Machine to begin editing content models.
npx start-slicemachine --openAdd a color field
In Slice Machine, navigate to the slice, page type, or custom type you want to modify. Add a color field.
The label determines the label shown to content writers in the Page Builder. Use an easily understandable name.
The API ID determines the property name in the Content API. Use a short, snake-cased name.
Use color fields
Color fields can be used anywhere hex color values are supported.
In this example, the text_color field determines the <span>’s color.
<span style={{ color: slice.primary.text_color }}>Hello!</span>Check if a color field has a value
Use isFilled.color() from @prismicio/client to check if a color field has a value.
import { isFilled } from "@prismicio/client";
if (isFilled.color(slice.primary.my_color_field)) {
// Do something if `my_color_field` has a value.
}Learn more about isFilled
API response
Here is what a color field looks like from the Content API:
{
"example_color": "#5B295F"
}