A color picker that blooms open.
Click the core and the petals fan out. Pick one, then slide along the arc to make it lighter or darker. Works with React, Vue, Svelte, Angular and plain JavaScript.
Every picker on this page follows your choice. In code, set petalShape and petalStyle.
Fits the way you use color
As a toolbar button
Closed, it is a single swatch. Open it to change the text color.
The quick brown fox jumps over the lazy dog.
With your own palette
Pass your own colors and they are sorted into rings by lightness. The arc can sit on any side.
Colors
With exact values
ChromePicker adds opacity and HEX, RGBA or HSLA inputs under the bloom.
Install
One package per framework, all built on the same dependency-free core. Read the docs
npm install @dayflow/blossom-color-picker-react