PHPackages                             rias/statamic-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. rias/statamic-color-swatches

ActiveStatamic-addon[Utility & Helpers](/categories/utility)

rias/statamic-color-swatches
============================

v3.1.1(3mo ago)1617.2k↓26.7%2[4 PRs](https://github.com/riasvdv/statamic-color-swatches/pulls)PHPCI failing

Since Apr 16Pushed 1mo ago2 watchersCompare

[ Source](https://github.com/riasvdv/statamic-color-swatches)[ Packagist](https://packagist.org/packages/rias/statamic-color-swatches)[ RSS](/packages/rias-statamic-color-swatches/feed)WikiDiscussions main Synced 1mo ago

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

[![Icon](https://github.com/riasvdv/statamic-color-swatches/raw/main/icon.svg)](https://github.com/riasvdv/statamic-color-swatches/raw/main/icon.svg)

[![Latest Version](https://camo.githubusercontent.com/6d4a4de461180d4f10796924a7cdde51b9f0a4bde15886fe888655f1731ce745/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f72656c656173652f726961737664762f73746174616d69632d636f6c6f722d73776174636865732e7376673f7374796c653d666c61742d737175617265)](https://github.com/riasvdv/statamic-color-swatches/releases)

Color Swatches
==============

[](#color-swatches)

> Color Swatches fieldtype for Statamic >= v6.

For the Statamic 3 & 4 version, check out the [v2 branch](https://github.com/riasvdv/statamic-color-swatches/tree/v2).
For the Statamic 2 version, check out the [v1 branch](https://github.com/riasvdv/statamic-color-swatches/tree/v1).

Instead of providing a full color picker, Color Swatches lets you define a fixed palette of colors for content editors to choose from — as clickable swatch buttons in the Control Panel.

[![Screenshot](https://github.com/riasvdv/statamic-color-swatches/raw/main/docs/img/color-swatches-screenshot.png?v=3)](https://github.com/riasvdv/statamic-color-swatches/raw/main/docs/img/color-swatches-screenshot.png?v=3)

License
-------

[](#license)

Color Swatches requires a license to be used while on a production site. You can purchase one at .

You may use Color Swatches without a license while Statamic is in [Trial mode](https://statamic.dev/tips/how-to-enable-statamic-pro#trial-mode).

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

[](#installation)

Require it using Composer:

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

```

Configuration Options
---------------------

[](#configuration-options)

OptionTypeDefaultDescription`colors`grid—Define the available colors. Each color has a **label** and one or more **values** (CSS color strings).`default`text—The label of the color that should be selected by default.`allow_blank`toggle`false`Show a "None" option allowing the user to deselect.`max_items`integer`1`Maximum selectable swatches. Set to `1` for single-select, any other value for multi-select (`0` = unlimited).`min_items`integer`0`Minimum number of swatches that must be selected (multi-select only).`show_labels`toggle`false`Display the color label below each swatch.`swatch_size`button group`medium`Size of each swatch: `small`, `medium`, or `large`.`columns`button group`auto`Grid columns for the swatch layout: `auto` (flex wrap), or `2`–`6` fixed columns.Usage
-----

[](#usage)

### Blueprint Configuration

[](#blueprint-configuration)

Add the fieldtype to your blueprint. Each color needs a `label` and a `value` array of CSS color strings:

```
sections:
  main:
    display: Main
    fields:
      - handle: color
        field:
          type: color_swatches
          display: Color
          colors:
            - label: Red
              value:
                - "#F56565"
            - label: Orange
              value:
                - "#ED8936"
            - label: Green
              value:
                - "#48BB78"
          default: Red
          allow_blank: true
          show_labels: true
          swatch_size: large
```

### Multi-Value Colors (Gradients)

[](#multi-value-colors-gradients)

A color can have multiple values — the swatch will render as a linear gradient:

```
colors:
  - label: Sunset
    value:
      - "#F56565"
      - "#ED8936"
  - label: Ocean
    value:
      - "#4299E1"
      - "#48BB78"
```

### Multi-Select Mode

[](#multi-select-mode)

Set `max_items` to any value other than `1` to enable multi-select. Use `min_items` to require a minimum number of selections:

```
- handle: brand_colors
  field:
    type: color_swatches
    display: Brand Colors
    max_items: 3
    min_items: 1
    colors:
      - label: Primary
        value:
          - "#1a202c"
      - label: Secondary
        value:
          - "#2d3748"
      - label: Accent
        value:
          - "#ed8936"
      - label: Highlight
        value:
          - "#ecc94b"
```

Set `max_items: 0` for unlimited selections.

### Templating

[](#templating)

#### Single Select

[](#single-select)

The stored value is an object with `label` and `value`:

```
{{ color.label }}
{{ color.value }}

{{# For multi-value colors (gradients): #}}
{{ color.value }}
  {{ value }}
{{ /color.value }}
```

#### Multi-Select

[](#multi-select)

The stored value is an array of objects:

```
{{ brand_colors }}
  {{ label }} — {{ value }}
{{ /brand_colors }}
```

### GraphQL

[](#graphql)

The fieldtype exposes a `ColorSwatchType` with:

- `label` — `String`
- `value` — `[String]` (always an array)

In multi-select mode, the field returns `[ColorSwatchType]`.

Accessibility
-------------

[](#accessibility)

- Swatches use proper ARIA roles (`radiogroup`/`radio` for single-select, `group`/`checkbox` for multi-select)
- Each swatch has a descriptive `aria-label` with the color name and selection state
- Keyboard focus is indicated with a visible focus ring
- Selected swatches display a checkmark overlay
- Disabled swatches (when max is reached) are visually dimmed and marked as `disabled`

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

###  Health Score

55

—

FairBetter than 98% of packages

Maintenance85

Actively maintained with recent releases

Popularity34

Limited adoption so far

Community15

Small or concentrated contributor base

Maturity70

Established project with proven stability

 Bus Factor1

Top contributor holds 65.1% 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 ~124 days

Recently: every ~69 days

Total

21

Last Release

98d ago

Major Versions

1.0.1 → v2.0.02019-12-06

v2.x-dev → v3.0.0-beta.12026-01-13

### Community

Maintainers

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

---

Top Contributors

[![riasvdv](https://avatars.githubusercontent.com/u/3626559?v=4)](https://github.com/riasvdv "riasvdv (71 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (33 commits)")[![HarveyLF](https://avatars.githubusercontent.com/u/75250227?v=4)](https://github.com/HarveyLF "HarveyLF (3 commits)")[![robdekort](https://avatars.githubusercontent.com/u/69107412?v=4)](https://github.com/robdekort "robdekort (1 commits)")[![stefankempf](https://avatars.githubusercontent.com/u/20299885?v=4)](https://github.com/stefankempf "stefankempf (1 commits)")

### Embed Badge

![Health badge](/badges/rias-statamic-color-swatches/health.svg)

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

###  Alternatives

[statamic/ssg

Generate static sites with Statamic.

254302.4k](/packages/statamic-ssg)[statamic/seo-pro

65440.7k](/packages/statamic-seo-pro)[jacksleight/statamic-bard-texstyle

17172.5k](/packages/jacksleight-statamic-bard-texstyle)[visuellverstehen/statamic-classify

A useful helper to add CSS classes to all HTML tags generated by the bard editor.

20116.8k](/packages/visuellverstehen-statamic-classify)[marcorieser/statamic-livewire

A Laravel Livewire integration for Statamic.

2381.5k10](/packages/marcorieser-statamic-livewire)[withcandour/aardvark-seo

Save time and get your Statamic site to rank better with the SEO addon for Statamic.

13128.3k](/packages/withcandour-aardvark-seo)

PHPackages © 2026

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