Color Select - A color palette plugin for Sanity

Allow users to select pre-determined colours via a color palette in Sanity.

This is a Sanity Studio v3 plugin, the plugin will not work versions 2 and lower.

Installation

// NPM
npm install @hatchd/sanity-plugin-color-select

// Yarn
yarn add @hatchd/sanity-plugin-color-select

Usage

Add it as a plugin in sanity.config.ts (or .js):

import {defineConfig} from 'sanity'
import {ColorSelect} from '@hatchd/sanity-plugin-color-select'

export default defineConfig({
  //...
  plugins: [ColorSelect()],
})

And create a field in Sanity. It returns the value property of the selected color.

export const backgroundColors = [
  {
    title: 'Green',
    hex: '#8ac926',
    value: 'primary',
  },
  {
    title: 'Blue',
    hex: '#57c4e5',
    value: 'secondary',
  },
  {
    title: 'Red',
    hex: '#d62828',
    value: 'tertiary',
  },
];

defineField({
    name: 'background',
    description: 'Controls the background colour for this module',
    type: 'colorSelect',
    options: {
      list: backgroundColors,
      labels: false,
    },
    initialValue: 'primary',
  }),

Options

| Property | Description | | ---------------- | ----------------------------------------------------------------------------------------------------------------------------------- | | list (array) | A array of objects containing the properties title, hex and value. hex is used if the value isn't a color hex code. | | layout (string) | buttons and dropdown. Default: buttons | | labels (boolean) | While using the buttons layout, display labels or not. Default: true |

License

MIT © Grant Deelstra and Hatchd