@zenuilabs/color-picker

Live demo: https://color-picker.zenui.net/

Contents

🚀 Features

📦 Installation

npm install @zenuilabs/color-picker-react

⚡ Quick Start

import React, {useState} from 'react';
import {ColorPicker} from '@zenuilabs/color-picker-react';
export default function App() {
 const [color, setColor] = useState('#3B82F6');
 return (
 <div>
 <ColorPicker
 value={color}
 format="hex"
 variant="wheel"
 onChange={(next) => setColor(next.hex)}
 />
 <p>Selected: {color}</p>
 </div>
 );
}

🧪 Usage Examples

import React, {useState} from 'react';
import {ColorPicker} from '@zenuilabs/color-picker-react';
function BasicExample() {
 const [color, setColor] = useState('#4F46E5');
 return (
 <ColorPicker
 value={color}
 format="hex"
 variant="wheel"
 onChange={(val) => setColor(val.hex)}
 />
 );
}

import React, {useState} from 'react';
import {ColorPicker} from '@zenuilabs/color-picker-react';
function BasicExample() {
 const [color, setColor] = useState('#4F46E5');
 return (
 <ColorPicker
 value={color}
 format="hex"
 inline={true} // now the picker will render as inline
 variant="wheel"
 onChange={(val) => setColor(val.hex)}
 />
 );
}

import React, {useState} from 'react';
import {ColorPicker, type ColorFormat} from '@zenuilabs/color-picker-react';
function FormatExample() {
 const [format, setFormat] = useState<ColorFormat>('rgb');
 const [value, setValue] = useState('#22C55E');
 return (
 <div>
 <ColorPicker
 value={value}
 format={format}
 variant="hue-slider"
 onChange={(val, fmt) => {
 // Persist a specific representation
 setValue(fmt === 'hex' ? val.hex : val.hex);
 // You can also handle the active format
 setFormat(fmt);
 console.log('As HEX:', val.hex);
 console.log('As RGB:', val.rgb);
 console.log('As HSL:', val.hsl);
 console.log('As HSV:', val.hsv);
 console.log('As CMYK:', val.cmyk);
 }}
 />
 </div>
 );
}

import React, {useState} from 'react';
import {ColorPicker} from '@zenuilabs/color-picker-react';
const presetColors = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#F7B267', '#A78BFA'];
function AdvancedExample() {
 const [color, setColor] = useState('#F59E0B');
 return (
 <ColorPicker
 value={color}
 format="hsl"
 variant="hue-box"
 showAlpha
 showHistory
 showFormats
 showCopyButton
 presetColors={presetColors}
 maxHistory={15}
 onChange={(val) => setColor(val.hex)}
 />
 );
}

📚 API Reference

ColorPicker

Types

export type ColorFormat = 'hex' | 'rgb' | 'hsl' | 'hsv' | 'cmyk';
export type ColorPickerVariant = 'wheel' | 'hue-slider' | 'hue-box'
export type Themes = 'light' | 'dark';
export interface ColorValue {
 hex: string;
 rgb: { r: number; g: number; b: number; a?: number };
 hsl: { h: number; s: number; l: number; a?: number };
 hsv: { h: number; s: number; v: number; a?: number };
 cmyk: { c: number; m: number; y: number; k: number };
}
export interface ColorPickerTheme {
 primary: string;
 secondary: string;
 background: string;
 surface: string;
 text: string;
 textSecondary: string;
 border: string;
 borderHover: string;
 shadow: string;
}
export interface ColorPickerProps {
 value?: string;
 format?: ColorFormat;
 variant?: ColorPickerVariant;
 theme?: Themes;
 disabled?: boolean;
 inline?: boolean;
 showColorInput?: boolean;
 showTitle?: boolean;
 title?: string
 popupClasses?: string;
 showAlpha?: boolean;
 showHistory?: boolean;
 showFormats?: boolean;
 showCopyButton?: boolean;
 presetColors?: string[];
 maxHistory?: number;
 containerClasses?: string;
 containerStyle?: React.CSSProperties;
 onChange?: (color: ColorValue, format: ColorFormat) => void;
 onFormatChange?: (format: ColorFormat) => void;
 onOpen?: () => void;
 onClose?: () => void;
 enableHueSlider?: boolean;
 brandColor?: string;
 enableFavorite?: boolean;
 showPresets?: boolean;
 enableShuffle?: boolean;
 triggerRef?: React.RefObject<HTMLElement>;
 showDefaultButton?: boolean;
}
export interface UseColorPickerOptions {
 initialColor?: string;
 initialFormat?: ColorFormat;
 showAlpha?: boolean;
 maxHistory?: number;
}

Utilities

import {
 parseColor,
 formatColorValue,
 colorToValue,
 hsvToRgb,
 defaultPresetColors,
 type ColorValue,
 type ColorFormat,
} from '@zenuilabs/color-picker-react';

🎨 Theming & Customization

<ColorPicker theme="dark"/>

<ColorPicker presetColors={['#FF6B6B', '#4ECDC4', '#45B7D1']}/>

<ColorPicker showAlpha format="rgb"/>

<ColorPicker showHistory showFavorites maxHistory={12}/>

✅ Compatibility / Requirements

❓ FAQ

🤝 Contributing

📄 License

🆘 Support

🧾 Type Definitions

import type {
 ColorFormat,
 ColorValue,
 ColorPickerVariant,
 ColorPickerTheme,
} from '@zenuilabs/color-picker-react';

🛠️ Release & Build

A Product of @zenui-labs