useColorState

A powerful React hook for managing color state with automatic format conversion and format preservation

Features

Multi-Format Support: Handles hex, rgb, rgba, hsl, hsla, hsv, hsva
Format Preservation: Maintains your original input format throughout color changes
Automatic Conversion: All formats (hex, rgb, hsl, hsv, alpha) available instantly via colorState
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 [{ colorInput, colorState }, setColor] = useColorState({
    type: 'hex',
    value: '#ff6b9d'
  });

  return (
    <div>
      <div 
        style={{ backgroundColor: colorState.hex }}
        className="w-full h-20 rounded"
      />
      
      <div className="mt-4 space-y-2">
        <div>Input Format: {colorInput.type}</div>
        <div>Hex: {colorState.hex}</div>
        <div>RGB: {colorState.rgb.r}, {colorState.rgb.g}, {colorState.rgb.b}</div>
        <div>HSL: {colorState.hsl.h}°, {colorState.hsl.s}%, {colorState.hsl.l}%</div>
        <div>Alpha: {Math.round(colorState.alpha * 100)}%</div>
      </div>
    </div>
  );
}

API Reference

Parameters

Parameter	Type	Default	Description
`initialColor`	`ColorInput`	`{ type: 'hex', value: '#ff6b9d' }`	Initial color value

Return Value

Returns an array with two elements:

[{ colorInput, colorState }, setColor]

Index	Property	Type	Description
`[0]`	`colorInput`	`ColorInput`	Current color in the original format you specified
`[0]`	`colorState`	`ColorState`	Current color in all formats - see ColorState Properties below
`[1]`	`setColor`	`(color: ColorInput \| Color) => void`	Update color from any format

ColorState - Access Every Color Format

The colorState object contains the current color in all supported formats. You can access any color representation instantly:

colorState.hex - Hex string like "#ff6b9d"
colorState.rgb - RGB object with r, g, b values (0-255)
colorState.rgba - RGBA object with r, g, b, a values
colorState.hsl - HSL object with h (0-360°), s, l (0-100%)
colorState.hsla - HSLA object with h, s, l, a values
colorState.hsv - HSV object with h (0-360°), s, v (0-100%)
colorState.hsva - HSVA object with h, s, v, a values
colorState.alpha - Alpha value (0-1)

Example:

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

// Access any format instantly - no conversion needed!
console.log(colorState.hex);          // "#ff6b9d"
console.log(colorState.rgb.r);        // 255
console.log(colorState.rgba.a);       // 1.0
console.log(colorState.hsl.h);        // 334
console.log(colorState.hsla.a);       // 1.0
console.log(colorState.hsv.v);        // 100
console.log(colorState.hsva.a);       // 1.0
console.log(colorState.alpha);        // 1.0

// Use directly in CSS
<div style={{ 
  backgroundColor: colorState.hex,
  color: `rgba(${colorState.rgba.r}, ${colorState.rgba.g}, ${colorState.rgba.b}, ${colorState.rgba.a})`,
  borderColor: `hsla(${colorState.hsla.h}, ${colorState.hsla.s}%, ${colorState.hsla.l}%, ${colorState.hsla.a})`
}} />

Format Preservation

One of the key features is that colorInput always maintains your original format:

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

// Even after changing colors, colorInput stays HSVA format
setColor({ type: 'hex', value: '#ff0000' });

console.log(colorInput);
// Still HSVA: { type: 'hsva', h: 0, s: 100, v: 100, a: 0.5 }

console.log(colorState.hex);
// "#ff0000"

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 });

Color Preview

Color Values

On this page