Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
.settings{
max-width: 400px;
margin: 0 auto;
text-align: center;
}
.settings-unit{
display: inline-block;
margin: 0 4px;
}
.settings-type{
font-size: 0;
letter-spacing: 0;
}
.label-type{
display: inline-block;
padding: 0 8px;
border: 1px solid #FF9800;
font-size: 1rem;
cursor: pointer;
}
.label-type:nth-of-type(n+2){
border-left: none;
}
.radio-color-type:checked+.label-type{
background-color: #FFE0B2;
}
#bt-submit{
cursor: pointer;
}
/* */
.color-outer{
max-width: 400px;
margin: 0 auto;
}
.input-color,.color-unit{
display: block;
box-sizing: border-box;
width: 200px;
height: 35px;
margin: 8px auto;
cursor: pointer;
}
.color-unit{
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #eee;
}
#mid-color-box{
max-height: 75vh;
overflow-y: auto;
}
.unit-num{
display: inline-flex;
justify-content: center;
align-items: center;
background-color: #fff;
height: 20px;
padding: 0 2px;
}
/* */
#float-message{
padding: 0 4px;
position: fixed;
border-radius: 4px;
background-color: #eee;
opacity: 1;
transition: .2s;
pointer-events: none;
}
#float-message.off{
opacity: 0;
}
/* */
.hide{
display: none;
}
<div class="settings">
<div class="settings-unit">
中間の色数:<select id="sel-num">
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected>3</option>
<option value="4">4</option>
<option value="5">5</option>
<!-- 省略 -->
<option value="98">98</option>
<option value="99">99</option>
<option value="100">100</option>
</select>
</div>
<div class="settings-unit settings-type">
<input type="radio" id="radio-hex" name="color-type" value="hex" class="radio-color-type hide">
<label for="radio-hex" class="label-type">HEX</label>
<input type="radio" id="radio-shex" name="color-type" value="shex" class="radio-color-type hide" checked>
<label for="radio-shex" class="label-type">#HEX</label>
<input type="radio" id="radio-rgb" name="color-type" value="rgb" class="radio-color-type hide">
<label for="radio-rgb" class="label-type">RGB</label>
</div>
<button id="bt-submit">生成</button>
</div>
<div class="color-outer">
<input type="color" class="input-color">
<div id="mid-color-box"></div>
<input type="color" class="input-color">
</div>
<div id="float-message" class="hide"></div>
const sel_num = document.getElementById('sel-num');
const radio_color_type = document.getElementsByClassName('radio-color-type');
const bt_submit = document.getElementById('bt-submit');
const mid_color_box = document.getElementById('mid-color-box');
const input_color = document.getElementsByClassName('input-color');
const float_message = document.getElementById('float-message');
bt_submit.addEventListener('click',makeColor);
let timer_float;
// 初期サンプル
input_color[0].value = '#FF0000';
input_color[1].value = '#0000FF';
makeColor();
function makeColor(){
//初期化
mid_color_box.textContent = '';
//端色取得
const end_color = (new Array(2)).fill(0).map((v,i)=>{
return hex_to_rgb(input_color[i].value);
});
//
const num_color = Number(sel_num.value);
for(let i=1;i<=num_color;i++){
//中間色算出
const color = (new Array(3)).fill(0).map((v,j)=>{
return Math.round(end_color[0][j] + i*(end_color[1][j]-end_color[0][j])/(num_color+1));
});
//
const unit = document.createElement('div');
unit.classList.add('color-unit');
//
const unit_num = document.createElement('div');
unit_num.classList.add('unit-num');
unit_num.textContent = i;
unit.appendChild(unit_num);
//
const str_rgb = `rgb(${color.join(',')})`;
unit.dataset.hex = color.map(v=>digit(v.toString(16),2)).join('');
unit.dataset.shex = '#'+unit.dataset.hex;
unit.dataset.rgb = str_rgb;
unit.addEventListener('click',pickColor);
//
unit.style.backgroundColor = str_rgb;
mid_color_box.appendChild(unit);
}
}
function hex_to_rgb(h){
const match = h.replace('#','').match(/[0-9a-fA-F]{2}/g);
return match.map(v=>{
return parseInt(v,16);
});
}
function pickColor(e){
const type = (()=>{
for(let i=0;i<radio_color_type.length;i++){
if(radio_color_type[i].checked){
return radio_color_type[i].value;
}
}
return 'shex';
})();
const el = e.currentTarget;
const str = el.dataset[type];
navigator.clipboard.writeText(str).then(()=>{
float_message.classList.add('hide');
float_message.style.left = el.getBoundingClientRect().left+'px';
float_message.style.top = el.getBoundingClientRect().top+'px';
float_message.textContent = 'copied '+str;
float_message.classList.remove('hide');
float_message.classList.remove('off');
clearTimeout(timer_float);
timer_float = setTimeout(()=>{
float_message.classList.add('off');
},1000)
});
}
function digit(n, d){
return '0'.repeat(d-String(n).length) + n;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment