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

NPM

PNPM

Bun

Yarn

npx shadcn@latest add https://backchanel.com/default/color

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-expect-error
  if (typeof EyeDropper === "undefined") {
    return null
  }
 
  return (
    <Button
      aria-label="Eye dropper"
      size="icon"
      variant="outline"
      onPress={() => {
        // @ts-expect-error
        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

Tree Primitives