# @sanity/color-input

> Color input

Latest version **6.1.8** (published 2026-10-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install @sanity/color-input
pnpm add @sanity/color-input
yarn add @sanity/color-input
bun add @sanity/color-input
```

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 6.1.8 |
| Published | 2026-10-13 |
| First published | 2018-01-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM |
| Node | >=20.19 <22 \|\| >=22.12 |
| Dependencies | 5 |
| Unpacked size | 161.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| Author | Sanity.io <hello@sanity.io> |
| Maintainers | sanity-svc.npm, sanity-io |
| Keywords | cms, color-input, content, headless, realtime, sanity, sanity-plugin |

## Links

- npm: https://www.npmjs.com/package/@sanity/color-input
- Repository: https://github.com/sanity-io/plugins
- Homepage: https://github.com/sanity-io/plugins/tree/main/plugins/%40sanity/color-input#readme
- Issues: https://github.com/sanity-io/plugins/issues
- npm.io page: https://npm.io/package/@sanity/color-input

## Dependencies (5)

- [lodash-es](https://npm.io/package/lodash-es.md) ^4.18.1
- [@sanity/ui](https://npm.io/package/@sanity/ui.md) ^4.4.5
- [tinycolor2](https://npm.io/package/tinycolor2.md) ^1.6.0
- [@sanity/icons](https://npm.io/package/@sanity/icons.md) ^5.2.3
- [@vanilla-extract/dynamic](https://npm.io/package/@vanilla-extract/dynamic.md) ^2.1.5

## Alternatives

- [@opentelemetry/exporter-zipkin](https://npm.io/package/@opentelemetry/exporter-zipkin.md) — 14.8M weekly downloads
- [pusher-js](https://npm.io/package/pusher-js.md) — 2.0M weekly downloads
- [browserify](https://npm.io/package/browserify.md) — 1.7M weekly downloads
- [sqs-consumer](https://npm.io/package/sqs-consumer.md) — 1.7M weekly downloads
- [@sanity/eventsource](https://npm.io/package/@sanity/eventsource.md) — 930.8K weekly downloads

## Recent versions

- 6.1.8 (latest) — 2026-10-13
- 4.0.1-canary.0 (canary) — 2024-09-13
- 2.36.1 (studio-v2) — 2023-07-17
- 3.0.0-v3-studio.12 (studio-v3) — 2022-11-12
- 2.34.3-cdr-ga-4.23 (cdr-ga-4) — 2022-10-20
- 2.34.3-cdr-ga-2.19 (cdr-ga-2) — 2022-10-20
- 2.34.3-cdr-ga.20 (cdr-ga) — 2022-10-20
- 2.34.3-cdr-preview.20 (cdr-preview) — 2022-10-20
- 2.34.2-empty-template-cli.0 (empty-template-cli) — 2022-10-13
- 2.33.4-shopify.8 (shopify) — 2022-09-22
- 2.33.4-performance-opts.16 (performance-opts) — 2022-09-22
- 2.33.3-edge.8 (edge) — 2022-09-20
- 2.30.7-findability.87 (findability) — 2022-09-20
- 2.33.1-performance-opts-doc-pane.2 (performance-opts-doc-pane) — 2022-09-12
- 2.32.1-next.22 (next) — 2022-09-08
- … 657 more at https://npm.io/package/@sanity/color-input/versions

## README

# @sanity/color-input

## What is it?

Color input plugin for [Sanity](https://sanity.io/) that stores selected colors in hex, hsl, hsv and rgb format.

![Color input in the Studio](https://github.com/user-attachments/assets/070a3718-33fc-47f7-94fb-93988902e81e)

## Installation

```
npm install --save @sanity/color-input
```

or

```
yarn add @sanity/color-input
```

## Usage

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

```js
import {colorInput} from '@sanity/color-input'

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

Now you can use the `color` type in your schema types:

```js
// [...]
{
  fields: [
    // [...]
    {
      name: 'favoriteColor',
      title: 'Favorite color',
      type: 'color',
    },
  ]
}
```

## Options

### Disable alpha

To disable the alpha option, set `disableAlpha` to `true`:

```js
// ...fields...
{
  name: 'favoriteColor',
  title: 'Color no-alpha',
  type: 'color',
  options: {
    disableAlpha: true
  }
}
```

Which will render accordingly:

![This is an image](https://github.com/user-attachments/assets/f7095cbb-8014-4aef-bb95-58f6aa25672b)

### Color list

To add list of predefined selectable color swatches for the user to choose from use `colorList`.
The color picker is a small fork of [`react-color`](https://github.com/casesandberg/react-color), so `colorList` accepts any of its supported [color formats](https://casesandberg.github.io/react-color/#api-color).

```js
// ...fields...
{
  name: 'favoriteColor',
  title: 'Color with list',
  type: 'color',
  options: {
    colorList: [
      '#FF6900',
      { hex: '#FCB900' },
      { r: 123, g: 220, b: 181 },
      { r: 0, g: 208, b: 132, a: 0.5 },
      { h: 203, s: 95, l: 77, a: 1 },
      { h: 202, s: 95, l: 46, a: 0.5 },
      { h: 345, s: 43, v: 97 },
      { h: 344, s: 91, v: 92, a: 0.5 },
    ]
  }
}
```

Which will render accordingly:

![This is an image](https://github.com/user-attachments/assets/f2a35da3-8944-46b3-a626-9aa870800b65)

## Data model

```js
{
  _type: 'color',
  hex: '#29158a',
  alpha: 0.9,
  hsl: {
    _type: 'hslaColor',
    h: 249.99999999999994,
    s: 0.7328000000000001,
    l: 0.313,
    a: 0.9
  },
  hsv: {
    _type: 'hsvaColor',
    h: 249.99999999999994,
    s: 0.8457987072945522,
    v: 0.5423664,
    a: 0.9
  },
  rgb: {
    _type: 'rgbaColor',
    r: 41
    g: 21,
    b: 138,
    a: 0.9
  }
}
```

## License

MIT-licensed. See LICENSE.

---
_Source: https://npm.io/package/@sanity/color-input · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._