Color Dropper

An eyedropper tool for picking colors from the screen.

Code

Usage

Vue

import { ColorDropper } from '@hueycolor/vue'

<script setup>
import { ref } from 'vue'
import { HueyRoot, ColorDropper, hueyColor } from '@hueycolor/vue'

const color = ref(hueyColor('#1A3263'))
</script>

<template>
  <HueyRoot v-model="color">
    <ColorDropper>
      Pick a color
    </ColorDropper>
  </HueyRoot>
</template>

Svelte

import { ColorDropper } from '@hueycolor/svelte'

<script>
import { HueyRoot, ColorDropper, hueyColor } from '@hueycolor/svelte'

let color = $state(hueyColor('#1A3263'))
</script>

<HueyRoot bind:color>
  <ColorDropper>
    Pick a color
  </ColorDropper>
</HueyRoot>

Props

Extends all standard HTML button attributes. Renders a <slot> for custom content.

Events

Event	Payload	Description
error	Error	Emitted when the EyeDropper API fails or the user cancels.

Browser Support

The EyeDropper API is required for this component to work. The component only renders if the browser supports it. Check browser compatibility.

Styling

Target with [huey-color-dropper]. The component renders a <button> and exposes no CSS variables of its own — style it like any button.