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
*_color
colour
*_colour
rgb
*_rgb
rgba
*_rgba
hex
*_hex
hsv
*_hsv
hsva
*_hsva
hsl
*_hsl
hsla
*_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'
top_gradient_stop: '#f05f40'
_inputs:
top_gradient_stop:
type: color
Quote hex colors, otherwise the hash symbol begins a YAML comment.
brand_color = "#f05f40"
top_gradient_stop = "#f05f40"
[_inputs.top_gradient_stop]
type = "color"
{
"brand_color": "#f05f40"
}
{
"top_gradient_stop": "#f05f40",
"_inputs": {
"top_gradient_stop": {
"type": "color"
}
}
}
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"
[_inputs.top_gradient_stop.options]
format = "rgb"
alpha = true
{
"top_gradient_stop": "#f05f40",
"_inputs": {
"top_gradient_stop": {
"type": "color",
"options": {
"format": "rgb",
"alpha": true
}
}
}
}
Color inputs have the following options available:
format
- String
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
).
alpha
- Boolean
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
.
empty_type
- string
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.