Show navigationHide navigation

Color

Native color picker with hex output. Use for brand colors, category badges, theme accents, and any design token that editors should control.

Usage#

typescriptbrandColor: { label: 'Brand Color', format: 'color' },

Options#

Option	Type	Default	Description
`required`	`boolean`	`false`	Must have a color selected
`allowInput`	`boolean`	`false`	Show a text input synced with the color picker for manual hex entry
`hint`	`string`	—	Helper text below the field

Example: Category badges with custom colors#

Schema — content categories where editors choose the badge color:

typescript// cms/octocms.config.ts
category: {
  label: 'Category',
  hasMany: true,
  fields: {
    name: { label: 'Name', format: 'string', entryTitle: true, required: true },
    color: {
      label: 'Badge Color',
      format: 'color',
      required: true,
      allowInput: true,
      hint: 'Pick a color for the category badge on the site.',
    },
  },
},

Query + render:

tsx// src/app/blog/page.tsx
import { query } from 'cms/__generated__/query';

export default async function BlogPage() {
  const categories = await query('category').toArray();

  return (
    <nav>
      {categories.map((cat) => (
        <span
          key={cat.sys.id}
          style={{
            backgroundColor: cat.fields.color,
            color: '#fff',
            padding: '0.25rem 0.75rem',
            borderRadius: '9999px',
          }}
        >
          {cat.fields.name}
        </span>
      ))}
    </nav>
  );
}

Storage#

Lowercase #rrggbb hex string. Shorthand #rgb is expanded on save.

json{ "color": "#3b82f6" }

Optional fields without a value are stored as empty/null.

Query result#

Returned as-is — string in #rrggbb format. Use directly in style attributes, CSS variables, or SVG fills.

URL

JSON