カラーコードをランダム生成する
概要
カラーコードをランダム生成する関数。
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));
}