A color palette displayed in the panel, helping you pick predefined colors / palettes.
This plugin is completely free and published under the MIT license. However, if you are using it in a commercial project and want to help me keep up with maintenance, please consider making a donation of your choice or purchasing your license(s) through my affiliate link.
- 1. Installation
- 2. Setup
- 3. Configuration
- 4. Extract palette from an image
- 5. Template usage
- 6. License
- 7. Credits
Download and copy this repository to /site/plugins/color-palette
Alternatively, you can install it with composer: composer require sylvainjule/color-palette
A basic setup looks like this:
palette:
label: Pick a color
type: color-palette
options:
- '#135fdc'
- '#f6917e'
- '#6a96e4'
- ...
Note that you can fill it with any CSS-valid color:
- '#ffffff'
- rgba(255, 255, 255, 0.5)
- rgb(255, 255, 255)
- white
The plugin accepts both an array or a structured object.
palette:
type: color-palette
options:
- '#135fdc'
- '#f6917e'
- '#6a96e4'
- ...
The field will use the first color of the object as the background-color.
palette:
type: color-palette
options:
blue:
background: '#135fdc'
border: '#0438c7'
text: white
orange:
background: '#f6917e'
border: '#ef6a57'
text: white
...
You can add tooltips to structured colors: any color with the tooltip
key will show a tooltip on hover.
...
options:
blue:
background: '#135fdc'
tooltip: This is a tooltip
...
You can set dynamic options / query your options from a different field. Just make sure the value
returns a CSS-valid color.
For example with a structure field:
palette:
type: color-palette
options: query
query:
fetch: page.mycolors.toStructure
value: "{{ structureItem.color }}"
...
mycolors:
type: structure
fields:
color:
type: text
The display style of the color blocks, to pick from single
or duo
. Default is single
.
If the selected style is duo
and the options are structured color themes, the field will use the first color of the object as the left color, and the second as the right color.
palette:
type: color-palette
display: single
The size of the color blocks, to pick from small
, medium
or large
. Default is medium
.
palette:
type: color-palette
size: medium
If set to true
, selected colors can be unselected. Default is false
.
palette:
type: color-palette
unselect: false
The default value to be used if the field has no set value. Will be ignored if it doesn't match an option. Default is false
.
#simple colors
palette:
type: color-palette
default: '#135fdc'
options:
- '#135fdc'
- '#f6917e'
# structured colors
palette:
type: color-palette
default: blue
options:
blue:
background: '#135fdc'
border: '#0438c7'
orange:
background: '#f6917e'
border: '#ef6a57'
You can extract a color palette from a page's image file by activating the extractor
option. It will override the manual options, if specified. Default is false
.
palette:
type: color-palette
extractor: true
# no need for options anymore
You can restrict the choices to a specific file template with the template
option:
palette:
type: color-palette
extractor: true
template: cover
Alternatively, you can make use of the autotemplate
option (do not add the above extractor
option in this case).
If the page has at least 1 image matching the given template (if 2+ are found, the field will use the first one), options will automatically be extracted from it on load.
Note that there is no realtime-sync, the page needs to be reloaded in order for the plugin to detect a newly added image. The best way of achieving this without having to manually refresh the page is to place this field and the files section under two different tabs.
palette:
type: color-palette
autotemplate: cover
# no need for options anymore
In both cases, the maximum number of extracted colors can be set with the limit
option. Default is 10
.
palette:
type: color-palette
extractor: true
limit: 10
The field will only store the selected color.
$selected = $page->palette(); #(Field object)
$selected = $selected->value(); #(string)
The field will need to be decoded with the yaml
method. For example, if your options look like this:
options:
blue:
background: '#135fdc'
border: '#0438c7'
Here's how to get the selected color:
$palette = $page->palette()->yaml();
$background = $palette['background']; #(string)
$border = $palette['border']; #(string)
Note that in this case, the plugin automatically adds the key of the selected color, in case you'd want it to deal with custom classes, etc.
$border = $palette['key']; #(string)
Both the selected color and the extracted palette are stored. The value of the field is an array you'll need to decode with the yaml
method:
$palette = $page->palette()->yaml();
$selected = $palette[0]; #selected color (string)
$palette = $palette[1]; #extracted palette (array)
MIT
- K2 version: Color list by @Thiousi