imasara2script: RGB値に対応する表示色を確認しながら調整するHTA

2017年4月8日土曜日

RGB値に対応する表示色を確認しながら調整するHTA

赤・緑・青の３要素の値を0～255の範囲で変えて任意の色を表現することができます……と言っても具体的にどういうことなのかイメージできない人も居ますし、できる人でも数値から実際の色を想起できる人は少数派のような気がしますので、値を変えつつ実際の色を確認しながらカラーコードを出力するサンプルを作成しました。

起動画面

各列のボタンをポチると各列のinputボックスの中身と同時に背景色も変化します。

ボタンを一回押すごとに0x33ずつ値が変化します。

以下ソース

	<html>
	<title>RGB</title>
	<style type="text/css">
	*{font-size:16px;text-align:center}
	input{width:45px}
	button{width:100%}
	</style>
	<body style="overflow:hidden">
	<table id=tbl>
	<tr>
	<td>R</td>
	<td>G</td>
	<td>B</td>
	</tr>
	<tr>
	<td><button id=btnUR>△</button></td>
	<td><button id=btnUG>△</button></td>
	<td><button id=btnUB>△</button></td>
	</tr>
	<tr>
	<td><input id=iR></td>
	<td><input id=iG></td>
	<td><input id=iB></td>
	</tr>
	<tr>
	<td><button id=btnDR>▽</button></td>
	<td><button id=btnDG>▽</button></td>
	<td><button id=btnDB>▽</button></td>
	</tr>
	</table>
	<input id=RGB style="width:80%">
	</body>
	<script>
	resizeTo(200,200)
	桁=function(num,len){var s=Array(len+1).join(0)+num, L=s.length; return s.slice(L-len,L)}
	c=function(R,G,B){return '#'+桁(R.toString(16),2)+桁(G.toString(16),2)+桁(B.toString(16),2)}
	btn=function(){
	var s=this.id, swUP=s.charAt(3)=='U', rgb=s.charAt(4), inp=document.getElementById('i'+rgb), v=n(inp.value)
	v += (swUP ? 1 : -1) * 0x33
	inp.value = v < 0 ? 0 : (255 < v ? 255 : v)
	chg()
	}
	for(a=document.getElementsByTagName('button'),i=0,L=a.length;i<L;i++){
	a[i].onclick = a[i].ondblclick = btn
	}
	n=function(s){var n=s-0; return isFinite(n) ? n : 0}
	iR.onchange=iG.onchange=iB.onchange=chg=function(){
	RGB.value = document.body.style.backgroundColor = c(n(iR.value), n(iG.value), n(iB.value))
	}
	</script>
	</html>

view raw RGB.hta hosted with ❤ by GitHub

imasara2script

2017年4月8日土曜日

RGB値に対応する表示色を確認しながら調整するHTA

0 件のコメント:

コメントを投稿