@palettebro/color-picker

@palettebro/color-picker

A versatile color picker component library for React applications, supporting multiple color formats and providing an intuitive interface for color selection.

Features

• Multiple color format support:
  • RGB
  • HSL
  • LCH
  • CSS (Hex, RGB, HSL)
  • Tailwind colors
  • Pantone colors
  • RAL colors

Installation

pnpm add @palettebro/color-picker

Usage

import { ColorPicker } from '@palettebro/color-picker';
import { useState } from 'react';

function App() {
  const [color, setColor] = useState('#FF0000');
  return (
    <ColorPicker
      value={color}
      onChange={(newColor) => setColor(newColor)}
    />
  );
}

export default App;

Props

ColorPicker

Prop	Type	Description
value	string	The current color value (hex, rgb, hsl, or lch format)
onChange	(value: string) => void	Callback function when color changes. Returns the new color in HEX format

Color Formats

RGB Picker

Uses RGB sliders (0-255) for Red, Green, and Blue channels.

HSL Picker

Provides HSL sliders for:

• Hue (0-360°)
• Saturation (0-100%)
• Lightness (0-100%)

LCH Picker

Offers LCH sliders for:

• Lightness (0-100)
• Chroma (0-100)
• Hue (0-360°)

CSS Color Picker

Accepts any valid CSS color format:

• Hex (#RRGGBB)
• RGB (rgb(r, g, b))
• HSL (hsl(h, s%, l%))

Tailwind Colors

Provides a grid of Tailwind CSS default colors.

Pantone Colors

Offers a selection of Pantone color swatches.

RAL Colors

Includes a collection of RAL color standards.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT