LJ Color Picker plugin for Craft CMS 3.x

A simple color picker for Craft CMS based on the jQuery Spectrum plugin.

Requirements

This plugin requires Craft CMS 3.0.0 or later.

Installation

You can install the plugin via the Craft Plugin Store.

Overview

This plugin adds the following fieldtype:

LJ Color Picker

Screenshot

Screenshot

Quick start

The default behaviour is to display a mini-picker that shows the currently selected color. For example:

Screenshot

Clicking on the mini-picker shows the full interface.

Alternatively, you can embed the full interface directly into the page with flat: true.

Examples

Copy one of the following examples into the Parameters field above.

Simple example

Screenshot

allowEmpty: true,
preferredFormat: "hex",
showButtons: false

Show input

Screenshot

allowEmpty: true,
preferredFormat: "hex",
showButtons: false,
showInput: true

Show alpha

Screenshot

allowEmpty: true,
preferredFormat: "rgb",
showButtons: false,
showInput: true,
showAlpha: true

Show palette

Screenshot

allowEmpty: true,
showButtons: false,
showPalette: true,
palette: [
    ['black', 'white', 'blanchedalmond'],
    ['rgb(255, 128, 0);', 'hsv 100 70 50', 'lightyellow']
]

Show palette only

Screenshot

showPaletteOnly: true,
showPalette:true,
palette: [
    ['black', 'white', 'blanchedalmond',
    'rgb(255, 128, 0);', 'hsv 100 70 50'],
    ['red', 'yellow', 'green', 'blue', 'violet']
]

Twig logic

Screenshot

{% 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 }}

Params in an external file

(relative to /templates folder)

{% include '_colorPickerParams.json' ignore missing %}

More examples

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.

LJ Color Picker

Version 1.0.2

Added

Version 1.0.1

Added

Version 1.0.0

Added