Collaboration
Project Management
Finance
Color Picker
Allows users to select a color. Modeled after the color picker in Figma.
Installation
npx love-ui@latest add color-pickerUsage
import { ColorPicker, ColorPickerSelection, ColorPickerHue, ColorPickerAlpha, ColorPickerEyeDropper, ColorPickerOutput, ColorPickerFormat } from "@/components/color-picker"<ColorPicker defaultValue="#3b82f6" onValueChange={(color) => console.log(color)}>
<ColorPickerSelection />
<ColorPickerHue />
<ColorPickerAlpha />
<ColorPickerEyeDropper />
<ColorPickerFormat>
<ColorPickerOutput />
</ColorPickerFormat>
</ColorPicker>Features
- Interactive color selection with drag and drop functionality
- Hue and alpha sliders for precise color adjustments
- EyeDropper tool for picking colors from anywhere on screen
- Multiple color format outputs (HEX, RGB, CSS, HSL)
- Real-time color preview
- Fully customizable through className and props
Examples
Default
hex
%
"use client";
import {
ColorPicker,
ColorPickerAlpha,
ColorPickerEyeDropper,
ColorPickerFormat,
ColorPickerHue,
ColorPickerOutput,
ColorPickerSelection,
} from "../../../../../packages/color-picker";
const Example = () => (
<ColorPicker className="max-w-sm rounded-md border bg-background p-4 shadow-sm">
<ColorPickerSelection />
<div className="flex items-center gap-4">
<ColorPickerEyeDropper />
<div className="grid w-full gap-1">
<ColorPickerHue />
<ColorPickerAlpha />
</div>
</div>
<div className="flex items-center gap-2">
<ColorPickerOutput />
<ColorPickerFormat />
</div>
</ColorPicker>
);
export default Example;