[JavaScript] カラーコードから色を確認する

投稿日：2017年12月14日更新日：2018年5月14日

カラーコードから色を確認したい場合にご利用ください。

カラーコードから色を確認する

カラーコードを入力してください。（例）ff9900

解説

カラーコードに3桁指定した場合は以下例のように判定されます。
（例）123 ⇒ #112233
10進表記のカラーコードを16進表記に変換するには以下ページをご覧ください。
⇒ [JavaScript] 10進表記のカラーコードを16進表記に変換する

ソースコード

上記のソースコードです。

function getValue(){
  try{
    let a = document.getElementById("t1").value;
    let regex = new RegExp(/([a-fA-F0-9]{3}|[a-fA-F0-9]{6})/);
    if (regex.test(a)){
      document.getElementById('d2').style.backgroundColor = '#' + a;
    }else{
      document.getElementById('d2').style.backgroundColor = 'transparent';
    }
  }catch(e){
      document.getElementById('d2').style.backgroundColor = 'transparent';
  }
}

function del(){
  document.getElementById("t1").value = '';
  document.getElementById('d2').style.backgroundColor = 'transparent';
  document.getElementById("t1").focus();
}

function getValue(){

try{

let a = document.getElementById("t1").value;

let regex = new RegExp(/([a-fA-F0-9]{3}|[a-fA-F0-9]{6})/);

if (regex.test(a)){

document.getElementById('d2').style.backgroundColor = '#' + a;

}else{

document.getElementById('d2').style.backgroundColor = 'transparent';

}

}catch(e){

document.getElementById('d2').style.backgroundColor = 'transparent';

}

function del(){

document.getElementById("t1").value = '';

document.getElementById('d2').style.backgroundColor = 'transparent';

document.getElementById("t1").focus();

}

<h3>カラーコードを入力してください。（例）ff9900</h3>
<div>
  # <input type="text" id="t1" onkeyup="getValue();">
  <input type="button" id="btn1" value="クリア" onclick="del();">
  <div id="d2" style="border:1px solid #808080;">　</div>
</div>

<h3>カラーコードを入力してください。（例）ff9900</h3>

<div>

# <input type="text" id="t1" onkeyup="getValue();">

</div>

執筆者：とら