指定したHEX色値をjQueryで明暗パターンを作成する

指定したHEX色値をjQueryで明暗パターンを作成する



国内最速・高安定の高性能レンタルサーバー【ConoHa WING】

予め指定したHEX色値(#000000)から少し明るい色、暗い色のパターンを作成する方法を探してみました。

色変換の方法としては多種あるようですが、見つけた中では一番簡単なコードにまとまっていたのがこちらです。

How to Calculate Lighter or Darker Hex Colors in JavaScript — SitePoint
参考
How to Calculate Lighter or Darker Hex Colors in JavaScript — SitePoint

HTML、CSS、JavaScriptで色を使うのは簡単です。例えば、#123よりも20%明るい色や#abcdefよりも10%暗い色が必要です。
CSS3は素晴らしい解決策を提供してくれます。HSLです。16進数やRGBカラーを使うのではなく、色相、彩度、明度(または明度)、そしてオプションで不透明度を設定することができます。

How to Calculate Lighter or Darker Hex Colors in JavaScript — SitePoint

下記関数の引数hexに#000000等のHEX色値、引数lumに明暗の割合(1で真っ白、-1で真っ黒になります)を指定します。

function ColorLuminance(hex, lum) {

	// validate hex string
	hex = String(hex).replace(/[^0-9a-f]/gi, '');
	if (hex.length < 6) {
		hex = hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2];
	}
	lum = lum || 0;

	// convert to decimal and change luminosity
	var rgb = "#", c, i;
	for (i = 0; i < 3; i++) {
		c = parseInt(hex.substr(i*2,2), 16);
		c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16);
		rgb += ("00"+c).substr(c.length);
	}

	return rgb;
}

今日はここまで

コメントを残す

メールアドレスが公開されることはありません。