Color Input

A flexible color picker component that accepts multiple color formats including hex strings, numeric hex values, and CSS color names.

Props

Prop	Type	Default	Description
`value`	`string \| number`	-	Color value in any supported format
`defaultValue`	`string \| number`	-	Initial color value
`onValueChange`	`(hexColor: string) => void`	-	Called with normalized hex string (without #) when color changes
`onChange`	`(e: ChangeEvent) => void`	-	Native change event handler
`className`	`string`	-	Additional CSS classes

Basic Usage

Color: #3b82f6

const [color, setColor] = useState('3b82f6');

<ColorInput value={color} onValueChange={setColor} />

Supported Color Formats

The ColorInput component normalizes various color formats to a 6-character hex string.

String Formats

Hash prefix (#ff5733)

No prefix (ff5733)

0x prefix (0xff5733)

Shorthand (#f53)

RGB notation

// Hash prefix
<ColorInput value="#ff5733" onValueChange={setColor} />

// No prefix
<ColorInput value="ff5733" onValueChange={setColor} />

// 0x prefix (common in graphics programming)
<ColorInput value="0xff5733" onValueChange={setColor} />

// Shorthand (#abc expands to #aabbcc)
<ColorInput value="#f53" onValueChange={setColor} />

// RGB functional notation
<ColorInput value="rgb(255, 87, 51)" onValueChange={setColor} />

Numeric Hex Values

The ColorInput supports JavaScript numeric hex literals, which is useful when working with graphics libraries like Three.js or game engines that use numeric color values.

0xRRGGBB format (0xff5733)

0xRRGGBBAA format (0x3b82f6ff) - alpha ignored

// 24-bit RGB (0xRRGGBB)
const [color1, setColor1] = useState(0xff5733);
<ColorInput value={color1} onValueChange={setColor1} />

// 32-bit RGBA (0xRRGGBBAA) - alpha channel is stripped
const [color2, setColor2] = useState(0x3b82f6ff);
<ColorInput value={color2} onValueChange={setColor2} />

RGBA Values (Alpha Stripped)

When providing colors with alpha channels (8-digit hex or 0xRRGGBBAA), the alpha is stripped since HTML color inputs only support RGB.

#RRGGBBAA string (#ff573380 → ff5733)

0xRRGGBBAA string

0xRRGGBBAA numeric

// 8-digit hex string (alpha stripped)
<ColorInput value="#ff573380" />  // Displays as #ff5733

// 0x prefixed with alpha
<ColorInput value="0xff573380" /> // Displays as #ff5733

// Numeric with alpha
<ColorInput value={0xff573380} /> // Displays as #ff5733

With Form Layout

Primary Color

Background

const [color, setColor] = useState('10b981');

<FormLayout orientation="label-left">
  <Label size="sm">Primary Color</Label>
  <ColorInput value={color} onValueChange={setColor} />
</FormLayout>

<FormLayout orientation="label-top">
  <Label size="sm">Background</Label>
  <ColorInput value={color} onValueChange={setColor} />
</FormLayout>

Integration with Graphics Libraries

The numeric hex format is particularly useful when integrating with Three.js or similar libraries:

import * as THREE from 'three';

function SceneControls() {
  // Three.js uses numeric hex colors
  const [meshColor, setMeshColor] = useState(0x00ff00);

  // Apply to Three.js material
  const material = new THREE.MeshBasicMaterial({ color: meshColor });

  return (
    <ColorInput
      value={meshColor}
      onValueChange={(hex) => {
        // Convert back to number for Three.js
        setMeshColor(parseInt(hex, 16));
      }}
    />
  );
}

Format Conversion Reference

Input Format	Example	Normalized Output
`#RRGGBB`	`#ff5733`	`ff5733`
`RRGGBB`	`ff5733`	`ff5733`
`0xRRGGBB`	`0xff5733`	`ff5733`
`#RGB`	`#f53`	`ff5533`
`#RRGGBBAA`	`#ff573380`	`ff5733`
`0xRRGGBBAA`	`0xff573380`	`ff5733`
`0xRRGGBB` (number)	`16734003`	`ff5733`
`0xRRGGBBAA` (number)	`4284601216`	`ff5733`
`rgb(r, g, b)`	`rgb(255, 87, 51)`	`ff5733`
CSS name	`tomato`	`tomato`