https://github.com/bpmn-io/bpmn-js-color-picker
A simple color picker for your BPMN elements.
https://github.com/bpmn-io/bpmn-js-color-picker
bpmn-js
Last synced: 14 days ago
JSON representation
A simple color picker for your BPMN elements.
- Host: GitHub
- URL: https://github.com/bpmn-io/bpmn-js-color-picker
- Owner: bpmn-io
- License: mit
- Created: 2016-09-16T16:42:01.000Z (over 8 years ago)
- Default Branch: main
- Last Pushed: 2025-04-17T19:47:05.000Z (17 days ago)
- Last Synced: 2025-04-18T09:48:01.358Z (16 days ago)
- Topics: bpmn-js
- Language: JavaScript
- Homepage:
- Size: 672 KB
- Stars: 26
- Watchers: 10
- Forks: 16
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-bpmn-io - bpmn-js-color-picker - Color your BPMN elements via the context pad (Extensions)
README
# bpmn-js Color Picker
[](https://github.com/bpmn-io/bpmn-js-color-picker/actions/workflows/CI.yml)
This [bpmn-js](https://github.com/bpmn-io/bpmn-js) extension adds a simple color picker to an elements context pad. Colors are serialized to BPMN 2.0 according to the [BPMN in Color proposal](https://github.com/bpmn-miwg/bpmn-in-color).
## Features
* Add color picker to the context pad
* Color single and multiple elements
* Serialize colors to BPMN 2.0
* Render colors (built-in `[email protected]+`)
## Use Extension
Fetch `bpmn-js-color-picker` as a dependency:
```
npm install bpmn-js-color-picker --save
```
Extend your BPMN modeler with colors:
```javascript
import BpmnModeler from 'bpmn-js/lib/Modeler';
import BpmnColorPickerModule from 'bpmn-js-color-picker';
const modeler = new BpmnModeler({
additionalModules: [
BpmnColorPickerModule
]
});
```
Add diagram-js, bpmn-font and [color picker](./colors/color-picker.css) stylesheets:
```html
```
## Build Demo
To run the live demo in the [`./example` directory](./example) (as shown in the screenshot above) execute:
```
npm start
```
## Useful Resources
* [Introduction to bpmn-js](https://bpmn.io/toolkit/bpmn-js/walkthrough/)
* [Colors are here](https://bpmn.io/blog/posts/2016-colors-bpmn-js.html)