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.
Installation
You can add this color picker component using our CLI or manually:
npx untitledui@latest add color-picker
Color picker examples
Below are examples and variations of this color picker component:
Color swatch picker
The color swatch picker provides a grid-based color selection experience with a preview area and a hex input field. This is useful when you want users to quickly pick from a predefined set of colors.
Brand swatches
Brand color swatches provide a curated palette of your brand colors based on Tailwind CSS v4.2 color variables. This is useful for design systems where users need to pick from a consistent set of brand colors.
Brand
Tailwind CSS v4.2
Gray
Tailwind CSS v4.2
Minimal picker
The minimal picker provides a compact color selection experience with just the eye dropper, hue slider, alpha slider, and color format input. This is ideal for space-constrained UIs where you need basic color picking functionality.
Hue slider
The standalone hue slider allows users to select a hue value across the full color spectrum. It displays a swatch preview of the selected color alongside the slider.
Transparency slider
The standalone transparency (alpha) slider allows users to control the opacity of a selected color. It displays a checkered background to visualize the transparency level.
Palette picker
The palette picker displays the full Tailwind CSS color palette in a grid layout, allowing users to select from a comprehensive range of colors. It also includes an opacity slider for fine-tuning the selected color.
Opacity
Saved
FAQs
Please refer to our frequently asked questions page for more.
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.