PHPackages                             toastnz/colourpalettes - 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. toastnz/colourpalettes

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

toastnz/colourpalettes
======================

Silverstripe colour palettes module

6.0.3(1mo ago)02.4k↑66.7%BSD-3-ClausePHPPHP >=8.3

Since Jan 5Pushed 2mo ago2 watchersCompare

[ Source](https://github.com/toastnz/colourpalettes)[ Packagist](https://packagist.org/packages/toastnz/colourpalettes)[ RSS](/packages/toastnz-colourpalettes/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (10)Dependencies (6)Versions (33)Used By (0)

ColourPalette Module
====================

[](#colourpalette-module)

This module allows you to manage and use colour palettes in your SilverStripe project.

### Installation

[](#installation)

To install the module, use Composer:

```
composer require toastnz/colourpalettes
```

### Adding and editing colours

[](#adding-and-editing-colours)

Colours can be managed in the CMS site config under 'Customisation' -> 'Colour Palettes'. Here you can add, edit and delete colours.

### Colour palettes configuration

[](#colour-palettes-configuration)

You can define default colours as well as colour groups in a yml config file. Default colours need to be hex codes without the #, contract colours are more customisable, and can be set to other variables, therefore a # is required if you want to use a hex code.

```
---
Name: colours
After: colourpalettes
---

Toast\ColourPalettes\Models\Colour:
  colour_groups:
    - Products
    - Buttons
  default_colours:
    - primary: null
    - secondary: null
    - white: 'ffffff'
    - black: '000000'
    - off-white: null
    - off-black: null
  contrast_colours:
    - on-dark: '#ffffff'
    - on-light: '#000000'
```

Adding colour groups will add a listbox to each colour added in the site config, allowing you to assign a colour to a single group or multiple groups.

Colours with a value will be locked and cannot be deleted or edited in the CMS. Groups are optional, but can be used to separate colours into various colour palette fields.

Contrast colours are the colours used when generating the css variables, on-dark will be used if the colour is set to dark, and on-light will be used if the colour is set to light. Makes senses right?

### Adding Colour Palette Field to a Class

[](#adding-colour-palette-field-to-a-class)

To add a colour palette field to a class, you can use the following code as an example:

```
use Toast\ColourPalettes\Models\ColourPalette;
use Toast\ColourPalettes\Fields\ColourPaletteField;

class YourClass extends DataObject
{
    private static $has_one = [
        'PrimaryColour' => Colour::class,
        'SecondaryColour' => Colour::class,
    ];

    public function updateCMSFields(FieldList $fields)
    {
        $fields->removeByName([
            'PrimaryColourID',
            'SecondaryColourID',
        ]);

        // Add the colour palette field to the class
        $fields->addFieldToTab('Root.Main', ColourPaletteField::create('PrimaryColour', 'Primary Colour'));

        // Optionally add a groups as an array to the field as the 3rd parameter
        $fields->addFieldToTab('Root.Main', ColourPaletteField::create('SecondaryColour', 'Secondary Colour', ['Products']));
    }
}
```

### Template usage

[](#template-usage)

To use the colours in your templates, you can use the following code as an example:

```

    :root {
        {$PrimaryColour.RootVars}
        {$SecondaryColour.RootVars}
    }

```

```

    lorem ipsum

        .my-element {
            {$PrimaryColour.CSSVars}
            {$SecondaryColour.CSSVars}
        }

```

### Using the colours in your CSS

[](#using-the-colours-in-your-css)

The colours will automatically generate their own CSS variables based on the name you give them on the class. For example, if you have a colour field called 'PrimaryColour', the following CSS variables will be generated:

```
/* $PrimaryColour.RootVars */
:root {
    --primary-colour: #000000;
    --primary-colour-contrast: #ffffff;
}

/* PrimaryColour.CSSVars */
.my-element {
    --_primary-colour: #000000;
    --_primary-colour-contrast: #ffffff;
}
```

### Helper functions

[](#helper-functions)

Sometimes you just want to know if the colour is light or dark:

```

    Primary colour is light

    Primary colour is dark

```

###  Health Score

49

—

FairBetter than 95% of packages

Maintenance86

Actively maintained with recent releases

Popularity21

Limited adoption so far

Community11

Small or concentrated contributor base

Maturity64

Established project with proven stability

 Bus Factor1

Top contributor holds 80.8% 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 ~15 days

Recently: every ~35 days

Total

30

Last Release

56d ago

Major Versions

1.1.9 → 6.0.12025-11-02

PHP version history (2 changes)1.0PHP >=8.1

6.0PHP >=8.3

### Community

Maintainers

![](https://www.gravatar.com/avatar/9cc41858b7e0e95f7c9ff396fc2d454339424c425d8f78aeb526434da6f61543?d=identicon)[priscilla-toastnz](/maintainers/priscilla-toastnz)

---

Top Contributors

[![emmanuel-toast](https://avatars.githubusercontent.com/u/44280336?v=4)](https://github.com/emmanuel-toast "emmanuel-toast (21 commits)")[![priscillay-toast](https://avatars.githubusercontent.com/u/92568971?v=4)](https://github.com/priscillay-toast "priscillay-toast (4 commits)")[![pyap22](https://avatars.githubusercontent.com/u/20524832?v=4)](https://github.com/pyap22 "pyap22 (1 commits)")

---

Tags

silverstripemodularcolours

### Embed Badge

![Health badge](/badges/toastnz-colourpalettes/health.svg)

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

PHPackages © 2026

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