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';

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

CSS Variables

Set these on .bcp-root or any ancestor to theme the picker. Each one falls back to the default look, so leaving them unset changes nothing.

.my-dark-theme .bcp-root {
  --bcp-surface: #1e1b2e;
  --bcp-core-bg: #1e1b2e;
  --bcp-track: rgba(255, 255, 255, 0.12);
  --bcp-handle-border: #1e1b2e;
  --bcp-focus-ring-gap: #1e1b2e;
}

Vanilla JS Methods

The core class exposes these additional methods:

Features

Smart Shifter & Adaptive UI

The picker is built for all screen sizes. When adaptivePositioning is enabled:

• Viewport Shifting: If the expanded picker would overflow the screen edge (common on mobile), it automatically shifts itself into view.
• Auto Slider Positioning: The Arc Slider automatically moves to the side with the most available space (Top, Bottom, Left, or Right).
• Dark Mode Ready: The background automatically adapts to your theme, using a soft, tinted overlay of the currently selected color.

Geometric Nesting

Our "Bloom" algorithm uses trigonometric calculations to ensure:

• Zero Gaps: Petals aggressively "hug" the core and nestle deep into the "valleys" of previous layers.
• Staggered Layout: Adjacent layers are automatically staggered to create a dense, natural blossom effect regardless of the color count.

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

The React, Vue, Svelte and Angular adapters are lightweight wrappers (~2 KB each) that mount the core instance into a container element and sync framework props/events to it.

Made by Jayce Li, idea from @lichinlin.

Keyboard interaction and state compatibility

Tab enters the petal group at one focusable petal. Left/Right move counterclockwise/clockwise in the current ring; Up moves inward and Down outward, choosing the nearest angular position. Enter/Space select the focused petal. Escape closes a collapsible picker and restores trigger focus. A picker with collapsible: false stays open.

The shade slider exposes role="slider" and its current value. Arrow keys change it by 1, Shift+Arrow and PageUp/PageDown by 10; Home/End select 0/100. Increasing shade darkens the color. onChange runs during interaction; onChangeComplete runs once on pointer release/cancellation, or key release/blur, with the last proposed color. A canceled pointer gesture retains its last change. No completion is emitted when there was no change or the picker is destroyed.

In controlled mode, petal and shade interactions only propose colors through callbacks. Supply the accepted value through setValue or setOptions({ value }). Passing setOptions({ value: undefined }) returns to uncontrolled mode while preserving the current accepted value.

For compatibility, value.saturation still stores the shade position, not HSL saturation. originalSaturation stores the petal's HSL saturation. showAlphaSlider remains a deprecated name for the shade arc; use showShadeSlider in new code. The Blossom picker preserves an explicitly supplied alpha but has no opacity control; use ChromePicker for its opacity slider. The default alpha is now 100 (opaque); pass 50 explicitly to retain the previous translucent default.