# Chrome Picker



Chrome Picker [#chrome-picker]

The `ChromePicker` is a professional-grade color picker built for more conventional color selection workflows. It features a compact, practical layout with full support for HEX, RGBA, and HSLA color formats, making it ideal for design tools, settings panels, and admin interfaces.

Features [#features]

* **Multi-Format Support**: Easily switch between HEX, RGBA, and HSLA formats.
* **Integrated Core**: Powered by the Blossom Color Picker core for smooth color selection.
* **Alpha Support**: Built-in alpha transparency slider for precise control.
* **Multi-Framework**: Native wrappers for React, Vue, Svelte, and Angular.

Vanilla JavaScript [#vanilla-javascript]

`ChromePicker` is exported from the core package too:

<PackageTabs pkg="@dayflow/blossom-color-picker" />

```js
import { ChromePicker } from '@dayflow/blossom-color-picker';
import '@dayflow/blossom-color-picker/styles.css';

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

Usage [#usage]

Select your framework to see how to integrate `ChromePicker` into your application.

<FrameworkTabs>
  <Tab>
    ```tsx
    import { useState } from 'react';
    import { ChromePicker } from '@dayflow/blossom-color-picker-react';

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

      return (
        <ChromePicker
          value={color}
          onChange={setColor}
        />
      );
    }
    ```
  </Tab>

  <Tab>
    ```vue
    <template>
      <ChromePicker
        :value="color"
        @change="handleChange"
      />
    </template>

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

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

    function handleChange(nextColor) {
      color.value = nextColor;
    }
    </script>
    ```
  </Tab>

  <Tab>
    ```typescript
    import { Component } from '@angular/core';
    import {
      ChromePickerComponent,
      type BlossomColorPickerColor,
    } from '@dayflow/blossom-color-picker-angular';

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

      onColorChange(nextColor: BlossomColorPickerColor) {
        this.color = nextColor;
      }
    }
    ```
  </Tab>

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

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

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

    <ChromePicker
      value={color}
      onchange={handleChange}
    />
    ```
  </Tab>
</FrameworkTabs>

Configuration Options [#configuration-options]

The `ChromePicker` shares most of the same configuration options as the standard `BlossomColorPicker`.

| Option            | Type                                       | Default                                                   | Description                                                                   |
| :---------------- | :----------------------------------------- | :-------------------------------------------------------- | :---------------------------------------------------------------------------- |
| `value`           | `BlossomColorPickerValue`                  | -                                                         | Controlled value for the picker.                                              |
| `defaultValue`    | `BlossomColorPickerValue`                  | `{ hue: 330, saturation: 70, alpha: 50, layer: 'outer' }` | Initial value used when the picker is uncontrolled.                           |
| `colors`          | `ColorInput[]`                             | `DEFAULT_COLORS`                                          | Array of colors displayed as petals in the blossom section.                   |
| `onChange`        | `(color: BlossomColorPickerColor) => void` | -                                                         | Called whenever the selected color changes.                                   |
| `onCollapse`      | `(color: BlossomColorPickerColor) => void` | -                                                         | Called when the picker collapses.                                             |
| `disabled`        | `boolean`                                  | `false`                                                   | Disables user interaction.                                                    |
| `showAlphaSlider` | `boolean`                                  | `true`                                                    | Shows the alpha slider row.                                                   |
| `coreSize`        | `number`                                   | `32`                                                      | Size of the blossom core button in pixels.                                    |
| `petalSize`       | `number`                                   | `32`                                                      | Size of the blossom petals in pixels.                                         |
| `collapsible`     | `boolean`                                  | `false`                                                   | Whether the blossom section can collapse. `ChromePicker` defaults to `false`. |

For the full shared option set, please refer to the [Options](/docs/introduction/options) page.


# Getting Started



Getting Started [#getting-started]

Blossom Color Picker is a blooming, animated color picker for modern web applications. It is available as a standalone vanilla JavaScript class and as thin wrappers for React, Vue, Svelte, and Angular.

Installation [#installation]

Framework Wrappers [#framework-wrappers]

Select your framework and package manager:

<FrameworkInstall />

Vanilla JavaScript [#vanilla-javascript]

If you want to use the standalone core package directly, install `@dayflow/blossom-color-picker`:

<PackageTabs pkg="@dayflow/blossom-color-picker" />

Import Styles [#import-styles]

The React, Vue, Svelte, and Angular packages already import the shared stylesheet for you.

If you are using the standalone vanilla JavaScript package, import the styles manually:

```ts
// In App.tsx, main.ts, or your entry file
import '@dayflow/blossom-color-picker/styles.css';
```

Basic Usage [#basic-usage]

Framework Wrappers [#framework-wrappers-1]

Select your framework to see how to integrate Blossom Color Picker into your application:

<FrameworkTabs>
  <Tab>
    ```tsx
    import { useState } from '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={setColor}
        />
      );
    }
    ```
  </Tab>

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

    <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(nextColor) {
      color.value = nextColor;
    }
    </script>
    ```
  </Tab>

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

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

      onColorChange(nextColor: BlossomColorPickerColor) {
        this.color = nextColor;
      }
    }
    ```
  </Tab>

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

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

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

    <BlossomColorPicker
      value={color}
      onchange={handleChange}
    />
    ```
  </Tab>
</FrameworkTabs>

Vanilla JavaScript [#vanilla-javascript-1]

```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),
});
```

Next Steps [#next-steps]

* Read [Vanilla JavaScript](/docs/introduction/vanilla-js) for the standalone API and public methods.
* Read [Chrome Picker](/docs/introduction/chrome-picker) for the panel-style alternative UI.
* Read [Options](/docs/introduction/options) for the shared configuration reference.
* Read [Types & Colors](/docs/introduction/types-and-colors) for value objects and accepted color formats.


# Options



Options [#options]

Blossom Color Picker exposes the same core option set across the standalone package and all framework wrappers.

`value` and `defaultValue` use the `BlossomColorPickerValue` shape, while `colors` accepts `ColorInput[]`. See [Types & Colors](/docs/introduction/types-and-colors) for the full value reference.

Configuration Reference [#configuration-reference]

| Option                | Type                                       | Default                                                   | Description                                                                                                            |
| :-------------------- | :----------------------------------------- | :-------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------- |
| `value`               | `BlossomColorPickerValue`                  | -                                                         | Controlled value for the picker.                                                                                       |
| `defaultValue`        | `BlossomColorPickerValue`                  | `{ hue: 330, saturation: 70, alpha: 50, layer: 'outer' }` | Initial value used when the picker is uncontrolled.                                                                    |
| `colors`              | `ColorInput[]`                             | `DEFAULT_COLORS`                                          | Custom color set. The core automatically organizes these colors into blossom layers.                                   |
| `onChange`            | `(color: BlossomColorPickerColor) => void` | -                                                         | Called whenever the selected color changes.                                                                            |
| `onCollapse`          | `(color: BlossomColorPickerColor) => void` | -                                                         | Called when the picker collapses.                                                                                      |
| `disabled`            | `boolean`                                  | `false`                                                   | Disables user interaction.                                                                                             |
| `openOnHover`         | `boolean`                                  | `false`                                                   | Expands the picker on hover.                                                                                           |
| `initialExpanded`     | `boolean`                                  | `false`                                                   | Starts with the picker expanded.                                                                                       |
| `animationDuration`   | `number`                                   | `300`                                                     | Duration of the bloom animation in milliseconds.                                                                       |
| `showAlphaSlider`     | `boolean`                                  | `true`                                                    | Shows the outer arc slider around the petals.                                                                          |
| `coreSize`            | `number`                                   | `32`                                                      | Diameter of the center core button in pixels.                                                                          |
| `petalSize`           | `number`                                   | `32`                                                      | Diameter of each petal in pixels.                                                                                      |
| `showCoreColor`       | `boolean`                                  | `true`                                                    | Displays the selected color in the core.                                                                               |
| `sliderPosition`      | `'top' \| 'bottom' \| 'left' \| 'right'`   | `undefined`                                               | Fixed position for the arc slider. If omitted, the picker starts from the right side and may reposition automatically. |
| `adaptivePositioning` | `boolean`                                  | `true`                                                    | Automatically shifts the expanded picker and arc slider to keep them visible inside the viewport.                      |
| `circularBarWidth`    | `number`                                   | `12`                                                      | Width of the circular hue bar in pixels.                                                                               |
| `sliderWidth`         | `number`                                   | `12`                                                      | Width of the outer arc slider track and handle in pixels.                                                              |
| `sliderOffset`        | `number`                                   | `30`                                                      | Space between the petals and the outer arc slider.                                                                     |
| `collapsible`         | `boolean`                                  | `true`                                                    | Allows the picker to collapse.                                                                                         |

`ChromePicker` uses the same options, except `collapsible` defaults to `false`.

Framework Event Names [#framework-event-names]

* **React**: `onChange` and `onCollapse`
* **Vue**: `@change` and `@collapse`
* **Svelte**: `onchange` and `oncollapse` callback props
* **Angular**: `(colorChange)` and `(colorCollapse)`

Returned Color Object [#returned-color-object]

The `onChange` and `onCollapse` callbacks receive a `BlossomColorPickerColor` object:

```ts
interface BlossomColorPickerColor {
  hex: string;
  hsl: string;
  hsla: string;
  rgb: string;
  rgba: string;
  r: number;
  g: number;
  b: number;
  hue: number;
  saturation: number;
  lightness: number;
  alpha: number;
  layer: 'inner' | 'outer';
}
```

Custom Colors [#custom-colors]

You can provide your own set of colors to display as petals:

```tsx
<BlossomColorPicker
  colors={[
    '#FF6B6B',
    'rgb(107, 203, 119)',
    'rgba(65, 105, 225, 0.9)',
    'hsl(280, 70%, 55%)',
    { h: 45, s: 90, l: 65 },
  ]}
/>
```

For the full value shape and supported `colors` formats, see [Types & Colors](/docs/introduction/types-and-colors).


# Types & Colors



Types & Colors [#types--colors]

This page describes the value objects used by Blossom Color Picker and the supported formats for custom colors.

`BlossomColorPickerValue` [#blossomcolorpickervalue]

Use this object for controlled `value` props and `defaultValue`:

| Field                | Type                 | Description                                 |
| :------------------- | :------------------- | :------------------------------------------ |
| `hue`                | `number`             | Hue angle from `0` to `360`.                |
| `saturation`         | `number`             | Arc slider position from `0` to `100`.      |
| `lightness`          | `number?`            | Optional HSL lightness override.            |
| `originalSaturation` | `number?`            | Intrinsic saturation of the selected petal. |
| `alpha`              | `number`             | Alpha from `0` to `100`.                    |
| `layer`              | `'inner' \| 'outer'` | The petal layer currently selected.         |

`BlossomColorPickerColor` [#blossomcolorpickercolor]

This object is returned by `onChange`, `onCollapse`, and `getValue()`:

| Field        | Type                 | Description                                |
| :----------- | :------------------- | :----------------------------------------- |
| `hex`        | `string`             | Hex color string, for example `"#6586E5"`. |
| `hsl`        | `string`             | HSL string.                                |
| `hsla`       | `string`             | HSLA string.                               |
| `rgb`        | `string`             | RGB string.                                |
| `rgba`       | `string`             | RGBA string.                               |
| `r`          | `number`             | Red channel value.                         |
| `g`          | `number`             | Green channel value.                       |
| `b`          | `number`             | Blue channel value.                        |
| `hue`        | `number`             | Hue angle from `0` to `360`.               |
| `saturation` | `number`             | Arc slider position from `0` to `100`.     |
| `lightness`  | `number`             | Computed lightness value.                  |
| `alpha`      | `number`             | Alpha from `0` to `100`.                   |
| `layer`      | `'inner' \| 'outer'` | The selected petal layer.                  |

Alpha Scale [#alpha-scale]

Yes, the documented `alpha` range of `0-100` is correct for the public value objects used by the picker.

* `value.alpha`, `defaultValue.alpha`, and callback payloads all use a `0-100` scale
* Generated `rgba` and `hsla` strings are normalized to CSS-style `0-1` alpha values

`ColorInput` [#colorinput]

The `colors` option accepts either CSS color strings or HSL objects:

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

Supported Color Formats [#supported-color-formats]

The parser currently accepts:

* Hex strings in `#RRGGBB` format
* `rgb(...)`
* `rgba(...)`
* `hsl(...)`
* `hsla(...)`
* HSL objects like `{ h: 45, s: 90, l: 65 }`

Custom Color Example [#custom-color-example]

```tsx
<BlossomColorPicker
  colors={[
    '#FF6B6B',
    'rgb(107, 203, 119)',
    'rgba(65, 105, 225, 0.9)',
    'hsl(280, 70%, 55%)',
    'hsla(200, 80%, 60%, 0.7)',
    { h: 45, s: 90, l: 65 },
  ]}
/>
```

How Custom Colors Are Arranged [#how-custom-colors-are-arranged]

When you pass a flat `colors` array, the core package automatically:

* Sorts colors by lightness so lighter tones can sit closer to the center
* Splits the list into dense blossom layers
* Sorts each layer by hue for a rainbow-like flow around the picker

Useful Utility Exports [#useful-utility-exports]

The core package also exports a few helpers for advanced integrations:

* `DEFAULT_COLORS`
* `INNER_COLORS`
* `OUTER_COLORS`
* `hexToHsl`
* `hslToHex`
* `rgbToHsl`
* `parseColor`
* `lightnessToSliderValue`
* `sliderValueToLightness`


# Vanilla JavaScript



Vanilla JavaScript [#vanilla-javascript]

The standalone core package gives you direct access to the `BlossomColorPicker` and `ChromePicker` classes without any framework wrapper.

Install the Core Package [#install-the-core-package]

<PackageTabs pkg="@dayflow/blossom-color-picker" />

Import the Shared Stylesheet [#import-the-shared-stylesheet]

Framework wrappers import the shared stylesheet for you, but the standalone package expects you to import it yourself:

```ts
import '@dayflow/blossom-color-picker/styles.css';
```

Basic Usage [#basic-usage]

```js
import { BlossomColorPicker } from '@dayflow/blossom-color-picker';
import '@dayflow/blossom-color-picker/styles.css';

const root = document.getElementById('picker');

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

Programmatic Control [#programmatic-control]

The core class exposes methods you can call at runtime:

| Method                | Description                                                   |
| :-------------------- | :------------------------------------------------------------ |
| `setValue(value)`     | Set the current value programmatically.                       |
| `getValue()`          | Read the current color as a `BlossomColorPickerColor` object. |
| `expand()`            | Expand the picker.                                            |
| `collapse()`          | Collapse the picker.                                          |
| `toggle()`            | Toggle between expanded and collapsed state.                  |
| `setOptions(options)` | Update any supported options after initialization.            |
| `destroy()`           | Remove DOM nodes and event listeners created by the picker.   |

Runtime Example [#runtime-example]

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

const picker = new BlossomColorPicker(document.getElementById('picker'));

picker.expand();
picker.setValue({
  hue: 200,
  saturation: 50,
  alpha: 100,
  layer: 'outer',
});

picker.setOptions({
  disabled: true,
  openOnHover: false,
});
```

Using `ChromePicker` Without a Wrapper [#using-chromepicker-without-a-wrapper]

The same core package also exports the more traditional panel-style picker:

```js
import { ChromePicker } from '@dayflow/blossom-color-picker';
import '@dayflow/blossom-color-picker/styles.css';

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

Related Reference [#related-reference]

* See [Options](/docs/introduction/options) for the shared option list.
* See [Types & Colors](/docs/introduction/types-and-colors) for value shapes and supported color formats.