A simple color picker for Craft CMS based on the jQuery Spectrum plugin.
This plugin requires Craft CMS 3.0.0 or later.
You can install the plugin via the Craft Plugin Store.
This plugin adds the following fieldtype:
The default behaviour is to display a mini-picker that shows the currently selected color. For example:
Clicking on the mini-picker shows the full interface.
Alternatively, you can embed the full interface directly into the page with flat: true
.
Copy one of the following examples into the Parameters field above.
allowEmpty: true,
preferredFormat: "hex",
showButtons: false
allowEmpty: true,
preferredFormat: "hex",
showButtons: false,
showInput: true
allowEmpty: true,
preferredFormat: "rgb",
showButtons: false,
showInput: true,
showAlpha: true
allowEmpty: true,
showButtons: false,
showPalette: true,
palette: [
['black', 'white', 'blanchedalmond'],
['rgb(255, 128, 0);', 'hsv 100 70 50', 'lightyellow']
]
showPaletteOnly: true,
showPalette:true,
palette: [
['black', 'white', 'blanchedalmond',
'rgb(255, 128, 0);', 'hsv 100 70 50'],
['red', 'yellow', 'green', 'blue', 'violet']
]
{% set colors = ['black', 'red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'] %}
{% set palette %}
[
{% for row in colors|batch(2) %}
{{ loop.index > 1 ? ',' }}
[
{% for color in row %}
{{ loop.index > 1 ? ',' }}
'{{ color }}'
{% endfor %}
]
{% endfor %}
]
{% endset %}
showPaletteOnly: true,
showPalette:true,
palette: {{ palette }}
(relative to /templates folder)
{% include '_colorPickerParams.json' ignore missing %}
See the original jQuery Spectrum plugin for more examples.
This plugin is based on the jQuery Spectrum plugin plugin [MIT licence], with thanks to the original developer.
Brought to you by Lewis Jenkins.