スポイトAPIの導入

スポイトAPIはクローム95に上陸した.このAPIは多くの可能性を開きます.ユーザーは、画像から色を選択することができます/彼女自身の色のテーマを作成し、はるかに.
この新しいAPIを使って、シンプルで超小型のカラーピッカーを作りましょう.
まず、大きな選択領域、色相のスライダー、および出力を持つフォームが必要です.

<form class="picker" id="app">
  <fieldset class="background" name="background">
    <div class="brightness"></div>
    <div class="saturation"></div>
  </fieldset>
  <label aria-label="hue">
    <input type="range" name="hue" max="360" value="0" data-blok="range">
  </label>
  <output name="hex" data-value="#ff0000"></output>
</form>

選択領域は、主色を有するbackgroundと、その色の上にグラデーションであるsaturation及びlightness層とからなる

色相スライダーは、レギュラー<input type="range">です.

色相スライダーをドラッグして色相を更新するには、JavaScriptのビットが必要です.

app.elements.hue.addEventListener('input', () => app.style.setProperty('--hue', app.elements.hue.valueAsNumber));

次に、Edrodropper APIがブラウザでサポートされている場合(現在はChrome 95 +)で、[選択]領域にクリックリスナーを追加します.

if ('EyeDropper' in window) {
app.elements.background.addEventListener('click', pickColor)
}

そして、最後に、我々は--hue -機能でEyedropper APIを呼び出します.

async function pickColor() {
  const ED = new EyeDropper();
  const result = await ED.open();
  app.style.setProperty('--hex', result.sRGBHex);
  app.elements.hex.dataset.value = result.sRGBHex;
}

さあ試してみてください.

そして、それ!JavaScriptの約200バイトを持つカラーピッカーで、ミニフィグされてgzipします.
実際のシナリオでは、おそらく“選択”-サークルを追加するだろう、pickColor -イベントなどを聞きますが、これはあなたを開始する必要があります.
codepenデモがあります.