Hooks
useColorState
A powerful React hook for managing color state with automatic format conversion
Features
- Multi-Format Support: Handles hex, rgb, rgba, hsl, hsla, hsv, hsva
- Automatic Conversion: All formats available instantly
- Type Safety: Full TypeScript support with type-safe inputs
- Alpha Channel: Built-in transparency support
Basic Usage
Color Preview
Color Values
Hex: #ff6b9d
RGB: 255, 107, 157
HSL: 334°, 100%, 71%
Alpha: 100%
import { useColorState } from 'react-beautiful-color';
function ColorDemo() {
const { color, setColor } = useColorState({
type: 'hex',
value: '#ff6b9d'
});
return (
<div>
<div
style={{ backgroundColor: color.hex }}
className="w-full h-20 rounded"
/>
<div className="mt-4 space-y-2">
<div>Hex: {color.hex}</div>
<div>RGB: {color.rgb.r}, {color.rgb.g}, {color.rgb.b}</div>
<div>HSL: {color.hsl.h}°, {color.hsl.s}%, {color.hsl.l}%</div>
<div>Alpha: {Math.round(color.alpha * 100)}%</div>
</div>
</div>
);
}API Reference
Parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
initialColor | ColorInput | { type: 'hex', value: '#ff6b9d' } | Initial color value |
Return Value
| Property | Type | Description |
|---|---|---|
color | ColorState | Current color in all formats |
setColor | (color: ColorInput) => void | Update color from any format |
Color Formats
setColor({ type: 'hex', value: '#ff6b9d' });// RGB
setColor({ type: 'rgb', r: 255, g: 107, b: 157 });
// RGBA (with alpha)
setColor({ type: 'rgba', r: 255, g: 107, b: 157, a: 0.8 });// HSL
setColor({ type: 'hsl', h: 334, s: 100, l: 71 });
// HSLA (with alpha)
setColor({ type: 'hsla', h: 334, s: 100, l: 71, a: 0.8 });// HSV
setColor({ type: 'hsv', h: 334, s: 58, v: 100 });
// HSVA (with alpha)
setColor({ type: 'hsva', h: 334, s: 58, v: 100, a: 0.8 });