{
    "type": "color",
    "name": "background_color",
    "label": "Background color",
    "required": true, // optional
    "help": "help text shown in tooltip to creator while editing", // optional
    "dependencies": [
      {
          "field": "dependent_field",
          "value": "dependent_value" //optional
      }
    ] // optional
  }

  {
    "settings": {
      "background_color": "#C8102E" 
      // ...additional plugin settings
    }
    // ...plugin-specific additional data
  }
The color picker allows creators to customize content to better reflect their branding and style. It is commonly used to allow the creator to change the color of backgrounds, buttons and text to better fit in with their email templates. example color picker

​
Compatibility

Plugin typeAvailablityAdditional notes
Content blocks
Media source

​
Properties

​
type
string
required
color - the type of the component
​
name
string
required
A unique internal-only identifier that is posted to an app’s plugin server to share values inputted by the creator
​
label
string
required
Creator-facing identifier that is shown in the plugin enviornment
​
required
boolean
Creator-facing identifier that is shown in the plugin enviornment
​
help
boolean
Brief creator-facing explanation that clarifies the component’s purpose and usage.
​
dependencies
object array
Allows for the field to be shown conditionally. dependent on other fields. See dependencies page for more details.

​
Best practices

​
Automatic styling

When using the color picker for content blocks, alongside the settings object, Kit also shares data on the styles used within the email template - allowing your plugin to assume the styling of the email automatically, to make it feel as native as possible. Details on the style data available can be found below: 
  {
    "type": "color",
    "name": "background_color",
    "label": "Background color",
    "required": true, // optional
    "help": "help text shown in tooltip to creator while editing", // optional
    "dependencies": [
      {
          "field": "dependent_field",
          "value": "dependent_value" //optional
      }
    ] // optional
  }

  {
    "settings": {
      "background_color": "#C8102E" 
      // ...additional plugin settings
    }
    // ...plugin-specific additional data
  }