Skip to content
A simple color picker for Craft CMS.
PHP HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
resources/img
src
.gitignore
CHANGELOG.md
LICENSE.md
README.md
composer.json

README.md

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.

You can’t perform that action at this time.