Color

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

• Open Slice Machine

  In your Prismic project, start Slice Machine to begin editing content models.

  npx start-slicemachine --open

• Add 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 understood 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.
}

API response

Here is what a color field looks like from the Content API:

{
  "example_color": "#5B295F"
}