Skip to main content
  {
    "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 typeAvailabilityAdditional 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 environment
​
required
boolean
Creator-facing identifier that is shown in the plugin environment
​
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:
  • p
  • h1
  • h2
  • h3
  • h4
  • h5
  • h6
  • ol
  • ul
  • blockquote
  • a
  • “color”,
  • “font-family”,
  • “font-size”,
  • “font-weight”,
  • “letter-spacing”,
  • “line-height”,
  • “text-align”,
  • “text-transform”,
  • “margin-top”,
  • “margin-right”,
  • “margin-bottom”,
  • “margin-left”,
  • “padding-top”,
  • “padding-right”,
  • “padding-bottom”,
  • “padding-left”
  {
    "settings": {
        "postId": "default-to-generosity-id-123",
        "favoriteColor": "#ff0000"
    },
    "styles": {
        "p": {
            "color": "rgb(45, 45, 47)",
            "font-family": "Charter, Georgia, Times, \"Times New Roman\", serif",
            "font-size": "18px",
            "font-weight": "400",
            "letter-spacing": "normal",
            "line-height": "27px",
            "text-align": "start",
            "text-transform": "none",
            "margin-top": "18px",
            "margin-right": "0px",
            "margin-bottom": "18px",
            "margin-left": "0px",
            "padding-top": "0px",
            "padding-right": "0px",
            "padding-bottom": "0px",
            "padding-left": "0px"
        },
        "h1": {
            "color": "rgb(0, 0, 0)",
            "font-family": "-apple-system, \"system-ui\", \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif",
            "font-size": "28px",
            "font-weight": "700",
            "letter-spacing": "normal",
            "line-height": "42px",
            "text-align": "start",
            "text-transform": "none",
            "margin-top": "0px",
            "margin-right": "0px",
            "margin-bottom": "0px",
            "margin-left": "0px",
            "padding-top": "0px",
            "padding-right": "0px",
            "padding-bottom": "0px",
            "padding-left": "0px"
        },
        "h2": {
            "color": "rgb(0, 0, 0)",
            "font-family": "-apple-system, \"system-ui\", \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif",
            "font-size": "21px",
            "font-weight": "700",
            "letter-spacing": "normal",
            "line-height": "31.5px",
            "text-align": "start",
            "text-transform": "none",
            "margin-top": "21px",
            "margin-right": "0px",
            "margin-bottom": "21px",
            "margin-left": "0px",
            "padding-top": "0px",
            "padding-right": "0px",
            "padding-bottom": "0px",
            "padding-left": "0px"
        },
        "h3": {
            "color": "rgb(0, 0, 0)",
            "font-family": "-apple-system, \"system-ui\", \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif",
            "font-size": "16.38px",
            "font-weight": "700",
            "letter-spacing": "normal",
            "line-height": "24.57px",
            "text-align": "start",
            "text-transform": "none",
            "margin-top": "16.38px",
            "margin-right": "0px",
            "margin-bottom": "16.38px",
            "margin-left": "0px",
            "padding-top": "0px",
            "padding-right": "0px",
            "padding-bottom": "0px",
            "padding-left": "0px"
        },
        "h4": {
            "color": "rgb(0, 0, 0)",
            "font-family": "-apple-system, \"system-ui\", \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif",
            "font-size": "14px",
            "font-weight": "700",
            "letter-spacing": "normal",
            "line-height": "21px",
            "text-align": "start",
            "text-transform": "none",
            "margin-top": "0px",
            "margin-right": "0px",
            "margin-bottom": "0px",
            "margin-left": "0px",
            "padding-top": "0px",
            "padding-right": "0px",
            "padding-bottom": "0px",
            "padding-left": "0px"
        },
        "h5": {
            "color": "rgb(0, 0, 0)",
            "font-family": "-apple-system, \"system-ui\", \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif",
            "font-size": "14px",
            "font-weight": "700",
            "letter-spacing": "normal",
            "line-height": "15.4px",
            "text-align": "start",
            "text-transform": "none",
            "margin-top": "0px",
            "margin-right": "0px",
            "margin-bottom": "0px",
            "margin-left": "0px",
            "padding-top": "0px",
            "padding-right": "0px",
            "padding-bottom": "0px",
            "padding-left": "0px"
        },
        "h6": {
            "color": "rgb(0, 0, 0)",
            "font-family": "-apple-system, \"system-ui\", \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif",
            "font-size": "14px",
            "font-weight": "400",
            "letter-spacing": "normal",
            "line-height": "21px",
            "text-align": "start",
            "text-transform": "none",
            "margin-top": "0px",
            "margin-right": "0px",
            "margin-bottom": "0px",
            "margin-left": "0px",
            "padding-top": "0px",
            "padding-right": "0px",
            "padding-bottom": "0px",
            "padding-left": "0px"
        },
        "ol": {
            "color": "rgb(45, 45, 47)",
            "font-family": "Charter, Georgia, Times, \"Times New Roman\", serif",
            "font-size": "18px",
            "font-weight": "400",
            "letter-spacing": "normal",
            "line-height": "27px",
            "text-align": "start",
            "text-transform": "none",
            "margin-top": "18px",
            "margin-right": "0px",
            "margin-bottom": "18px",
            "margin-left": "18px",
            "padding-top": "0px",
            "padding-right": "0px",
            "padding-bottom": "0px",
            "padding-left": "0px"
        },
        "ul": {
            "color": "rgb(45, 45, 47)",
            "font-family": "Charter, Georgia, Times, \"Times New Roman\", serif",
            "font-size": "18px",
            "font-weight": "400",
            "letter-spacing": "normal",
            "line-height": "27px",
            "text-align": "start",
            "text-transform": "none",
            "margin-top": "18px",
            "margin-right": "0px",
            "margin-bottom": "18px",
            "margin-left": "18px",
            "padding-top": "0px",
            "padding-right": "0px",
            "padding-bottom": "0px",
            "padding-left": "0px"
        },
        "blockquote": {
            "color": "rgb(55, 63, 69)",
            "font-family": "\"open sans\", \"helvetica neue\", Helvetica, Arial, sans-serif",
            "font-size": "17.5px",
            "font-weight": "400",
            "letter-spacing": "normal",
            "line-height": "25px",
            "text-align": "start",
            "text-transform": "none",
            "margin-top": "17.5px",
            "margin-right": "0px",
            "margin-bottom": "17.5px",
            "margin-left": "0px",
            "padding-top": "10px",
            "padding-right": "20px",
            "padding-bottom": "10px",
            "padding-left": "20px"
        },
        "a": {
            "color": "rgb(32, 177, 150)",
            "font-family": "\"open sans\", \"helvetica neue\", Helvetica, Arial, sans-serif",
            "font-size": "14px",
            "font-weight": "400",
            "letter-spacing": "normal",
            "line-height": "20px",
            "text-align": "start",
            "text-transform": "none",
            "margin-top": "0px",
            "margin-right": "0px",
            "margin-bottom": "0px",
            "margin-left": "0px",
            "padding-top": "0px",
            "padding-right": "0px",
            "padding-bottom": "0px",
            "padding-left": "0px"
        }
    }
}

  {
    "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
  }
⌘I