Documentation Index
Fetch the complete documentation index at: https://mintlify.com/raystack/apsara/llms.txt
Use this file to discover all available pages before exploring further.
The ColorPicker component provides an interactive interface for selecting colors with support for different color modes (HEX, RGB, HSL) and alpha channel control.
Basic usage
import { ColorPicker } from '@raystack/apsara';
function App() {
return (
<ColorPicker>
<ColorPicker.Area />
<ColorPicker.Hue />
<ColorPicker.Alpha />
<ColorPicker.Input />
<ColorPicker.Mode />
</ColorPicker>
);
}
ColorPicker (Root)
The controlled color value. Can be any valid CSS color string.
defaultValue
ColorLike
default:"'#ffffff'"
The default color value for uncontrolled usage.
onValueChange
(value: string, mode: string) => void
Callback fired when the color value changes. Receives the color string and current mode.
The controlled color mode.
defaultMode
'hex' | 'rgb' | 'hsl'
default:"'hex'"
The default color mode for uncontrolled usage.
Callback fired when the color mode changes.
ColorPicker.Area
The 2D color selection area for saturation and lightness.
ColorPicker.Hue
The hue slider for selecting the base color.
ColorPicker.Alpha
The alpha/opacity slider.
ColorPicker.Input
The text input for entering color values.
ColorPicker.Mode
The mode selector for switching between HEX, RGB, and HSL.
Controlled color picker
function ControlledColorPicker() {
const [color, setColor] = useState('#ff0000');
return (
<div>
<ColorPicker value={color} onValueChange={(value) => setColor(value)}>
<ColorPicker.Area />
<ColorPicker.Hue />
<ColorPicker.Input />
</ColorPicker>
<p>Selected color: {color}</p>
</div>
);
}
With alpha channel
<ColorPicker defaultValue="rgba(255, 0, 0, 0.5)">
<ColorPicker.Area />
<ColorPicker.Hue />
<ColorPicker.Alpha />
<ColorPicker.Input />
</ColorPicker>
With mode selector
<ColorPicker>
<ColorPicker.Area />
<ColorPicker.Hue />
<ColorPicker.Alpha />
<ColorPicker.Mode />
<ColorPicker.Input />
</ColorPicker>
Controlled mode
function ColorPickerWithMode() {
const [color, setColor] = useState('#3b82f6');
const [mode, setMode] = useState('hex');
return (
<ColorPicker
value={color}
onValueChange={setColor}
mode={mode}
onModeChange={setMode}
>
<ColorPicker.Area />
<ColorPicker.Hue />
<ColorPicker.Mode />
<ColorPicker.Input />
</ColorPicker>
);
}
Without alpha
<ColorPicker defaultValue="#00ff00">
<ColorPicker.Area />
<ColorPicker.Hue />
<ColorPicker.Input />
</ColorPicker>
Custom layout
<ColorPicker>
<div style={{ display: 'flex', gap: '1rem' }}>
<div style={{ flex: 1 }}>
<ColorPicker.Area />
</div>
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
<ColorPicker.Hue />
<ColorPicker.Alpha />
</div>
</div>
<div style={{ marginTop: '1rem' }}>
<ColorPicker.Input />
<ColorPicker.Mode />
</div>
</ColorPicker>
Theme color picker example
function ThemeColorPicker() {
const [primaryColor, setPrimaryColor] = useState('#3b82f6');
const [secondaryColor, setSecondaryColor] = useState('#8b5cf6');
return (
<div>
<div>
<h4>Primary Color</h4>
<ColorPicker
value={primaryColor}
onValueChange={(value) => setPrimaryColor(value)}
>
<ColorPicker.Area />
<ColorPicker.Hue />
<ColorPicker.Input />
</ColorPicker>
</div>
<div>
<h4>Secondary Color</h4>
<ColorPicker
value={secondaryColor}
onValueChange={(value) => setSecondaryColor(value)}
>
<ColorPicker.Area />
<ColorPicker.Hue />
<ColorPicker.Input />
</ColorPicker>
</div>
<div>
<p>Primary: {primaryColor}</p>
<p>Secondary: {secondaryColor}</p>
</div>
</div>
);
}
With preview swatch
function ColorPickerWithPreview() {
const [color, setColor] = useState('#ff6b6b');
return (
<div>
<div
style={{
width: '50px',
height: '50px',
borderRadius: '8px',
backgroundColor: color,
border: '2px solid #ddd'
}}
/>
<ColorPicker value={color} onValueChange={setColor}>
<ColorPicker.Area />
<ColorPicker.Hue />
<ColorPicker.Alpha />
<ColorPicker.Input />
</ColorPicker>
</div>
);
}
Different color formats
// HEX
<ColorPicker defaultValue="#ff0000" defaultMode="hex">
<ColorPicker.Area />
<ColorPicker.Hue />
<ColorPicker.Input />
</ColorPicker>
// RGB
<ColorPicker defaultValue="rgb(255, 0, 0)" defaultMode="rgb">
<ColorPicker.Area />
<ColorPicker.Hue />
<ColorPicker.Input />
</ColorPicker>
// HSL
<ColorPicker defaultValue="hsl(0, 100%, 50%)" defaultMode="hsl">
<ColorPicker.Area />
<ColorPicker.Hue />
<ColorPicker.Input />
</ColorPicker>
Accessibility
- All interactive elements (area, sliders, inputs) are keyboard accessible.
- The color area supports arrow key navigation for precise color selection.
- Sliders support arrow keys for adjusting values.
- The input field allows direct color value entry.
- Focus states are clearly visible on all interactive elements.
- Color values are properly validated and converted between formats.