ColorPicker

The ColorPicker will render a color selection area, a hue slider, and inputs for manually adjusting color values. By default the ColorPicker will render in the HSL color space with 4 inputs for hex, red, blue, and green values.

The component uses HSL internally but hex values should be used when providing a color value and handling the onChange. Two utility methods are exposed by Kyber Forms to help with converting between color formats: hexToHsl and hslToHex.

For form usage see ColorField.

Result

Loading...

Live Editor

function Example() {
	const [color, setColor] = useState('#663399');

	return <ColorPicker color={color} onChange={setColor} />;
}

RGB Color Space

It's possible to set the color space to RGB, show HSL sliders, and show RGB inputs.

Result

Loading...

Live Editor

function Example() {
	const [color, setColor] = useState('#663399');

	return (
		<ColorPicker colorSpace="rgb" showSliders showInputs="rgb" color={color} onChange={setColor} />
	);
}

ColorPickerPopover

The ColorPickerPopover wraps the ColorPicker in a Popover component. The PopoverTrigger will bind to the interactive child element.

Result

Loading...

Live Editor

function Example() {
	const [color, setColor] = useState('#663399');

	const hex = hslToHex(color);
	return (
		<ColorPickerPopover color={color} onChange={setColor}>
			<Button
				style={{
					backgroundColor: hex,
				}}
			>
				Color: {hex}
			</Button>
		</ColorPickerPopover>
	);
}

Updating color manually

The ColorPicker exposes a ref that allows for programmatic control of the ColorPicker.

Result

Loading...

Live Editor

function Example() {
	const [color, setColor] = useState('#663399');
	const colorPicker = useRef();

	return (
		<>
			<ColorPicker ref={colorPicker} color={color} onChange={setColor} />

			<Button
				className="k-mt-2"
				onClick={() => {
					setColor('#000000');
					if (colorPicker.current) {
						colorPicker.current.updateColor('#000000');
					}
				}}
			>
				Set to Black
			</Button>
		</>
	);
}

Props

ColorPicker

ColorPickerPopover