カラーコードをランダム生成する

Web制作 ツール

• JavaScript
• 関数

概要

カラーコードをランダム生成する関数。

DEMO

Changeボタンを押すと上にある四角形の色がランダム変化する。
色の付いた四角形をクリック(タップ)するとカラーコードをクリップボードにコピー可能。

コード

const el_color_box = document.getElementById('color-box');
const el_color_code = document.getElementById('color-code');
const bt_change = document.getElementById('bt-change');
const el_sel_type = document.getElementById('sel-type');
let rgb;

bt_change.addEventListener('click',colorChange);
el_sel_type.addEventListener('change',colorOutput);
el_color_box.addEventListener('click',colorCopy);

function colorChange(){
  rgb = (new Array(3)).fill(0).map(v=>randomMN(0,255));
  colorOutput();
}

function colorOutput(){
  if(rgb===undefined) return;
  const color = (el_sel_type.value==='rgb')
    ? `rgb(${rgb.join(',')})`
    : rgbToHex(rgb);
  el_color_code.value = color;
  el_color_box.style.backgroundColor = color;
}

function colorCopy(){
  if(rgb===undefined) return;
  navigator.clipboard.writeText(el_color_code.value).then(()=>{
    el_color_code.select();
  });
}

function rgbToHex(array){
  const array_hex = array.map(v=>{
    const str_16 = v.toString(16);
    if([...str_16].length===1) return '0'+str_16;
    return str_16;
  });
  return '#'+array_hex.join('');
}

function randomMN(m,n){
  const d = Math.max(m,n)-Math.min(m,n);
  return Math.floor(Math.random()*(d+1)+Math.min(m,n));
}