Blossom Color Picker

A beautiful, blooming color picker for Web. Available as a standalone vanilla JS class, or as a thin React / Vue / Svelte / Angular wrapper.

https://github.com/user-attachments/assets/553ee0ff-1f52-497f-bc8f-cee9a7b91d66

Packages

| Package | Description | Version | |:--------|:------------|:--------| | @dayflow/blossom-color-picker | Vanilla JS core (zero dependencies) | 2.0.0 | | @dayflow/blossom-color-picker-react | React wrapper | 1.0.0 | | @dayflow/blossom-color-picker-vue | Vue 3 wrapper | 1.0.0 | | @dayflow/blossom-color-picker-svelte | Svelte wrapper | 1.0.0 | | @dayflow/blossom-color-picker-angular | Angular wrapper | 1.0.0 |

Installation

# Vanilla JS (core)
npm install @dayflow/blossom-color-picker

# React
npm install @dayflow/blossom-color-picker-react

# Vue 3
npm install @dayflow/blossom-color-picker-vue

# Svelte
npm install @dayflow/blossom-color-picker-svelte

# Angular
npm install @dayflow/blossom-color-picker-angular

Usage

Vanilla JS

import { BlossomColorPicker } from '@dayflow/blossom-color-picker';
import '@dayflow/blossom-color-picker/styles.css'; // <- must import css in pure JS

const picker = new BlossomColorPicker(document.getElementById('picker'), {
  onChange: (color) => console.log(color.hex),
});

// Programmatic control
picker.expand();
picker.collapse();
picker.toggle();
picker.setValue({ hue: 200, saturation: 50, alpha: 100, layer: 'outer' });
picker.setOptions({ disabled: true });
picker.destroy();

React

import { BlossomColorPicker } from '@dayflow/blossom-color-picker-react';

function App() {
  const [color, setColor] = useState({
    hue: 330, saturation: 70, alpha: 100, layer: 'outer' as const,
  });

  return (
    <BlossomColorPicker
      value={color}
      onChange={(c) => setColor(c)}
    />
  );
}

Vue 3

<script setup>
import { ref } from 'vue';
import { BlossomColorPicker } from '@dayflow/blossom-color-picker-vue';

const color = ref({
  hue: 330, saturation: 70, alpha: 100, layer: 'outer',
});

function handleChange(c) {
  color.value = c;
}
</script>

<template>
  <BlossomColorPicker :value="color" @change="handleChange" />
</template>

Svelte

<script>
  import { BlossomColorPicker } from '@dayflow/blossom-color-picker-svelte';

  let color = $state({
    hue: 330, saturation: 70, alpha: 100, layer: 'outer',
  });

  function handleChange(newColor) {
    color = newColor;
  }
</script>

<BlossomColorPicker value={color} onchange={handleChange} />

Angular

import { Component } from '@angular/core';
import {
  BlossomColorPickerComponent,
  type BlossomColorPickerColor,
} from '@dayflow/blossom-color-picker-angular';

@Component({
  selector: 'app-root',
  imports: [BlossomColorPickerComponent],
  template: `
    <blossom-color-picker
      [value]="color"
      (colorChange)="onColorChange($event)"
    />
  `,
})
export class App {
  color = { hue: 330, saturation: 70, alpha: 100, layer: 'outer' as const };

  onColorChange(c: BlossomColorPickerColor) {
    this.color = c;
  }
}

Options / Props

All packages share the same set of options. In React they are passed as JSX props; in Vue as component props (with events via @change / @collapse); in Svelte as callback props (onchange / oncollapse); in Angular as @Input() bindings (with events via (colorChange) / (colorCollapse)).

| Option | Type | Default | Description | |:----------------------|:-------------------------------------------|:----------------------------------------------------------|:---------------------------------------------------------------------------------------------------------------------------| | value | BlossomColorPickerValue | - | Controlled value of the picker. | | defaultValue | BlossomColorPickerValue | { hue: 330, saturation: 70, alpha: 50, layer: 'outer' } | Initial value for uncontrolled mode. | | colors | ColorInput[] | (Default 18-color set) | Color list, automatically sorted and distributed into layers. | | onChange | (color: BlossomColorPickerColor) => void | - | Called when color changes. Vue: @change. Svelte: onchange. Angular: (colorChange). | | onCollapse | (color: BlossomColorPickerColor) => void | - | Called when the picker collapses. Vue: @collapse. Svelte: oncollapse. Angular: (colorCollapse). | | disabled | boolean | false | Whether the picker is disabled. | | openOnHover | boolean | false | If true, opens the picker on hover instead of click. | | initialExpanded | boolean | false | Whether the picker starts expanded. | | animationDuration | number | 300 | Duration of the blooming animation in ms. | | showAlphaSlider | boolean | true | Whether to show the saturation arc slider. | | coreSize | number | 32 | Diameter of the central circle in px. | | petalSize | number | 32 | Diameter of individual color petals in px. | | showCoreColor | boolean | true | When true, the core shows the selected color while expanded. | | sliderPosition | 'top' \| 'bottom' \| 'left' \| 'right' | 'right' | Fixed position for the arc slider. | | adaptivePositioning | boolean | true | Smart Shifter: Automatically shifts the picker to stay within viewport and repositions the slider for best visibility. | | circularBarWidth | number | 12 | Thickness of the circular color bar in px. | | sliderWidth | number | 12 | Thickness of the arc slider track and handle in px. | | sliderOffset | number | 30 | Distance between the outermost petals and the arc slider in px. | | className / class | string | "" | Additional CSS class (React: className, Svelte: class). |

Vanilla JS Methods

The core class exposes these additional methods:

| Method | Description | |:-------|:------------| | setValue(value) | Set the current color value. | | getValue() | Get the current color as a BlossomColorPickerColor. | | expand() | Open the picker. | | collapse() | Close the picker. | | toggle() | Toggle open/close. | | setOptions(opts) | Update any options at runtime. | | destroy() | Remove all DOM elements and event listeners. |

Type Reference

BlossomColorPickerValue

The value object used for controlled / uncontrolled state.

| Field | Type | Description | |:---------------------|:-------