PHPackages                             hananils/colors - 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. hananils/colors

Abandoned → [hananils/kirby-colors](/?search=hananils%2Fkirby-colors)Kirby-plugin

hananils/colors
===============

A color field for Kirby 3

1.7.3(2y ago)5573[7 issues](https://github.com/hananils/kirby-colors/issues)[1 PRs](https://github.com/hananils/kirby-colors/pulls)MITPHP

Since Jul 5Pushed 2y ago4 watchersCompare

[ Source](https://github.com/hananils/kirby-colors)[ Packagist](https://packagist.org/packages/hananils/colors)[ Docs](https://github.com/hananils/kirby-colors)[ RSS](/packages/hananils-colors/feed)WikiDiscussions main Synced 2mo ago

READMEChangelog (10)Dependencies (1)Versions (18)Used By (0)

[![Kirby Colors](.github/title.png)](.github/title.png)

**Colors** is a field for [Kirby 3](https://getkirby.com) that allows the selection of a color using the native color selector. Colors can be viewed and edited in either HEX, RGB or HSL. Additionally, the field automatically calculates the most readable contrast color. This can be useful, if you'd like to specify background colors and would like to adjust the text colors accordingly. The field displays the color contrast ratings AA, AALarge, AAA and AAALarge according to WCAG accessibility guidelines.

Important

With the release of version 4, Kirby now offers a core color field which offers similar options for color input. It should be used as an replacement for this plugin which is now deprecated. The one feature missing form the core field is color contrast checking. An new plugin for this purpose is in preparation.

Installation
------------

[](#installation)

### Download

[](#download)

Download and copy this repository to `/site/plugins/colors`.

### Git submodule

[](#git-submodule)

```
git submodule add https://github.com/hananils/kirby-colors.git site/plugins/colors

```

### Composer

[](#composer)

```
composer require hananils/kirby-colors

```

Blueprint
---------

[](#blueprint)

This field is provided under the type `colors`:

- `alpha`: allows you to enable or disable the opacity widget, either `true` or `false`.
- `contrast`: allows you to enable or disable the contrast widget that calculated the most readable contrast color, either `true` or `false` or an array of colors the plugin should choose from.
- `default`: the color to be used as default, either in hex3, hex6, hex8, rgb, rgba, hsl or hsla.

### Dynamic contrast options

[](#dynamic-contrast-options)

In order to set contrast colors, it possible to query another field:

```
colors:
    type: colors
    label: Colors
    contrast:
        type: query
        query: site.contrasts
```

You will have to make sure that the references field returns either a single color or an array of colors. Use methods like `split` to handle comma-separated strings, e. g. `site.contrasts.split`.

If you'd like to reference a field on the same page as your colors field, you'll have to watch for changes in order to get live updates:

```
colors:
    type: colors
    label: Colors
    contrast:
        type: watch
        field: contrasts
contrasts:
    type: text
    label: Contrast colors
```

If you need to split values of the watched field, you have to define the split character as well:

```
colors:
    type: colors
    label: Colors
    contrast:
        type: watch
        field: contrasts
        split: ','
contrasts:
    type: text
    label: Contrast colors
```

### Examples

[](#examples)

[![example 1](./.github/screenshot1.png)](./.github/screenshot1.png)

```
colors:
    type: colors
    label: Colors
```

[![example 2](./.github/screenshot2.png)](./.github/screenshot2.png)

```
colors:
    type: colors
    label: Colors (alpha)
    alpha: true
```

[![example 3](./.github/screenshot3.png)](./.github/screenshot3.png)

```
colors:
    type: colors
    label: Colors (alpha + readable)
    alpha: true
    contrast: true
```

[![example 4](./.github/screenshot4.png)](./.github/screenshot4.png)

```
colors:
    type: colors
    label: Colors (readable)
    contrast:
        - '#112233'
        - '#778899'
```

Field Methods
-------------

[](#field-methods)

#### `$field->isHex()`

[](#field-ishex)

Verifies if the current color is stored as hexadecimal value, returns `true` or `false`.

#### `$field->isRgb()`

[](#field-isrgb)

Verifies if the current color is stored as RGB value, returns `true` or `false`.

#### `$field->isHsl()`

[](#field-ishsl)

Verifies if the current color is stored as HSL value, returns `true` or `false`.

#### `$field->toClass()`

[](#field-toclass)

Returns the current color object, `Hananils\Color`, see `lib\Color.php`.

#### `$field->toColor($space)`

[](#field-tocolorspace)

Returns the current color as string. Accepts an optional `$space` attribute to set the output color space, either `hex`, `rgb` or `hsl`.

#### `$field->toSpace()`

[](#field-tospace)

Returns the current color space, either `hex`, `rgb` or `hsl`.

#### `$field->toValues()`

[](#field-tovalues)

Returns all color values, e. g.:

```
[
    'original' => '#ffffff',
    'space' => 'hex',
    'r' => 255,
    'g' => 255,
    'b' => 255,
    'h' => 0,
    's' => 0,
    'l' => 100,
    'a' => 100
];
```

#### `$field->toReadabilityReport()`

[](#field-toreadabilityreport)

Returns a readability report for the contrast colors defined in the blueprint, defaults to black and white:

```
Array
(
    [color] => Hananils\Color Object
        (
            [original:Hananils\Color:private] => #00b7ff
            [space:Hananils\Color:private] => hex
            [r:Hananils\Color:private] => 0
            [g:Hananils\Color:private] => 183
            [b:Hananils\Color:private] => 255
            [h:Hananils\Color:private] => 197
            [s:Hananils\Color:private] => 100
            [l:Hananils\Color:private] => 50
            [a:Hananils\Color:private] => 100
        )

    [combinations] => Array
        (
            [0] => Array
                (
                    [color] => Hananils\Color Object
                        (
                            [original:Hananils\Color:private] => #fff
                            [space:Hananils\Color:private] => hex
                            [r:Hananils\Color:private] => 255
                            [g:Hananils\Color:private] => 255
                            [b:Hananils\Color:private] => 255
                            [h:Hananils\Color:private] => 0
                            [s:Hananils\Color:private] => 0
                            [l:Hananils\Color:private] => 100
                            [a:Hananils\Color:private] => 100
                        )

                    [contrast] => 2.2783010917435
                    [accessibility] => Array
                        (
                        )

                )

            [1] => Array
                (
                    [color] => Hananils\Color Object
                        (
                            [original:Hananils\Color:private] => #000
                            [space:Hananils\Color:private] => hex
                            [r:Hananils\Color:private] => 0
                            [g:Hananils\Color:private] => 0
                            [b:Hananils\Color:private] => 0
                            [h:Hananils\Color:private] => 0
                            [s:Hananils\Color:private] => 0
                            [l:Hananils\Color:private] => 0
                            [a:Hananils\Color:private] => 100
                        )

                    [contrast] => 9.2173945209011
                    [accessibility] => Array
                        (
                            [0] => aaLarge
                            [1] => aaaLarge
                            [2] => aa
                            [3] => aaa
                        )

                )

        )

)
```

#### `$field->toMostReadable()`

[](#field-tomostreadable)

Returns the most readable color for the contrast colors defined in the blueprint, defaults to black and white.

Color calculation
-----------------

[](#color-calculation)

This plugin bundles two classes, one for JavaScript and one for PHP, with the identical API to perform color calculations. See `lib/Color.php` and `src/lib/color.js`.

Tips and tricks
---------------

[](#tips-and-tricks)

1. Click on the left color preview to open the color picker.
2. Click the arrow icon to switch between color spaces.
3. When editing RGB or HSL colors, use the up and down arrow keys to adjust the value by +1 or -1.
4. Hold the [meta key](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/metaKey) (or the shift key) to adjust values by +10 or -10.
5. Click on the grey unit indicator of a value then drag the mouse vertically to adjust the values on the fly. [![Drag-to-increment feature](./.github/tip5-dragfeature.gif)](./.github/tip5-dragfeature.gif)

Alternatives
------------

[](#alternatives)

Please note that there is another color field for Kirby 3 developed by Tim Ötting called Kirby Color, see .

License
=======

[](#license)

This plugin is provided freely under the [MIT license](LICENSE.md) by [hana+nils · Büro für Gestaltung](https://hananils.de). We create visual designs for digital and analog media.

###  Health Score

32

—

LowBetter than 72% of packages

Maintenance17

Infrequent updates — may be unmaintained

Popularity17

Limited adoption so far

Community16

Small or concentrated contributor base

Maturity67

Established project with proven stability

 Bus Factor1

Top contributor holds 74.3% 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 ~95 days

Recently: every ~140 days

Total

16

Last Release

1066d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/e0465cfa7ef2b9a264429068ddfeb765f3881f9c611048d2e7e95dfad4afbb35?d=identicon)[hananils](/maintainers/hananils)

---

Top Contributors

[![nilshoerrmann](https://avatars.githubusercontent.com/u/25466?v=4)](https://github.com/nilshoerrmann "nilshoerrmann (104 commits)")[![johannschopplich](https://avatars.githubusercontent.com/u/27850750?v=4)](https://github.com/johannschopplich "johannschopplich (31 commits)")[![Daandelange](https://avatars.githubusercontent.com/u/1329784?v=4)](https://github.com/Daandelange "Daandelange (3 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (1 commits)")[![medienbaecker](https://avatars.githubusercontent.com/u/7975568?v=4)](https://github.com/medienbaecker "medienbaecker (1 commits)")

---

Tags

kirby3-plugin

### Embed Badge

![Health badge](/badges/hananils-colors/health.svg)

```
[![Health](https://phpackages.com/badges/hananils-colors/health.svg)](https://phpackages.com/packages/hananils-colors)
```

###  Alternatives

[getkirby/cms

The Kirby core

1.5k535.5k350](/packages/getkirby-cms)[distantnative/retour-for-kirby

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

14689.4k1](/packages/distantnative-retour-for-kirby)[arnoson/kirby-vite

Vite helper for Kirby CMS

9759.2k3](/packages/arnoson-kirby-vite)[getkirby/staticache

Static site performance on demand

9615.4k](/packages/getkirby-staticache)[fabianmichael/kirby-meta

Your all-in-one powerhouse for any SEO and metadata needs imaginable.

6910.7k1](/packages/fabianmichael-kirby-meta)[thathoff/kirby-oauth

Kirby OAuth 2 Plugin

3823.9k](/packages/thathoff-kirby-oauth)

PHPackages © 2026

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