☁️ Loving our new documentation website? Provide feedback in the CloudCannon Community! ✨

Developer ReferenceConfiguration File

palette

Table of contents

Description:

This key defines a predefined color palette for Color Inputs.

The value is an array of color strings. Each string can be a hex code (e.g., #ff0000), CSS color name, or other valid color format.

When a palette is configured, users can select colors from the palette in addition to using the color picker (unless hide_picker is set to true).

Appears in:
└── _inputs
    └── *
        └── Color Input
            └── options
                └── palette
Type:
Array<palette[*]>
Items:
[*]string#

This key represents an individual color string in the _inputs.*.(color-input).options.palette array.

The value is a string that specifies a color in the predefined palette for Color Inputs. Each string can be a hex code (e.g., #ff0000), CSS color name, or other valid color format.

Show examplesHide examples

In this example, we have configured a color input with a palette containing a hex code color value.

Copied to clipboard
_inputs:
  primary_color:
    type: color
    label: Primary Color
    options:
      palette:
        - '#ff0000'
{
  "_inputs": {
    "primary_color": {
      "type": "color",
      "label": "Primary Color",
      "options": {
        "palette": [
          "#ff0000"
        ]
      }
    }
  }
}

In this example, we have configured a color input with a palette containing a CSS color name.

Copied to clipboard
_inputs:
  accent_color:
    type: color
    label: Accent Color
    options:
      palette:
        - red
{
  "_inputs": {
    "accent_color": {
      "type": "color",
      "label": "Accent Color",
      "options": {
        "palette": [
          "red"
        ]
      }
    }
  }
}
Examples:

In this example, we have configured a color input with a palette of brand colors for quick selection.

Copied to clipboard
_inputs:
  primary_color:
    type: color
    label: Primary Color
    options:
      palette:
        - '#ff0000'
        - '#00ff00'
        - '#0000ff'
        - '#ffff00'
{
  "_inputs": {
    "primary_color": {
      "type": "color",
      "label": "Primary Color",
      "options": {
        "palette": [
          "#ff0000",
          "#00ff00",
          "#0000ff",
          "#ffff00"
        ]
      }
    }
  }
}

In this example, we have configured a color input with a palette using CSS color names.

Copied to clipboard
_inputs:
  accent_color:
    type: color
    label: Accent Color
    options:
      palette:
        - red
        - blue
        - green
        - yellow
{
  "_inputs": {
    "accent_color": {
      "type": "color",
      "label": "Accent Color",
      "options": {
        "palette": [
          "red",
          "blue",
          "green",
          "yellow"
        ]
      }
    }
  }
}
Open in a new tab