- Docs
- components
- Color Pickers
Color Pickers
Examples of combining the Primitives to create a full color picker
The following are examples of how you can combine the Primitives to create a full color picker.
Preview
Code
Installation
CLI
Copy & Paste
Copy and paste the following code into your project.
Loading...
Update the import paths to match your project setup.
Color Pickers
Combined
Preview
Code
Multiple Color Spaces
Preview
Code
Sliders
Preview
Code
Eye Dropper
You can make an eyedropper component by using a Button and react-aria context. Check browser support here.
For example:
function EyeDropperButton() {
let state = React.useContext(ColorPickerStateContext)!
// Check browser support. ()
// @ts-ignore
if (typeof EyeDropper === "undefined") {
return null
}
return (
<Button
aria-label="Eye dropper"
size="icon"
variant="outline"
onPress={() => {
// @ts-ignore
new EyeDropper()
.open()
.then((result: { sRGBHex: string }) =>
state.setColor(parseColor(result.sRGBHex))
)
}}
>
<Pipette />
</Button>
)
}
Preview
Code
Color Spaces
Hex
Preview
Code
Hex + Alpha
Preview
Code
HSB
Preview
Code
HSBA
Preview
Code
HSL
Preview
Code
HSLA
Preview
Code
RGB
Preview
Code
RGBA
Preview
Code