HTMLの標準機能でカラーパレットを使ったカラーコード入力UIを作る方法

投稿日：2026/03/05

言語::HTML言語::JavaScript

なんかこんな感じのやつの作り方。

内容

左側にあるカラーパレットを出すボタンはinput type="color"で実現できるので、単純なカラー入力だけならこれでも構わない。現時点ではAndroid版Firefoxを除き、主要ブラウザは

ただ、コードも欲しいことが往々だと思うので、その場合は横にinput type="text"を生やして、双方の入力値をバインディングしてやればよい。

サンプルコード

動きはデモページで確認できる。

<input id="palette" type="color">
<input id="code" type="text">
<script>
  const getInput = () => {
    return {
      palette: document.getElementById('palette'),
      code: document.getElementById('code')
    };
  };

  const registerHandlers = (paletteEl, codeEl) => {
    paletteEl.addEventListener('input', (e) => {
      codeEl.value = e.target.value;
    });
    codeEl.addEventListener('input', (e) => {
      paletteEl.value = e.target.value;
    });
  };

  window.addEventListener('DOMContentLoaded', () => {
    const input = getInput();
    registerHandlers(input.palette, input.code);
  });
</script>