A color picker widget for Netlify CMS that supports HEX color codes, alpha channels via RGBA, color names and custom values.

-> check out the demo here

As an npm package:

npm install --save netlify-cms-widget-colorpicker

import { ColorControl, ColorPreview } from "netlify-cms-widget-colorpicker"; CMS.registerWidget("color", ColorControl, ColorPreview);

Add to your Netlify CMS configuration:

fields: - { name: <fieldname>, label: <fieldlabel>, widget: color }

The default color picker is the "chrome picker", you can change it via the options

fields: - { name: <fieldname>, label: <fieldlabel>, widget: color, picker: github }

The following options are available:

block chrome compact github sketch swatches twitter 

for the block, compact, github, sketch, twitter picker, you can set the preset colors

colors: [ "#F44336", "#9C27B0", "#3F51B5", ...], 

for the swatches picker, you can set the preset colors as an array of color groups, each with an array of colors

colors: [ ["#FF8A80", "#FF5252", "#FF1744", "#D50000"], ["#FF80AB", "#FF4081", "#F50057", "#C51162"], ["#EA80FC", "#E040FB", "#D500F9", "#AA00FF"], ["#B388FF", "#7C4DFF", "#651FFF", "#6200EA"], ... ], 

for the chrome and sketch picker, you can disable the slider for the alpha value

disableAlpha: true 

Color Swatches / Presets can't be customized yet, will be added soon

For help with this widget, open an issue

Fork the repo, pull the code to your local computer and install dependencies:

npm install

To run a copy of Netlify CMS with the widget loaded for development, use the start script:

npm start

MIT Licensed. Copyright Felix Böttcher

Based on the awesome react-color