PHPackages                             fieldwork/craft-color-swatches - 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. fieldwork/craft-color-swatches

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

fieldwork/craft-color-swatches
==============================

Let clients choose from a predefined set of colors.

1.2.1(6y ago)023MITPHPCI failing

Since Mar 17Pushed 6y ago2 watchersCompare

[ Source](https://github.com/EMT/craft-color-swatches)[ Packagist](https://packagist.org/packages/fieldwork/craft-color-swatches)[ RSS](/packages/fieldwork-craft-color-swatches/feed)WikiDiscussions master Synced 2d ago

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

[![Icon](./src/icon.svg)](./src/icon.svg)

[![Latest Version](https://camo.githubusercontent.com/364b0d2b95d2d8fc048243fdd1cedfaa261e69a6d205fef21a253bc1942e0e87/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f72656c656173652f726961733530302f63726166742d636f6c6f722d73776174636865732e7376673f7374796c653d666c61742d737175617265)](https://github.com/rias500/craft-color-swatches/releases)[![Quality Score](https://camo.githubusercontent.com/6e1a13ecbd3c0fe63b24f51820690d8ea0495d8bc0d7f3cfdeb62debc3766bfe/68747470733a2f2f696d672e736869656c64732e696f2f7363727574696e697a65722f672f726961733530302f63726166742d636f6c6f722d73776174636865732e7376673f7374796c653d666c61742d737175617265)](https://scrutinizer-ci.com/g/rias500/craft-color-swatches)[![StyleCI](https://camo.githubusercontent.com/450d59e346ec4005caf6bbded0b130066fed62cbb8ac2a89ae81e0efce0e686a/68747470733a2f2f7374796c6563692e696f2f7265706f732f3131373435343836332f736869656c64)](https://styleci.io/repos/117454863)[![Total Downloads](https://camo.githubusercontent.com/6f17f0455367a3bb0d7f952d3959acc4668e575553df001c9765eed919d87fb1/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f726961732f63726166742d636f6c6f722d73776174636865732e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/rias/craft-color-swatches)

Color Swatches plugin for Craft CMS 3.x
=======================================

[](#color-swatches-plugin-for-craft-cms-3x)

Let clients choose from a predefined set of colors.

[![](./resources/img/screenshot.png)](./resources/img/screenshot.png)

Support Open Source. Buy beer.
------------------------------

[](#support-open-source-buy-beer)

This plugin is licensed under a MIT license, which means that it's completely free open source software, and you can use it for whatever and however you wish. If you're using it and want to support the development, buy me a beer over at Beerpay!

[![Beerpay](https://camo.githubusercontent.com/6ad4c92a00f9ae07b0d01e6a27cfd6ae8a85f103fc0b9c0f2aa65f2b337f6d22/68747470733a2f2f626565727061792e696f2f526961733530302f63726166742d636f6c6f722d73776174636865732f62616467652e7376673f7374796c653d626565722d737175617265)](https://beerpay.io/Rias500/craft-color-swatches)

Requirements
------------

[](#requirements)

This plugin requires Craft CMS 3.0.0-beta.23 or later.

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

[](#installation)

To install the plugin, follow these instructions.

1. Open your terminal and go to your Craft project:

    ```
     cd /path/to/project

    ```
2. Then tell Composer to load the plugin:

    ```
     composer require rias/craft-color-swatches

    ```
3. In the Control Panel, go to Settings → Plugins and click the “Install” button for Color Swatches.

Color Swatches Overview
-----------------------

[](#color-swatches-overview)

Instead of providing a user a full color picker, Color Swatches gives an admin the ability to provide a selection of colors for a user to choose from.

Configuring Color Swatches
--------------------------

[](#configuring-color-swatches)

Create a Color Swatches field and provide label and hex value options.

[![Screenshot](./resources/img/single.png)](./resources/img/single.png)

Multiple colors are possible by seperating them with a comma

[![Screenshot](./resources/img/multiple.png)](./resources/img/multiple.png)

Using the config file
---------------------

[](#using-the-config-file)

You can create a `config/color-swatches.php` file to predefine the possible colors or define different palettes. Take a look at the [config file](https://github.com/Rias500/craft-color-swatches/blob/master/src/config.php) in this repo for an example.

```
return [

    // Predefined colors
    'colors' => [
        [
            'label' => 'red',
            'color' => '#ff0000',
            'default' => false,
        ],
        [
            'label' => 'green',
            'color' => '#00ff00',
            'default' => false,
        ],
        [
            'label' => 'blue',
            'color' => '#0000ff',
            'default' => false,
        ],
        [
            'label' => 'pink',
            'color' => '#ff00ff',
            'default' => false,
        ]
    ],

    'palettes' => [
        'Red Green' => [
            [
                'label'   => 'red',
                'color'   => '#ff0000',
                'default' => false,
            ],
            [
                'label'   => 'green',
                'color'   => '#00ff00',
                'default' => false,
            ],
        ],
        'Buttons' => [
            [
                'label'   => 'blue-white',
                'color'   => '#0000ff,#ffffff',
                'default' => false,
            ],
            [
                'label'   => 'red-white',
                'color'   => '#ff0000, #ffffff',
                'default' => false,
            ],
        ],
    ],
];
```

In your field settings you can then have the possibility to have it use the predefined colors.

[![Screenshot](./resources/img/config.png)](./resources/img/config.png)

Using Color Swatches
--------------------

[](#using-color-swatches)

You can access both the label and color in your template. By default, the label will display:

```
{{ fieldName }}
{{ fieldName.label }}
{{ fieldName.labels }} {# Returns an array of all labels #}
{{ fieldName.color }}
{{ fieldName.colors }} {# Returns an array of all colors #}
```

Based on the awesome [Craft 2 plugin](https://github.com/vigetlabs/craft-color-swatches) from Vigetlabs

Brought to you by [Rias](https://rias.be)

###  Health Score

27

—

LowBetter than 47% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity6

Limited adoption so far

Community8

Small or concentrated contributor base

Maturity63

Established project with proven stability

 Bus Factor1

Top contributor holds 100% 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 ~77 days

Total

4

Last Release

2430d ago

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/334177?v=4)[Andy Gott](/maintainers/andygott)[@andygott](https://github.com/andygott)

---

Top Contributors

[![andygott](https://avatars.githubusercontent.com/u/334177?v=4)](https://github.com/andygott "andygott (5 commits)")

---

Tags

cmsCraftcraftcmscraft-plugincolor-swatches

### Embed Badge

![Health badge](/badges/fieldwork-craft-color-swatches/health.svg)

```
[![Health](https://phpackages.com/badges/fieldwork-craft-color-swatches/health.svg)](https://phpackages.com/packages/fieldwork-craft-color-swatches)
```

###  Alternatives

[verbb/formie

The most user-friendly forms plugin for Craft.

100387.6k59](/packages/verbb-formie)[nystudio107/craft-seomatic

SEOmatic facilitates modern SEO best practices & implementation for Craft CMS 5. It is a turnkey SEO system that is comprehensive, powerful, and flexible.

1741.5M52](/packages/nystudio107-craft-seomatic)[verbb/navigation

Create navigation menus for your site.

92698.4k18](/packages/verbb-navigation)[verbb/field-manager

Manage your fields and field groups with ease.

195612.2k10](/packages/verbb-field-manager)[verbb/workflow

Enforce multi-step review processes for creating entries.

138123.0k1](/packages/verbb-workflow)[verbb/comments

Add comments to your site.

13753.7k](/packages/verbb-comments)

PHPackages © 2026

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