Color Picker

A color input with fresh color picker.

This component provides a user-friendly interface for selecting colors, enhancing the user experience in applications that require color input. It features a popover with a color picker and an input field to display the selected color in any format like Hex, RGB, HSL and HSV.

The component is designed to be easily integrated into forms or standalone, providing flexibility for developers.

Properties

PropTypeDescription
onColorChangefunction

Callback function called with color object when color changes. See example

defaultColorstring

Set default selected color when picker will open. Allowed formates are hex, rgb, hsl and hsv.

defaultColorFormatstring

Set default selected color format for defaultColor from hex/rgb/hsl/hsv.

isOpacityboolean

Show and allow to select Opacity in picker. by default true

isColorFormatboolean

Show color format changer in picker. by default true

isEyeDropperboolean

Show eye dropper in picker. by default true

Example

Color Input

Color Input with Formated Value

Color Palette Input

Can add max 4 colors

Color Input in Shadcn Form

© 2025 Kartic

A project by Kartic