PHPackages                             sylvainjule/color-palette - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. sylvainjule/color-palette

AbandonedArchivedKirby-plugin[Utility & Helpers](/categories/utility)

sylvainjule/color-palette
=========================

A color palette to pick colors from for Kirby

1.0.4(6y ago)5728.9k—0%10MITVue

Since Jan 6Pushed 9mo ago2 watchersCompare

[ Source](https://github.com/sylvainjule/kirby-color-palette)[ Packagist](https://packagist.org/packages/sylvainjule/color-palette)[ RSS](/packages/sylvainjule-color-palette/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (5)Dependencies (1)Versions (7)Used By (0)

> This plugin is now archived in favor of the native `color` field in Kirby 5, whose [`mode` option](https://getkirby.com/docs/reference/panel/fields/color#modes) can be set to `options` with more dynamic possibilities. The ability to generate a color palette from an uploaded image has been migrated to the [Color Extractor](https://github.com/sylvainjule/kirby-colorextractor) plugin, and documented [in its README](https://github.com/sylvainjule/kirby-colorextractor?tab=readme-ov-file#5-palette-usage). See also [this reply](https://github.com/sylvainjule/kirby-color-palette/issues/31#issuecomment-3156231226) about why I archived this plugin.

Kirby Color-Palette
===================

[](#kirby-color-palette)

A color palette displayed in the panel, helping you pick predefined colors / palettes.

[![screenshot-palette-cursor](https://user-images.githubusercontent.com/14079751/47902848-12a9cc80-de83-11e8-92ea-cabf5031b355.jpg)](https://user-images.githubusercontent.com/14079751/47902848-12a9cc80-de83-11e8-92ea-cabf5031b355.jpg)

Overview
--------

[](#overview)

> 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, you can consider [making a donation of your choice](https://www.paypal.me/sylvainjl).

- [1. Installation](#1-installation)
- [2. Setup](#2-setup)
- [3. Configuration](#3-configuration)
- [4. Extract palette from an image](#4-extract-palette-from-an-image)
- [5. Template usage](#5-template-usage)
- [6. License](#6-license)
- [7. Credits](#7-credits)

1. Installation
---------------

[](#1-installation)

Download and copy this repository to `/site/plugins/color-palette`

Alternatively, you can install it with composer: `composer require sylvainjule/color-palette`

2. Setup
--------

[](#2-setup)

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
```

3. Configuration
----------------

[](#3-configuration)

#### 3.1. `options` (required)

[](#31-options-required)

The plugin accepts both an array or a structured object.

##### • Simple colors

[](#simple-colors)

```
palette:
  type: color-palette
  options:
    - '#135fdc'
    - '#f6917e'
    - '#6a96e4'
    - ...
```

##### • Structured color themes

[](#structured-color-themes)

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
    ...
```

[![screenshot-tooltip](https://user-images.githubusercontent.com/14079751/70157500-fbf12d00-16b5-11ea-8572-4877dbcb32e5.jpg)](https://user-images.githubusercontent.com/14079751/70157500-fbf12d00-16b5-11ea-8572-4877dbcb32e5.jpg)

##### • Dynamic options

[](#dynamic-options)

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
```

#### 3.2. `display`

[](#32-display)

[![screenshot-display](https://user-images.githubusercontent.com/14079751/47905300-117a9e80-de87-11e8-8853-5b328b993439.jpg)](https://user-images.githubusercontent.com/14079751/47905300-117a9e80-de87-11e8-8853-5b328b993439.jpg)

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
```

#### 3.3. `size`

[](#33-size)

[![screenshot-size](https://user-images.githubusercontent.com/14079751/47905301-12133500-de87-11e8-85f2-6ab680cab91d.jpg)](https://user-images.githubusercontent.com/14079751/47905301-12133500-de87-11e8-85f2-6ab680cab91d.jpg)

The size of the color blocks, to pick from `small`, `medium` or `large`. Default is `medium`.

```
palette:
  type: color-palette
  size: medium
```

#### 3.4. `unselect`

[](#34-unselect)

If set to `true`, selected colors can be unselected. Default is `false`.

```
palette:
  type: color-palette
  unselect: false
```

#### 3.5. `default`

[](#35-default)

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'
```

4. Extract palette from an image
--------------------------------

[](#4-extract-palette-from-an-image)

#### 4.1. Select manually which image to extract colors from

[](#41-select-manually-which-image-to-extract-colors-from)

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
```

#### 4.2. Automatically extract colors when an image matches a template

[](#42-automatically-extract-colors-when-an-image-matches-a-template)

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
```

#### 4.3. Limit

[](#43-limit)

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
```

5. Template usage
-----------------

[](#5-template-usage)

#### 5.1. If `options` is an array of simple colors

[](#51-if-options-is-an-array-of-simple-colors)

The field will only store the selected color.

```
$selected = $page->palette();   #(Field object)
$selected = $selected->value(); #(string)
```

#### 5.2. If `options` is a structured color object

[](#52-if-options-is-a-structured-color-object)

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)
```

#### 5.3. If the palette has been extracted from an image

[](#53-if-the-palette-has-been-extracted-from-an-image)

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)
```

6. License
----------

[](#6-license)

MIT

7. Credits
----------

[](#7-credits)

- K2 version: [Color list](https://github.com/Thiousi/kirby-color-list) by [@Thiousi](https://github.com/Thiousi)

###  Health Score

44

—

FairBetter than 92% of packages

Maintenance41

Moderate activity, may be stable

Popularity39

Limited adoption so far

Community14

Small or concentrated contributor base

Maturity65

Established project with proven stability

 Bus Factor1

Top contributor holds 97.4% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~115 days

Total

5

Last Release

2222d ago

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/14079751?v=4)[Sylvain Julé](/maintainers/sylvainjule)[@sylvainjule](https://github.com/sylvainjule)

---

Top Contributors

[![sylvainjule](https://avatars.githubusercontent.com/u/14079751?v=4)](https://github.com/sylvainjule "sylvainjule (38 commits)")[![johannschopplich](https://avatars.githubusercontent.com/u/27850750?v=4)](https://github.com/johannschopplich "johannschopplich (1 commits)")

---

Tags

colorcolor-listextractorkirbypaletteswatches

### Embed Badge

![Health badge](/badges/sylvainjule-color-palette/health.svg)

```
[![Health](https://phpackages.com/badges/sylvainjule-color-palette/health.svg)](https://phpackages.com/packages/sylvainjule-color-palette)
```

###  Alternatives

[distantnative/retour-for-kirby

Manage redirects and track 404s right from the Kirby CMS Panel

14689.4k1](/packages/distantnative-retour-for-kirby)[mzur/kirby-uniform

A versatile Kirby plugin to handle web form actions.

26068.3k13](/packages/mzur-kirby-uniform)[arnoson/kirby-vite

Vite helper for Kirby CMS

9759.2k3](/packages/arnoson-kirby-vite)[thathoff/kirby-git-content

Plugin to track changes to content in a git repository.

15343.7k](/packages/thathoff-kirby-git-content)[sylvainjule/locator

A map & geolocation field, built on top of open-source services / Mapbox

11237.3k1](/packages/sylvainjule-locator)[tobimori/kirby-seo

The default choice for SEO on Kirby: Implement technical SEO & Meta best practices with ease and provide an easy-to-use editor experience

10039.7k1](/packages/tobimori-kirby-seo)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)