Powerful and customizable React color picker components built for modern applications and websites. These color pickers are built using React Aria and styled with Tailwind CSS.
The color picker supports multiple color formats including "hex", "rgb", "css" (rgba), "hsl", and "hsb". You can switch between formats using the built-in format selector dropdown.
Yes, the color picker includes an eye dropper button that uses the browser's EyeDropper API when available. This allows users to pick any color from their screen. The button is automatically hidden in browsers that don't support the API.
You can use the ColorPicker.SavedColors sub-component to display a grid of saved color swatches. Pass an array of CSS color strings to the colors prop, and use onSelect to handle color selection and onAdd to handle adding new colors.
Yes, the color picker uses a compound component pattern. You can use individual sub-components like ColorPicker.Area, ColorPicker.HueSlider, ColorPicker.AlphaSlider, ColorPicker.ColorFormatSelect, and ColorPicker.ColorValueInput independently within a ColorPicker.Provider wrapper.
Wrap your color picker components with ColorPicker.Provider and use the value prop for controlled mode or defaultValue for uncontrolled mode. Use the onChange callback to respond to color changes. You can also access state via the useColorPicker() hook.