The color field is a visual color picker. This field is used for content values that handle the rendering of color. Can be saved as RGB or hex value.

There are two types of color widgets, "sketch" or "block". The "sketch" widget allows the editor to pick a color from the familiar picker seen below.

The "block" widget allows the editor to choose from a set of predefined color swatches.

Options

interface ColorConfig {
  component: 'color'
  name: string
  label?: string
  description?: string
  colorFormat?: 'hex' | 'rgb' // Defaults to "hex"
  colors?: string[]
  widget?: 'sketch' | 'block' // Defaults to "sketch"
}

This interfaces only shows the keys unique to the color field. Visit the Field Config docs for a complete list of options.

Definition

const BlogPostForm = {
  fields: [
    {
      type: 'string',
      name: 'rawFrontmatter.background_color',
      label: 'Background Color',
      description: 'Edit the page background color here',
      ui: {
        component: 'color',
        colorFormat: 'hex',
        colors: ['#EC4815', '#241748', '#B4F4E0', '#E6FAF8'],
        widget: 'sketch',
      },
    },
    // ...
  ],
}