Docs
components
Color Pickers

Color Pickers

Examples of combining the Primitives to create a full color picker

Docs

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