JollyUI
  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

npx @sly-cli/sly add jolly-ui color label dialog popover input button

Note: Only the default style can be installed via CLI at the moment

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