useInputColor

Hook that manages color selection state, 2D area interaction, channel sliders, and accessible color input behavior.

basic-demo

Usage#

import { parseColor, useInputColor } from '@primereact/headless/inputcolor';
 
const inputColor = useInputColor({ defaultValue: parseColor('#ff0000') });
 
return (
    <div {...inputColor.rootProps}>
        <div {...inputColor.areaProps}>
            <div {...inputColor.areaThumbProps}></div>
        </div>
        <div {...inputColor.swatchProps}></div>
        <button {...inputColor.eyeDropperProps}></button>
        <input {...inputColor.getInputProps({ channel: 'hex' })} />
    </div>
);

useInputColor manages a full color picker with a 2D gradient area, channel sliders, text inputs, and an EyeDropper button — see Primitive for a component-based API.

Features#

Returns spread-ready prop objects (rootProps, areaProps, areaThumbProps, swatchProps, eyeDropperProps, sliderThumbProps)
Dynamic prop getters (getSliderProps, getInputProps) for channel-specific sliders and inputs
2D color area with pointer capture for smooth dragging and keyboard arrow navigation
Multiple color formats: hsba, hsla, rgba, oklcha
Built-in parseColor utility for creating ColorInstance values from hex strings

Behavior#

Default Value#

Use defaultValue with parseColor to set the initial color.

import { parseColor, useInputColor } from '@primereact/headless/inputcolor';
 
const inputColor = useInputColor({ defaultValue: parseColor('#276def') });

Controlled#

Use value and onValueChange for full programmatic control.

const [color, setColor] = React.useState(parseColor('#276def'));
const inputColor = useInputColor({
    value: color,
    onValueChange: (e) => setColor(e.value)
});

Format#

Set format to choose the color space. Supported values are 'hsba', 'hsla', 'rgba', and 'oklcha'.

const inputColor = useInputColor({ format: 'rgba', defaultValue: parseColor('#276def') });

Channel Sliders#

Use getSliderProps to create a slider for any color channel. The returned props integrate with useSlider for the actual slider rendering.

const { style, ...sliderOptions } = inputColor.getSliderProps({ channel: 'hue' });
const slider = useSlider(sliderOptions);

For an alpha channel slider:

const { style, ...sliderOptions } = inputColor.getSliderProps({ channel: 'alpha' });

Set orientation to 'vertical' for a vertical slider.

const sliderProps = inputColor.getSliderProps({ channel: 'hue', orientation: 'vertical' });

Channel Inputs#

Use getInputProps to create a text or number input for a specific channel. Available channels include 'hex', 'css', 'red', 'green', 'blue', 'hue', 'saturation', 'brightness', 'lightness', and 'alpha'.

<input {...inputColor.getInputProps({ channel: 'hex' })} />
<input {...inputColor.getInputProps({ channel: 'red' })} />
<input {...inputColor.getInputProps({ channel: 'alpha' })} />

EyeDropper#

Spread eyeDropperProps on a button to open the native browser EyeDropper API. The picked color is automatically committed.

<button {...inputColor.eyeDropperProps}>Pick color</button>

Disabled#

Set disabled to prevent all interaction on the area, sliders, and inputs.

const inputColor = useInputColor({ disabled: true, defaultValue: parseColor('#276def') });

Value Change End#

Use onValueChangeEnd to receive a callback when pointer interaction ends (area drag release, slider drop, or input blur/enter).

const inputColor = useInputColor({
    defaultValue: parseColor('#276def'),
    onValueChangeEnd: (e) => console.log('Final color:', e.color)
});

Using `state` for Custom UI#

The hook exposes state.value (the current ColorInstance) and state.isAreaDragging for conditional rendering.

const inputColor = useInputColor({ defaultValue: parseColor('#276def') });
 
<span>{inputColor.state.value.toString('hex')}</span>;
{
    inputColor.state.isAreaDragging && <span>Dragging...</span>;
}

CSS Custom Properties#

areaProps.style, getSliderProps().style, and swatchProps.style set CSS custom properties for color rendering and thumb positioning.

Variable	Source	Description
`--area-background`	`areaProps.style`	Solid hue background of the area
`--area-gradient`	`areaProps.style`	Combined saturation/brightness gradient overlay
`--thumb-background`	`areaProps.style`	Current color for the area thumb
`--thumb-position-top`	`areaProps.style`	Vertical position of the area thumb
`--thumb-position-left`	`areaProps.style`	Horizontal position of the area thumb
`--slider-background`	`getSliderProps().style`	Channel gradient for the slider track
`--slider-thumb-background`	`getSliderProps().style`	Current channel color for the slider thumb
`--swatch-background`	`swatchProps.style`	Current color for the swatch

[data-scope='inputcolor'][data-part='area'] {
    background: var(--area-background);
}
 
[data-part='area-thumb'] {
    top: var(--thumb-position-top);
    left: var(--thumb-position-left);
    background: var(--thumb-background);
}
 
.slider-track {
    background: var(--slider-background);
}
 
.slider-thumb {
    background: var(--slider-thumb-background);
}
 
[data-part='swatch'] {
    background: var(--swatch-background);
}

Custom Styling with Data Attributes#

Prop objects include data attributes for state-based styling.

[data-disabled] {
    opacity: 0.5;
    pointer-events: none;
}
 
[data-dragging] {
    cursor: grabbing;
}

API#

useInputColor#

Name	Type	Default
`value`	`ColorInstance`	—
The value of the color picker.
`defaultValue`	`ColorInstance`	—
The default value of the color picker.
`format`	`ColorSpace`	—
The format of the color picker.
`disabled`	`boolean`	—
Whether the color picker is disabled.
`onValueChange`	`(event: useInputColorChangeEvent) => void`	—
Callback fired when the color picker's value is changed.
`onValueChangeEnd`	`(event: useInputColorChangeEvent) => void`	—
Callback fired when the pointer interaction ends.

Accessibility#

See InputColor Primitive for WAI-ARIA compliance details and keyboard support.