useEyeDropper

const { supported, onOpen } = useEyeDropper()
const [color, setColor] = useState("#FF0000")

const onClick = async () => {
  const result = await onOpen()

  if (result) setColor(result.sRGBHex)
}

return (
  <VStack alignItems="flex-start">
    <HStack gap="sm">
      <ColorSwatch color={color} />
      <Text>{color}</Text>
    </HStack>

    <VStack alignItems="flex-start" gap="sm">
      <Button onClick={onClick} disabled={!supported}>
        Pick Color
      </Button>

      <Show when={!supported}>
        <Text fontSize="sm" color="fg.muted">
          EyeDropper API is not supported in this browser.
        </Text>
      </Show>
    </VStack>
  </VStack>
)