Color inputs

A Color input lets your team members store color information in your data files or the front matter of markup files. Color inputs have a color picker with spectrum and transparency controls for editing color values.

For each input, you can configure the format of the color value, enable transparency controls, and determine how CloudCannon handles empty values. You can also use the general configuration options available for all inputs.

Color#

The Color input provides an editing interface for color values.

You can configure a Color input using the type key with the value color. Define the type key under your input key name within _inputs. For more information, please read our documentation on configuring your inputs.

_inputs:
  gradient_stop:
    type: color

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

Once configured, the Color input will appear in the Data Editor or the Visual or Content Editor sidebar when you add it to a data file or the front matter of a markup file.

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

Blog content goes here.

Options#

You can configure Color inputs using the options key under your input key, inside of _inputs.

_inputs:
  background:
    type: color
    options:
      format: rgb
      alpha: true
      empty_type: 

{
  "_inputs": {
    "background": {
      "type": "color",
      "options": {
        "format": "rgb",
        "alpha": true,
        "empty_type": null
      }
    }
  }
}

Color inputs have the following options available:

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.

Valid values#

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