PHPackages                             moe/color-swab - 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. moe/color-swab

ActiveSilverstripe-module[Utility & Helpers](/categories/utility)

moe/color-swab
==============

An extension of font-awesome-picker that replaces the icons with colours.

v1.0.1(10y ago)107595[1 PRs](https://github.com/peavers/silverstripe-color-swabs/pulls)1BSD-3-ClauseJavaScript

Since Jul 27Pushed 6y ago2 watchersCompare

[ Source](https://github.com/peavers/silverstripe-color-swabs)[ Packagist](https://packagist.org/packages/moe/color-swab)[ RSS](/packages/moe-color-swab/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (2)Dependencies (2)Versions (4)Used By (1)

Synopsis
--------

[](#synopsis)

An extension of font-awesome-picker that replaces the icons with colours.

Features
--------

[](#features)

- Easily pick colour swabs to be used anywhere in the frontend
- Can filter on colour name
- Almost no development/lines of code required to add new colours

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

[](#installation)

### Composer

[](#composer)

Ideally composer will be used to install this module. `composer require "moe/color-swab:@stable"`

Screen shots
------------

[](#screen-shots)

### Color swab view

[](#color-swab-view)

[![Color swabs](https://raw.githubusercontent.com/peavers/silverstripe-color-swabs/master/images/screens/color-swabs.png "Colour swabs")](https://raw.githubusercontent.com/peavers/silverstripe-color-swabs/master/images/screens/color-swabs.png)
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

[](#)

### Filter view

[](#filter-view)

[![Filter](https://raw.githubusercontent.com/peavers/silverstripe-color-swabs/master/images/screens/color-swabs-filter.png "Colour filter")](https://raw.githubusercontent.com/peavers/silverstripe-color-swabs/master/images/screens/color-swabs-filter.png)

Usage
-----

[](#usage)

A basic working example, include the following to any class you want the field on;

```
    private static $db = array(
        'MenuBackgroundColor' => 'Varchar(255)',
    );

    public function getCMSFields()
    {
        $fields = parent::getCMSFields();

        $fields->addFieldsToTab('Root.Main', array(
            ColorSwabField::create('MenuBackgroundColor', 'Megamenu background colour')
        ));

        return $fields;
    }
```

Then simply include in the template in a class element

```
    [...]
```

The controller extension should make sure you've got access to the colour swabs so you don't need to double up the CSS file.

Add/Change colours
------------------

[](#addchange-colours)

To modify the choice of colours you need to change two files.

- js/color-swabs.js
- css/color-swabs.css

For example: To add the colour black make the following changes

```
// js/color-swabs.js
    var colorSwabs = [
        //[...]
        'black-500'
    ];
```

```
/* css/color-swabs.css */
    .color-black-500 {
        background: #000000;
    }
```

Want icons instead of colours?
------------------------------

[](#want-icons-instead-of-colours)

Got you covered, checkout [font-awesome](https://github.com/peavers/silverstripe-font-awesome)!

Libraries used/modified
-----------------------

[](#libraries-usedmodified)

- Font Awesome Icon Picker

###  Health Score

33

—

LowBetter than 75% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity22

Limited adoption so far

Community15

Small or concentrated contributor base

Maturity65

Established project with proven stability

 Bus Factor1

Top contributor holds 80% 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 ~0 days

Total

2

Last Release

3941d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/7e73556e40ee94b2511f93fe26a538633e9c5c97d76b883a837ed8e8c552396a?d=identicon)[peavers](/maintainers/peavers)

---

Top Contributors

[![peavers](https://avatars.githubusercontent.com/u/1758007?v=4)](https://github.com/peavers "peavers (4 commits)")[![hdpero](https://avatars.githubusercontent.com/u/13778690?v=4)](https://github.com/hdpero "hdpero (1 commits)")

---

Tags

colorseditors

### Embed Badge

![Health badge](/badges/moe-color-swab/health.svg)

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

###  Alternatives

[tomloprod/colority

Colority is a lightweight PHP library designed to handle color transformations, validations and manipulations with ease.

22688.4k1](/packages/tomloprod-colority)[tecnickcom/tc-lib-color

PHP library to manipulate various color representations

247.2M9](/packages/tecnickcom-tc-lib-color)[doublesecretagency/craft-matrixcolors

Identify your matrix blocks by giving each type a different color.

4518.3k](/packages/doublesecretagency-craft-matrixcolors)[presseddigital/colorit

A slick color picker fieldtype plugin for the Craft CMS 3 control panel.

2132.1k](/packages/presseddigital-colorit)

PHPackages © 2026

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