https://github.com/felixboet/netlify-cms-widget-colorpicker
a color picker widget for Netlify CMS, supports HEX color codes, RGBA, color names and custom values
https://github.com/felixboet/netlify-cms-widget-colorpicker
color color-picker html-color netlify-cms netlify-cms-widgets
Last synced: 6 months ago
JSON representation
a color picker widget for Netlify CMS, supports HEX color codes, RGBA, color names and custom values
- Host: GitHub
- URL: https://github.com/felixboet/netlify-cms-widget-colorpicker
- Owner: felixboet
- Created: 2020-08-05T13:21:59.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2020-10-26T14:48:20.000Z (about 5 years ago)
- Last Synced: 2025-04-24T15:42:50.939Z (7 months ago)
- Topics: color, color-picker, html-color, netlify-cms, netlify-cms-widgets
- Language: JavaScript
- Homepage: https://github.com/felixboet/netlify-cms-widget-colorpicker
- Size: 837 KB
- Stars: 8
- Watchers: 1
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-decap-cms - netlify-cms-widget-colorpicker - A color picker widget for Netlify CMS, supports HEX color codes, RGBA, color names and custom values. (Custom Widget)
README
# netlify-cms-widget-colorpicker
A highly customizable color picker widget for Netlify CMS that supports HEX color codes, alpha channels via RGBA, color names and custom values. Choose from seven different color pickers.
**A basic version of this widget with the chrome picker [is now part of Netlify CMS](https://www.netlifycms.org/docs/widgets/#color), so you just need this custom widget, if you want to use any of the other color pickers.**
[-> check out the demo here](https://colorpicker-widget.netlify.app/demo)
## Install
As an npm package:
```shell
npm install --save netlify-cms-widget-colorpicker
```
```js
import { ColorControl, ColorPreview } from "netlify-cms-widget-colorpicker";
CMS.registerWidget("color", ColorControl, ColorPreview);
```
## How to use
Add to your Netlify CMS configuration:
```yaml
fields:
- { name: , label: , widget: color }
```
## Configuration
#### Color Picker
The default color picker is the `chrome` picker, change it via the `picker` options
```yaml
fields:
- { name: , label: , widget: color, picker: github }
```
The following options are available:
```
block
chrome
compact
github
sketch
swatches
twitter
```
#### Allow Input
Allow raw text input in the string field:
```
allowInput: true
```
#### Preset Colors
set the preset colors for the `block`, `compact`, `github`, `sketch`, `twitter` picker:
```
presetColors: [ "#F44336", "#9C27B0", "#3F51B5", ...],
```
for the `sketch` picker, they may also be described as an array of objects with color and title properties:
```
[{ color: '#f00', title: 'red' }]
```
for the `swatches` picker set the preset colors as an array of color groups, each with an array of colors:
```
presetColors: [
["#FF8A80", "#FF5252", "#FF1744", "#D50000"],
["#FF80AB", "#FF4081", "#F50057", "#C51162"],
["#EA80FC", "#E040FB", "#D500F9", "#AA00FF"],
["#B388FF", "#7C4DFF", "#651FFF", "#6200EA"],
...
],
```
#### Enable Alpha
enable the alpha-slider for `chrome` and `sketch` picker, default is `false`:
```
enableAlpha: true
```
#### Picker Width
only for `block`, `github`, `sketch`, `swatches`, `twitter` picker
```
pickerWidth: "500px"
```
#### Picker Height
only for `swatches` picker
```
pickerHeight: "300px"
```
## Support
For help with this widget, open an [issue](https://github.com/felixboet/netlify-cms-widget-colorpicker/issues)
## Development
Fork the repo, pull the code to your local computer and install dependencies:
```shell
npm install
```
To run a copy of Netlify CMS with the widget loaded for development, use the start script:
```shell
npm start
```
#### Publish
change version in package.json
```shell
npm run build
npm publish
```
## License
MIT Licensed. Copyright Felix Böttcher
[](https://app.netlify.com/sites/colorpicker-widget/deploys)
Based on the awesome [react-color](https://casesandberg.github.io/react-color/)