Sanity plugin color input
A beautifully designed color picker for Sanity Studio (v3, v4, and v5). Pick solid colors or build linear gradients, store values in HEX, RGBA, and HSL, and give editors one-click copy — with minimal configuration required.
Solid Color Picker
A highly intuitive color picker for Sanity Studio that supports HEX, RGB, and HSL color formats.
Gradient Color Picker
Create stunning gradients with multiple colors, adjustable angles, and real-time preview in a user-friendly interface.
Visual color picker
A sleek, modern user interface for precise color selection.
Gradient support
Toggle between solid colors and linear gradients with configurable angle.
Rich output formats
Stores HEX, RGBA, and HSL for solid colors, full CSS linear-gradient() strings for gradients.
Customizable presets
Ship your brand palette or use the built-in presets; override per field.
One-click copy
Editors can copy any format (HEX, RGBA, HSL, CSS gradient) instantly.
Portable Text support
Drop it into rich text annotations as a highlight color.
Get started in minutes
Follow these simple steps to add the color picker plugin to your Sanity Studio.
Installation
Install the plugin using your preferred package manager.
npm install sanity-plugin-color-input
# or
yarn add sanity-plugin-color-input
# or
pnpm add sanity-plugin-color-inputSetup
Register the plugin in your sanity.config.ts (or .js):
import { defineConfig } from 'sanity'
import { customColorPicker } from 'sanity-plugin-color-input'
export default defineConfig({
// ...other config
plugins: [
customColorPicker(),
],
})Basic Usage
Once the plugin is registered, use type: 'color' in any document schema:
export default {
name: 'myDocument',
title: 'My Document',
type: 'document',
fields: [
{
name: 'brandColor',
title: 'Brand Color',
type: 'color',
},
],
}Custom Presets
Override the built-in presets with your own brand colors using the colors option. Accepts solid hex strings and gradient objects:
{
name: 'brandColor',
title: 'Brand Color',
type: 'color',
options: {
colors: [
// Solid colors
'#1A1A1A',
'#F5F5F5',
'#0047FF',
// Gradient preset: two colors + angle in degrees
{ hex: '#E91E63', hex2: '#2196F3', angle: 45 },
],
},
}Solid Color
{
"_type": "color",
"hex": "#f44336",
"rgba": "rgba(244, 67, 54, 1)",
"hsl": "hsl(4, 90%, 58%)",
"isGradient": false
}Gradient
{
"_type": "color",
"hex": "#f44336",
"hex2": "#000000",
"angle": 180,
"rgba": "rgba(244, 67, 54, 1)",
"hsl": "hsl(4, 90%, 58%)",
"isGradient": true,
"css": "linear-gradient(180deg, #f44336, #000000)"
}Use isGradient to branch your rendering logic on the frontend. For gradients, the css field gives you a ready-to-use CSS value — pass it directly to a background or background-image property.
Highlight Annotation Schema
Add a color field inside a Portable Text marks.annotations entry to let editors apply highlight colors to text selections:
export default {
name: 'richText',
title: 'Rich Text',
type: 'array',
of: [
{
type: 'block',
marks: {
annotations: [
{
name: 'highlight',
type: 'object',
title: 'Highlight',
fields: [
{
name: 'color',
type: 'color',
title: 'Color',
},
],
},
],
},
},
],
}Stored Portable Text Output
When an editor applies a highlight, the color data is stored within the markDefs array:
{
"_key": "2ef685a16342",
"_type": "block",
"children": [
{
"_key": "4b929316bf10",
"_type": "span",
"marks": ["f9bfae1005c4"],
"text": "Learning Platform"
}
],
"markDefs": [
{
"_key": "f9bfae1005c4",
"_type": "highlight",
"color": {
"_type": "color",
"hex": "#cddc39",
"hsl": "hsl(66, 70%, 54%)",
"isGradient": false,
"rgba": "rgba(205, 220, 57, 1)"
}
}
]
}React — Solid or Gradient Background
Render a color swatch that handles both solid and gradient values.
export interface SanityColor = {
_type: 'color'
hex: string
rgba: string
hsl: string
isGradient: boolean
hex2?: string
angle?: number
css?: string
}
function ColorSwatch({ color }: { color: SanityColor }) {
const background = color.isGradient ? color.css : color.hex
return (
<div style={{ background, width: 48, height: 48, borderRadius: 8 }} />
)
}Groq Query
Use GROQ projections to fetch color data efficiently from your Sanity dataset.
// Gradient-aware
*[_type == "myDocument"][0] {
brandColor {
_type,
angle,
css,
hex,
hex2,
hsl,
isGradient,
rgba
}
}SanityColor Type
Use this type to strongly type your color field values in frontend code.
export type SanityColor = {
_type: 'color'
hex: string
rgba: string
hsl: string
isGradient: boolean
hex2?: string
angle?: number
css?: string
}Sanity Studio
Node.js
Common Questions
Everything you need to know about the color picker plugin and how to use it in your Sanity Studio projects.
The color input plugin works seamlessly with Sanity Studio v3, v4, and v5. It's fully compatible with all recent versions and will continue to be updated as new Sanity releases come out.
You can easily override the default color presets by providing your own colors array in the field options. This is perfect for restricting choices to your brand-specific color palettes and ensuring consistency across your content.
The plugin supports HEX, RGBA, and HSL formats for solid colors. For gradients, it provides complete CSS linear-gradient strings with angle support, making it easy to use in any web project.
Absolutely! The plugin includes full gradient support. Toggle between solid colors and linear gradients, customize angles, and get the complete CSS gradient code with one click copy functionality.
Yes! The plugin includes one-click copy functionality for HEX, RGBA, HSL, and CSS gradient values. Your selected color values are instantly copied to the clipboard for easy pasting into your projects.
The sanity-plugin-color-input is open source under the MIT license. You can freely use, modify, and distribute it in your projects. Check the GitHub repository for the full license details.
Ready to add color to your Sanity Studio?
The color picker plugin is free, open source, and production-ready. Install it today and streamline your content creation workflow.