PHPackages                             clearbold/craft-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. [Templating &amp; Views](/categories/templating)
4. /
5. clearbold/craft-color-palette

ActiveCraft-plugin[Templating &amp; Views](/categories/templating)

clearbold/craft-color-palette
=============================

Configure color themes. Select color themes for page or component styles via entry fields. Output CSS class names or color values in your templates.

1.0.3(5y ago)09proprietaryPHP

Since Apr 7Pushed 5y ago1 watchersCompare

[ Source](https://github.com/clearbold/craft-color-palette)[ Packagist](https://packagist.org/packages/clearbold/craft-color-palette)[ Docs](https://clearbold.com)[ RSS](/packages/clearbold-craft-color-palette/feed)WikiDiscussions main Synced 2d ago

READMEChangelogDependencies (1)Versions (5)Used By (0)

Color Palette
=============

[](#color-palette)

Configure color themes for your Craft CMS site. Select color themes for page or component styles via entry fields. Output CSS class names or color values in your templates.

Roadmap
-------

[](#roadmap)

- Retain deleted collections &amp; themes so they remain available to fields where they're selected
- Import/export functionality
- Display contrast scores for adjacent colors, for accessibility
- Better color picker, incorporating alpha
- UI enhancements

Twig Examples
-------------

[](#twig-examples)

```

{% for color in entry.field.all() %}
    --color-{{ color.handle}}: {{ color.getHex() }};
{% endfor %}

{# Outputs: #}

    --color-background: #CC4224;
    --color-text: #000000;
    --color-button: #2A75B3;
    --color-highlight: #F3D403;

```

```

    --color-background: {{ entry.field.handle('background').getRgb() }}
    --color-background-alpha: {{ entry.field.handle('background').getRgba() }}

{# Outputs: #}

    --color-background: rgb(204, 66, 36);
    --color-background-alpha: rgb(204, 66, 36, .5);

```

```

{% set collections = craft.colorpalette.collections %}
{# or #}
{% for collection in craft.colorpalette.all() %}

{% set themes = collections.themes %}
{# or #}
{% for theme in collection.all() %}
{% for color in theme.colors %}
    --color-{{ color.handle}}: {{ color.getHex() }};
{% endfor %}
{% endfor %}
{% endfor %}

{# Outputs: #}

    --color-background: #CC4224;
    --color-text: #000000;
    --color-button: #2A75B3;
    --color-highlight: #F3D403;

```

```

{# Outputs #}

```

```
{% set collection = craft.colorpalette.handle('heroes') %}
{% set theme = collection.handle('captainMarvel') %}
{# or #}
{% set collection = craft.colorpalette.collection('heroes') %}
{% set theme = collection.theme('captainMarvel') %}
{# or #}
{{ craft.colorpalette.collection('heroes').theme('captainMarvel').name }}

{% for color in theme.colors %}
    --color-{{ color.handle}}: {{ color.getHex() }};
{% endfor %}

{# Outputs: #}

    --color-background: #CC4224;
    --color-text: #000000;
    --color-button: #2A75B3;
    --color-highlight: #F3D403;

{# ~~~~~~~~ #}

{% set color = theme.color('background') %}
{# or #}
{% set color = theme.handle('background') %}

    --color-background: {{ color.getRgb() }}

{# Outputs: #}

    --color-background: rgb(204, 66, 36);

```

###  Health Score

24

—

LowBetter than 32% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity4

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity55

Maturing project, gaining track record

 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 ~0 days

Total

4

Last Release

1860d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/99ef0d2558efaf3a6f7f9a394435dbfea08583f332768fb5f557d3752405b74c?d=identicon)[clearbold](/maintainers/clearbold)

---

Top Contributors

[![heymarkreeves](https://avatars.githubusercontent.com/u/49657?v=4)](https://github.com/heymarkreeves "heymarkreeves (7 commits)")

---

Tags

craftcraft-plugincolorcmsthemedesignCraftcraftcmsthemespalette

### Embed Badge

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

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

###  Alternatives

[lewisjenkins/craft-dynamic-fields

Populate Craft fields with dynamic data using the power of Twig.

14667.0k](/packages/lewisjenkins-craft-dynamic-fields)[nystudio107/craft-minify

A simple plugin that allows you to minify blocks of HTML, CSS, and JS inline in Craft CMS templates.

37461.2k29](/packages/nystudio107-craft-minify)[nystudio107/craft-autocomplete

Provides Twig template IDE autocomplete of Craft CMS &amp; plugin variables

44204.4k13](/packages/nystudio107-craft-autocomplete)[presseddigital/colorit

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

2132.1k](/packages/presseddigital-colorit)[jalendport/craft-preparse

A fieldtype that parses Twig when an element is saved and saves the result as plain text.

1086.4k](/packages/jalendport-craft-preparse)[verbb/footnotes

Adds a footnotes feature to CKEditor fields and Twig templates.

213.3k](/packages/verbb-footnotes)

PHPackages © 2026

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