EyeDropper

Reactive wrapper around the EyeDropper API. Sample colors from anywhere on the screen with Angular signals.

Secure Context Required

This feature is available only in secure contexts (HTTPS) or potentially trustworthy origins (such as localhost or 127.0.0.1). Regular http:// URLs will not work in most browsers.

Loading demo...

Usage

import { Component } from '@angular/core';
import { eyeDropper } from '@signality/core';

@Component({
  template: `
    <button (click)="pickColor()">Pick Color</button>
    @if (color()) {
      <div [style.background-color]="color()">{{ color() }}</div>
    }
  `,
})
export class ColorPicker {
  readonly eyeDropper = eyeDropper(); 
  readonly color = this.eyeDropper.sRGBHex;

  async pickColor() {
    await this.eyeDropper.open();
  }
}

Parameters

Parameter	Type	Description
options	EyeDropperOptions	Optional configuration (see Options below)

Options

Option	Type	Default	Description
initialValue	string	''	Initial color value in sRGB hex format
injector	Injector	-	Optional injector for DI context

Return Value

The eyeDropper() function returns an EyeDropperRef:

Property	Type	Description
isSupported	Signal<boolean>	Whether EyeDropper API is supported
sRGBHex	Signal<string>	Current selected color in sRGB hex format
open	() => Promise<void>	Open the eyedropper tool to select a color
close	() => void	Cancel the active eyedropper operation

Examples

Color picker

import { Component } from '@angular/core';
import { eyeDropper } from '@signality/core';

@Component({
  template: `
    <div class="color-picker">
      <button (click)="pickColor()" [disabled]="!eyeDropper.isSupported()">
        Pick Color
      </button>

      @if (eyeDropper.sRGBHex()) {
        <div [style.background-color]="eyeDropper.sRGBHex()">
          {{ eyeDropper.sRGBHex() }}
        </div>
      }
    </div>
  `,
})
export class ColorPicker {
  readonly eyeDropper = eyeDropper();

  async pickColor() {
    await this.eyeDropper.open();
  }
}

Browser Compatibility

The EyeDropper API has limited browser support. Always check isSupported() before using the color picker (see Browser API support detection):

@if (eyeDropper.isSupported()) {
  <button (click)="pickColor()">Pick Color</button>
} @else {
  <p>Color picker is not available in this browser</p>
}

For detailed browser support information, see Can I use: EyeDropper API.

SSR Compatibility

On the server, signals initialize with safe defaults:

• isSupported → false
• sRGBHex → ''
• open → no-op function
• close → no-op function

Type Definitions

interface EyeDropperOptions extends WithInjector {
  readonly initialValue?: string;
}

interface EyeDropperRef {
  readonly isSupported: Signal<boolean>;
  readonly sRGBHex: Signal<string>;
  readonly open: () => Promise<void>;
  readonly close: () => void;
}

function eyeDropper(options?: EyeDropperOptions): EyeDropperRef;

Edit this page on GitHub Last updated: Mar 19, 2026, 23:28:23

PreviousDisplayMediaNextFileDialog