Configure a Color input

A Color input is an editing interface for color information. By configuring your inputs, you can customize the appearance and functionality for a better editing experience.

These instructions assume that you know where in the configuration cascade you want to configure your input. For more information, please read our documentation on Color inputs, inputs in general, and the configuration cascade.

To configure a Color input:

1. Open your website files in your local development environment, or log in to CloudCannon and select the Site for which you want to configure your input.
2. Navigate to the location in the configuration cascade where you want to configure your input. This can be the root of your CloudCannon Configuration File, within the collections_config.* key in your CloudCannon Configuration File, a Schema file, a markup file, or any where you configure a Structure.
3. Identify the _inputs key, or create one at that level of the configuration cascade.
4. Add an input name key for your input under the _inputs key (a.k.a., _inputs.*). We recommend naming your input something simple that indicates the function or context.
5. Add the type key under your input name key, with the value color.
6. (Optional.) Add any other general configuration keys (e.g., label, comment, context) under your input name key.
7. (Optional.) Add any specific configuration keys under _inputs.*.options (e.g., format, alpha).

CloudCannon will now apply this input configuration to all markup files that use your input name key, without needing to save your configuration. This allows you to make changes to your input configuration and see those changes affect inputs live.

When you are happy with your input configuration, you must save your input configuration.

_inputs:
  gradient_stop:
    type: color

{
  "_inputs": {
    "gradient_stop": {
      "type": "color"
    }
  }
}

When you add your input key name to a data or markup file, your configured Color input will appear in the Data Editor, Visual Editor, or Content Editor.

---
gradient_stop: rgb(3, 74, 216)
---

Blog content goes here.

Input configuration options#

General configuration options are available for all input types. You can define the label, comment, and context box for your Color input, whether it is hidden or disabled, and how CloudCannon should handle configuration at multiple levels of the configuration cascade.

Specific configuration options for Color inputs include defining the format of a color value, enabling transparency controls, and how CloudCannon handles empty values. You can also add input validation to require a value, specify the minimum and maximum value length, or match a regular expression.

Here is an example of a Color input using some of the most commonly used configuration keys.

_inputs:
  background:
    type: color
    label: Background Color
    comment: Select the color for the background of this page.
    options:
      format: hex
      required: true
      pattern: ^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$
      pattern_message: Please enter a valid HEX format.

{
  "_inputs": {
    "background": {
      "type": "color",
      "label": "Background Color",
      "comment": "Select the color for the background of this page.",
      "options": {
        "format": "hex",
        "required": true,
        "pattern": "^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$",
        "pattern_message": "Please enter a valid HEX format."
      }
    }
  }
}

These keys configure the appearance and functionality of Color inputs in CloudCannon.

_inputs:
  author:
    type: text
    comment: Enter the name of the author for this blog post.
    options:
      required: true

{
  "_inputs": {
    "author": {
      "type": "text",
      "comment": "Enter the name of the author for this blog post.",
      "options": {
        "required": true
      }
    }
  }
}

_inputs:
  seo_description:
    type: markdown
    comment: Enter a brief description of this blog.
    options:
      max_length: 125
      min_length: 25

{
  "_inputs": {
    "seo_description": {
      "type": "markdown",
      "comment": "Enter a brief description of this blog.",
      "options": {
        "max_length": 125,
        "min_length": 25
      }
    }
  }
}

_inputs:
  seo_description:
    type: markdown
    comment: Enter a brief description of this blog.
    options:
      max_length: 125
      min_length: 25

{
  "_inputs": {
    "seo_description": {
      "type": "markdown",
      "comment": "Enter a brief description of this blog.",
      "options": {
        "max_length": 125,
        "min_length": 25
      }
    }
  }
}

_inputs:
  contact_email:
    type: email
    options:
      pattern: '[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}'
      pattern_message: Please use the format ___@___.__

{
  "_inputs": {
    "contact_email": {
      "type": "email",
      "options": {
        "pattern": "[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}",
        "pattern_message": "Please use the format ___@___.__"
      }
    }
  }
}

_inputs:
  contact_email:
    type: email
    options:
      pattern: '[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}'
      pattern_message: Please use the format ___@___.__

{
  "_inputs": {
    "contact_email": {
      "type": "email",
      "options": {
        "pattern": "[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}",
        "pattern_message": "Please use the format ___@___.__"
      }
    }
  }
}

Valid values#

Here are some examples of valid values for the key color.

Unconfigured Color inputs#

In some cases, CloudCannon can still detect a Color input even if you have not configured it.

CloudCannon will interpret any unconfigured input with the key name color, colour, rgb, rgba, hex, hsv, hsva, hsl, or hsla, or that ends in _color, _colour, _rgb, _rgba, _hex, _hsv, _hsva, _hsl, or _hsla, as a Color input. Key name variations ending with "a" will enable the alpha option automatically.

---
main_hex: "#034AD8"
---

Content goes here.

This behavior is convenient if you have simple inputs or do not want to configure inputs. It is also beneficial for new websites on CloudCannon where you have yet to create any CloudCannon-specific configuration.