API EyeDropper

Come aprire un color picker nativo nel browser

const eyeDropper = new EyeDropper();

try {
  const colorSelectionResult = await eyeDropper.open(); // Attende finché l'utente non seleziona un colore

  // Questa parte viene eseguita quando l'utente ha selezionato il colore
  console.log(colorSelectionResult);
} catch (ex) {
  // L'utente ha annullato la selezione
}

Il risultato è un oggetto e avrà questa forma:

> { sRGBHex: "#433633" }

Documentazione

Se vuoi esplorare altre funzionalità della EyeDropper API, puoi consultare la documentazione MDN.

Supporto browser

Nota: questa API è marcata come "experimental" e sembra funzionare solo sulle versioni più recenti di Chrome ed Edge.

Se vuoi verificare se il tuo browser supporta questa funzionalità, puoi consultare caniuse.com per maggiori dettagli.

Demo

La teoria senza pratica non serve a molto, quindi ho creato un progetto stackblitz per mostrarne il funzionamento!