react-beautiful-color


The most flexible and beautiful color picker for React. Built with compound components for maximum customization.

Why Choose This Over Others?

- 🧩 Compound Components - Compose your own layout, unlike rigid alternatives
- 🎨 Beautiful Design - Clean, modern UI that fits any design system
- ⚡ Smart Hook - useColorState preserves your input format while providing all color formats instantly
- 🛡️ Type-Safe API - Full TypeScript support with comprehensive type definitions
- 👁️ Eye Dropper Support - Built-in screen color picker (where browser supports it)
- 🎯 Format Preservation - Maintains your original color format throughout interactions
- 🌈 Universal Format Support - Hex, RGB/RGBA, HSL/HSLA, HSV/HSVA with alpha channel
- 🪶 Lightweight - Pure Tailwind CSS, no external dependencies
- 🛠️ Fully Customizable - Style and arrange components however you want
- 🔧 Rich Utilities - Comprehensive color conversion and manipulation utilities

Installation

``bash
bun add react-beautiful-color
`

📖 View Full Documentation →

Quick Start

1. Add CSS to your layout file:

`tsx
// app/layout.tsx (Next.js) or pages/_app.tsx or index.tsx
import 'react-beautiful-color/dist/react-beautiful-color.css';
`

2. Use the component:

`tsx
import { ColorPicker, useColorState } from 'react-beautiful-color';
import { Pipette } from 'lucide-react';

function App() {
const [{ colorInput, colorState }, setColor] = useColorState({ type: 'hex', value: '#3b82f6' });

return (





- ColorPicker.Saturation - Saturation and brightness selection area
- ColorPicker.Hue - Hue selection slider
- ColorPicker.Alpha - Alpha/transparency slider
- ColorPicker.EyeDropper - Eye dropper tool (browser-dependent)

📖 Learn more about ColorPicker →

$3

Intelligent state management with format preservation:

`tsx
const [{ colorInput, colorState }, setColor] = useColorState({
type: 'hsva',
h: 334, s: 100, v: 100, a: 0.5
});

// colorInput preserves your format - always HSVA!
console.log(colorInput); // { type: 'hsva', h: 334, s: 100, v: 100, a: 0.5 }

// colorState provides ALL formats instantly
console.log(colorState.hex); // "#ff6b9d"
console.log(colorState.rgb); // { r: 255, g: 107, b: 157 }
console.log(colorState.hsl); // { h: 334, s: 100, l: 71 }
console.log(colorState.alpha); // 0.5
`

📖 Learn more about useColorState →

Utilities

Powerful color conversion and manipulation utilities:

`tsx
import { hexToRgb, rgbToHex, hexToHsl, hslToHex } from 'react-beautiful-color';

// Color conversions
const rgb = hexToRgb('#ff6b9d'); // { r: 255, g: 107, b: 157 }
const hex = rgbToHex(255, 107, 157); // "#ff6b9d"
const hsl = hexToHsl('#ff6b9d'); // { h: 334, s: 100, l: 71 }
`

📖 View all utility functions →

Advanced Usage

$3

Set colors in any format with complete type safety:

`tsx
setColor({ type: 'hex', value: '#ff0000' });
setColor({ type: 'rgb', r: 255, g: 0, b: 0 });
setColor({ type: 'hsl', h: 0, s: 100, l: 50 });
setColor({ type: 'rgba', r: 255, g: 0, b: 0, a: 0.5 });
setColor({ type: 'hsla', h: 0, s: 100, l: 50, a: 0.8 });
setColor({ type: 'hsva', h: 0, s: 100, v: 100, a: 0.9 });
`

$3

Use the Color class directly for more control:

`tsx
import { useState } from 'react';
import { ColorPicker, Color } from 'react-beautiful-color';

function App() {
const [color, setColor] = useState(new Color({ type: 'hex', value: '#3b82f6' }));

// Access color properties
const rgba = color.getRgba();
const hex = color.getHex();
const hsl = color.getHsl();

return (





Documentation

📖 View Full Documentation →

- Getting Started - Installation and basic setup
- ColorPicker Component - Main component API
- useColorState Hook - Intelligent state management
- Individual Components - Saturation, Hue, Alpha components
- Utility Functions - Color conversion utilities

Support