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

• 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

ChromePicker is exported from the core package too:

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

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

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}
    />
  );
}

Configuration Options

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

For the full shared option set, please refer to the Options page.