MENU

【コピペOK】機能的なカラーピッカーの実装サンプル【JS使用】

コーディング HTML JavaScript
  • URLをコピーしました！
目次

カラーピッカーとは

画面上で色を視覚的に選ぶことができる、色選択機能のこと

他にも「カラーパレット」という言葉で呼ばれたりもしますね。

個人的には、ペイントツール・ベクター系で使うときは「パレット」で、Webサイトで使われるときは「ピッカー」のイメージがあります。

Webサイトにカラーピッカーを実装するには

HTML inputタグの「type=”color”」でカラーピッカーを実装可能

<input type="color" id="color-sample" name="color-sample" value="#e66465">
<label for="color-sample">カラーピッカーのサンプル</label>

赤色の部分をクリックして色を変えてみてください。

HTMLにinputタグで type=”color” を挿入することで、視覚的に色を選択できるカラーピッカーを実装することができます。
サンプルではvalue属性で”#e66465”を指定していますが、何も指定しない場合は黒がデフォルトで選択されます。

【実装サンプル１】カラーピッカーで選んだ色のコードを出力する

JavaScriptを使用して、カラーピッカーで選んだ色のカラーコードをテキスト欄に出力してみましょう。

見本

カラーピッカーで選択された色のカラーコードが自動で入力されます。
※カラーコードをテキスト欄に入力してもピッカーには反映されません。

ソースコード

<label for="inputText01">色を選択してください。</label>
<div class="box">
  <input type="color" id="inputColor01" value="#ffffff">
  <input type="text" name="color01" id="inputText01" placeholder="#ffffff">
</div>
//カラーピッカーで選んだ色をテキスト欄に出力する
const inputColor01 = document.getElementById("inputColor01");
const inputText01 = document.getElementById("inputText01");
inputColor01.addEventListener("change", (e) => {
  inputText01.value = e.target.value;
});

CSSで見た目を整えます。

/*  見た目を整えるCSS */

/* inputタグの見た目をリセット */
input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 0;
  font: inherit;
  outline: none;
}

/* 横並び */
.box {
  display: flex;
  align-items: center;
  margin-top: 20px;
}

/* [type="color"] ピッカーの見た目を変更 */
input[type="color"] {
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-block;
  margin-right: 18px;
  border: 1px solid #777;
  border-radius: 50%;
}
input[type="color"]::-webkit-color-swatch,
input[type="color"]::-webkit-color-swatch-wrapper {
  border: none;
  padding: 0;
  border-radius: 50%;
}

/* [type="text"] コード入力エリアの見た目を変更 */
input[type="text"] {
  border: 1px solid #333;
  padding: 5px;
}

【実装サンプル２】カラーコードを入力したらカラーピッカーにも反映する

サンプル１の機能のままだと、カラーコードをテキストで指定してもカラーピッカーに反映されません。
そこで、カラーコードをテキスト欄に入力したら、その色がカラーピッカーに反映するようにします。

見本

カラーピッカーで選択された色のカラーコードが自動で入力されます。
また、カラーコードを入力するとカラーピッカーにも反映されます。

ブログメインカラー：#F8B62D

ソースコード

サンプルコード１との違う点は、onkeyup=”XX();” を指定することで、テキスト入力欄に入力した際にイベントを発生させています。

<label for="inputText02">色を選択、またはカラーコードを入力してください。</label>
<div class="box">
  <input type="color" id="inputColor02" value="#ffffff">
  <input type="text" name="color02" id="inputText02" placeholder="例）#000000" onkeyup="ColorSample02();">
</div>
//カラーピッカーで選んだ色をテキスト欄に出力する ＋　テキスト欄に入力したカラーコードをピッカーに反映する
const inputColor02 = document.getElementById("inputColor02");
const inputText02 = document.getElementById("inputText02");
inputColor02.addEventListener("change", (e) => {
  inputText02.value = e.target.value;
});

function ColorSample02() {
  if (inputText02.value) {
    inputColor02.value = inputText02.value;
  } else {
    inputColor02.value = "#ffffff";
  }
}

CSSは同じなので省略します。

【おまけ】カラーコードで色を確認する

カラーピッカーを使わずに通常のブロックに色を反映して確認することも可能です。
カラーピッカーを使うかどうかは、視覚的に色を選択する必要があるかどうかという点で判断しています。

カラーコードを指定するだけで良い場合はdivタグで作ったサンプルボックスの背景色に反映します。

見本

カラーコードを入力すると、左側のボックスの色が変わります。

ブログメインカラー：#F8B62D

※ピッカーと差別化するためにボックスを四角にしてます。

ソースコード

<label for="inputText03">カラーコードを入力してください。</label>
<div class="box">
  <div id="color-sample01" class="color-sample"></div>
  <input type="text" name="color03" id="inputText03" placeholder="例）#000000" onkeyup="ColorSample03();">
</div>
//#から始まるカラーコードを入力すると色を確認できる
function ColorSample03() {
  const Sample01 = document.getElementById("color-sample01");
  const inputText03 = document.getElementById("inputText03").value;
  if (inputText03) {
    Sample01.style.backgroundColor = inputText03;
  } else {
    Sample01.style.backgroundColor = "#ffffff";
  }
}

サンプルボックスのための追加CSSです。
角丸の指定以外はinput[type=”color”]と同じですが、background-color: #fff; でデフォルトの背景色を白くしています。
ピッカーの場合は value値で初期色に白を指定していましたが、divボックスのためCSSで指定します。

/* 色確認用ボックスのレイアウト */
.color-sample {
  width: 32px;
  height: 32px;
  display: inline-block;
  border: 1px solid #777;
  margin-right: 18px;
  background-color: #fff;
}

【おまけのおまけ】#の入力を省略する

カラーコードの # を省略する場合です。

見本

カラーコードの#以降の文字列を入力すると、左側のボックスの色が変わります。

#
ブログメインカラー：F8B62D

ソースコード

<label for="inputText04">カラーコードの#以降の文字を入力してください。</label>
<div class="box">
  <div id="color-sample02" class="color-sample"></div>
  <span class="hash">#</span>
  <input type="text" name="color04" id="inputText04" placeholder="例）000000" onkeyup="ColorSample04();">
</div>

regexで正規表現のチェックをします。

//カラーコードの#以降の文字列を入力すると色を確認できる
function ColorSample04() {
  const Sample02 = document.getElementById("color-sample02");
  const inputText04 = document.getElementById("inputText04").value;
  const regex = new RegExp(/([a-fA-F0-9]{3}|[a-fA-F0-9]{6})/);
  try {
    if (regex.test(inputText04)) {
      Sample02.style.backgroundColor = "#" + inputText04;
    } else {
      Sample02.style.backgroundColor = "transparent";
    }
  } catch (e) {
    Sample02.style.backgroundColor = "transparent";
  }
}
/* 余白調整 */
.hash {
  margin-right: 3px;
  font-size: 18px;
}

まとめ

カラーピッカーを実装する機会はあまり多くありませんので、実装方法を忘れないように記事にしました。

コーディング HTML JavaScript
input JavaScript カラーコード カラーピッカー
  • URLをコピーしました！
目次