color-swatch

A tiny custom field for choosing a colour from predefined swatches. Ships with a sensible pastel palette, supports design tokens, and stores a value that is universally useful in APIs.

• Stores a token if present; otherwise stores the colour value (#rrggbb or transparent)
• Accepts token/value/name on read (case-insensitive, backwards compatible)
• Overrideable palette via schema options

Install

npm i strapi-plugin-color-swatch
# or
yarn add strapi-plugin-color-swatch

Add to ./config/plugins.ts if needed (Strapi usually auto-loads plugins).

Usage

In Content-Type Builder, add a field:

• Type: string
• Custom field: color (from this plugin)

Or in schema:

// ./src/api/page/content-types/page/schema.ts
{
  attributes: {
    accentColor: {
      type: 'string',
      customField: 'plugin::color-swatch.color',
      options: {
        colorOptions: [
          { name: 'Brand Blue', token: 'brand-blue', value: '#0057ff' },
          { name: 'Snow', value: '#f9fafb' }, // no token → stores hex
          { name: 'Transparent', token: 'transparent', value: 'transparent' }
        ],
      },
    },
  }
}

What gets stored

If the chosen option has a token → the field stores that token:

{ "accentColor": "brand-blue" }

If not → it stores the colour value (lowercase 6‑digit hex or "transparent"):

{ "accentColor": "#f9fafb" }

This keeps API responses directly useful on any frontend.

REST API example

Get pages with their colours:

GET /api/pages?fields[0]=title&fields[1]=accentColor

Example response:

{
  "data": [
    { "id": 2, "title": "Home", "accentColor": "brand-blue" },
    { "id": 3, "title": "Docs", "accentColor": "#f9fafb" }
  ]
}