What is a Color input?

Last modified: July 1st, 2025

A Color input is an editing interface for color information. You can use this input in the Data Editor, Content Editor, or Visual Editor to edit structured data in data files or front matter.

There is only one type of Color input:

  • Color

Color input types#

Color#

The Color input provides an editing interface for color values.

You can edit the value of a Color input by typing in the input text field.

A screenshot of the Color input in the Data Editor shows a HEX value in the text field.

Color input appearance and behavior#

You can customize the label, comment, documentation link, and context box for all inputs regardless of type.

A screenshot of the Color Input in the Data Editor with a Context Box underneath the text field.

Depending on how your developer configured the input, your Color input may have a different color format or color transparency controls.

A screenshot of the Color input in the Data Editor shows a RGBA value in the text field.

Input validation#

Your Color input may also have input validation, which requires the value to match predefined criteria before you can save your changes.

CloudCannon will show a red * next to the name of your Color input if a value is required.

A screenshot of the Color input in the Data Editor shows that no value is causing an input validation error.

If you enter a value under the minimum or over the maximum character count, CloudCannon will display an error message in red text under the input field.

A screenshot of the Color input in the Data Editor shows that the value does not meet maximum length requirements.

For more information on configuration options, valid input values, and unconfigured input behavior, please read our developer documentation on configuring a Color input .

Misconfigured Color inputs#

You will see an orange warning box if your Color input is misconfigured.

A screenshot of a misconfigured Color input in the Data Editor shows an orange warning box.

Color inputs are misconfigured if:

  • The value is not a string.

For more information on how to fix a misconfigured Color input, please read our developer documentation on configuring a Color input.

Open in a new tab