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

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)).

Vanilla JS Methods

The core class exposes these additional methods:

Type Reference

BlossomColorPickerValue

The value object used for controlled / uncontrolled state.

BlossomColorPickerColor

Extends BlossomColorPickerValue — returned by onChange and onCollapse.

ColorInput

type ColorInput = string | { h: number; s: number; l: number };

Color Formats

The colors option accepts any of the following formats, and they can be mixed:

// Vanilla JS
const picker = new BlossomColorPicker(el, {
  colors: [
    '#FF6B6B',                    // hex
    'rgb(107, 203, 119)',         // rgb()
    'rgba(65, 105, 225, 0.9)',    // rgba()
    'hsl(280, 70%, 55%)',         // hsl()
    'hsl(200 80% 60%)',           // hsl() space-separated
    { h: 45, s: 90, l: 65 },     // HSL object
  ],
});

// React
<BlossomColorPicker
  colors={[
    '#FF6B6B',
    'rgb(107, 203, 119)',
    { h: 45, s: 90, l: 65 },
  ]}
/>

Project Structure

This is a monorepo with five packages:

packages/
  core/      @dayflow/blossom-color-picker          — standalone vanilla JS class
  react/     @dayflow/blossom-color-picker-react     — thin React wrapper
  vue/       @dayflow/blossom-color-picker-vue       — thin Vue 3 wrapper
  svelte/    @dayflow/blossom-color-picker-svelte    — thin Svelte 5 wrapper
  angular/   @dayflow/blossom-color-picker-angular   — thin Angular wrapper

Made by Jayce Li, idea from @lichinlin.