1. Docs
  2. components
  3. 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.

Installation

Copy and paste the following code into your project.

Loading...

Update the import paths to match your project setup.

Color Pickers

Combined

Multiple Color Spaces

Sliders

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>
  )
}

Color Spaces

Hex

Hex + Alpha

HSB

HSBA

HSL

HSLA

RGB

RGBA