Working with a specific static site generator?
Customize CloudCannon's documentation to suit your SSG.
Great! We'll show you documentation relevant to .
You can change this any time using the dropdown in the navigation bar.
Color picker input with spectrum and transparency controls for editing color values in your data.
Color inputs are shown for inputs configured with the type color, or for input keys matching:
color*_colorcolour*_colourrgb*_rgbrgba*_rgbahex*_hexhsv*_hsvhsva*_hsvahsl*_hslhsla*_hsla
Each variation specified by the matching pattern in its key defines the preferred format of the color. The color and colour variations default to hex.
Variations ending in a have an additional transparency control.
brand_color: '#f05f40'
{
"brand_color": "#f05f40"
}brand_color = "#f05f40"
top_gradient_stop: '#f05f40'
_inputs:
top_gradient_stop:
type: color
{
"top_gradient_stop": "#f05f40",
"_inputs": {
"top_gradient_stop": {
"type": "color"
}
}
}top_gradient_stop = "#f05f40"
[_inputs.top_gradient_stop]
type = "color"
Options#
Color inputs are configured with options inside an _inputs entry.
top_gradient_stop: '#f05f40'
_inputs:
top_gradient_stop:
type: color
options:
format: rgb
alpha: true
{
"top_gradient_stop": "#f05f40",
"_inputs": {
"top_gradient_stop": {
"type": "color",
"options": {
"format": "rgb",
"alpha": true
}
}
}
}top_gradient_stop = "#f05f40"
[_inputs.top_gradient_stop]
type = "color"
[_inputs.top_gradient_stop.options]
format = "rgb"
alpha = true
Color inputs have the following options available:
Sets what format the color value is saved as. Optional, defaults to the naming convention, then hex if that is unset. Must be rgb, hex, hsl or hsv.
Alternatively, you can configure format with the naming convention as well. If an input key ends with a valid format (and optionally alpha), it is used (e.g. the input keys rgba or my_rgb result in format rgb).
Toggles showing a control for adjusting the transparency of the selected color. Optional, defaults to using the naming convention.
Alternatively, you can configure alpha with the naming convention as well. alpha is set to true if the input key ends with a.
Set how an ‘empty’ value will be saved. Does not apply to existing empty values. Can be one of the following:
string- an empty value for this input will be stored as"".null- an empty value for this input will be stored as a null value (default). This does not apply to TOML files.
Valid values#
Documented below are the valid formats for color inputs.
The lists of examples are non-exhaustive.
-
Hex colours with an alpha value will be converted to
rgba. -
Colors will be converted to the specified
formatinput option when loaded into the Data Editor -
Quotes will be stripped from non-hex colors when loaded into the Data Editor
Empty/null value:
color:
Any valid CSS color name (quoted or unquoted):
color: bluecolor: "blue"
Quoted hexadecimal color (case insensitive):
color: "#034AD8"color: "#034ad8"color: "#034AD8FF"
RGB and RGBA (quoted or unquoted):
color: rgb(3, 74, 216)color: "rgb(3, 74, 216)"color: rgba(3, 74, 216, 0.5)color: "rgba(3, 74, 216, 0.5)"
HSL and HSLA (quoted or unquoted):
color: hsl(220, 97.3, 42.9)color: "hsl(220, 97.3, 42.9)"color: hsla(220, 97.3, 42.9, 0.5)color: "hsla(220, 97.3, 42.9, 0.5)"
HSV and HSVA (quoted or unquoted):
color: hsv(220, 98.6, 84.7)color: "hsv(220, 98.6, 84.7)"color: hsva(220, 98.6, 84.7, 0.5)color: "hsva(220, 98.6, 84.7, 0.5)"
Any valid CSS color name:
color = "blue"
Hexadecimal color (case insensitive):
color = "#034AD8"color = "#034ad8"color = "#034AD8FF"
RGB and RGBA:
color = "rgb(3, 74, 216)"color = "rgba(3, 74, 216, 0.5)"
HSL and HSLA:
color = "hsl(220, 97.3, 42.9)"color = "hsla(220, 97.3, 42.9, 0.5)"
HSV and HSVA:
color = "hsv(220, 98.6, 84.7)"color = "hsva(220, 98.6, 84.7, 0.5)"
Empty/null value:
"color": null
Any valid CSS color name:
"color": "blue"
Hexadecimal color (case insensitive):
"color": "#034AD8""color": "#034ad8""color": "#034AD8FF"
RGB and RGBA:
"color": "rgb(3, 74, 216)""color": "rgba(3, 74, 216, 0.5)"
HSL and HSLA:
"color": "hsl(220, 97.3, 42.9)""color": "hsla(220, 97.3, 42.9, 0.5)"
HSV and HSVA:
"color": "hsv(220, 98.6, 84.7)""color": "hsva(220, 98.6, 84.7, 0.5)"