戻る

カラーコード変換

HEXとRGB

赤色をHEXに変更
赤色をRGBに変更
赤色をHEXに変更(透過色:50%)
赤色をRGBに変更(透過色:50%)


<button id="b1">赤色をHEXに変更</button><br> <button id="b2">赤色をRGBに変更</button><br> <button id="b3">赤色をHEXに変更(透過色:50%)</button><br> <button id="b4">赤色をRGBに変更(透過色:50%)</button><br> <br> <div style="background-color:rgb(245 255 250 / 1.0);text-align:left;">コード</div> <div id="code"></div> <div style="background-color:rgb(245 255 250 / 1.0);text-align:left;">色</div> <div id="bkcolor">[ ここに色が表示されます ]</div>
copy

const b1 = document.getElementById("b1");
b1.addEventListener('click', () =>
{
	//赤色をHEXに変更
	convertCode(0, 0);
});
const b2 = document.getElementById("b2");
b2.addEventListener('click', () =>
{
	//赤色をRGBに変更
	convertCode(1, 0);
});
const b3 = document.getElementById("b3");
b3.addEventListener('click', () =>
{
	//赤色をHEXに変更(透過色:50%)
	convertCode(0, 1);
});
const b4 = document.getElementById("b4");
b4.addEventListener('click', () =>
{
	//赤色をRGBに変更(透過色:50%)
	convertCode(1, 1);
});
const code = document.getElementById("code");
const bkcolor = document.getElementById("bkcolor");
function convertCode(type, alpha)
{
	const r = 255;
	const g = 0;
	const b = 0;
	const a = alpha == 0 ? 1.0 : 0.5;
	let rgbString = "";
	if(type == 1)//rgba
	{
		rgbString = rgbaToHex(r, g, b, a, 1);//hex
		rgbString = hex8ToRgba(rgbString);
	}
	else
	{
		rgbString = rgbaToHex(r, g, b, a, alpha);//hex
	}
	code.innerText = rgbString;
	bkcolor.style.backgroundColor = rgbString;
}

function rgbaToHex(r, g, b, a, option)
{
	const toHex = val => 
	{
		const h = val.toString(16).toUpperCase();
		return h.length === 1 ? "0"+h : h;
	};
	// a: 0～1 を 0～255 に変換
	const aa = Math.round(a * 255);
	let tmp = "";
	if(option == 0)
	{
		tmp = "#" + toHex(r) + toHex(g) + toHex(b);
	}
	else
	{
		tmp = "#" + toHex(r) + toHex(g) + toHex(b) + toHex(aa);	
	}
	return tmp;
}
function hex8ToRgba(hex) 
{
	hex = hex.replace('#', '');
	const r = parseInt(hex.slice(0,2), 16);
	const g = parseInt(hex.slice(2,4), 16);
	const b = parseInt(hex.slice(4,6), 16);
	const a = parseInt(hex.slice(6,8), 16) / 255;
	return `rgb(${r} ${g} ${b} / ${a.toFixed(2)})`;
}

RGBをカラーコードのHEXに変換するため、
16進数表記の文字列に変換しています。
※サンプルでは、自作関数のtoHexを使っています。
標準組み込みオブジェクトにもtoHex関数は存在しますが、今回は使いません。

カラーコードは#に続けて6桁の16進数(透過色は8桁)で表現します。
toHex()メソッドは、すべてのブラウザでサポートされているわけではないため非推奨となっているようです。
この場合、toString(16)を使用するといいらしいです。
(例)
const r =255;
const rHex = r.toString(16);//ff

16進数表記の文字列hexから最初の2文字を取り出します。
それを10進数の整数に変換します。
hexには#を取り除いた16進数の文字列が入っています。
hexをslice関数を使用して文字列を範囲を指定して取得した結果が16進数なので
parseIntの第2引数に16と設定しています。
そしてparseIntで16進数を10進数の整数に変換しています。



戻る

back

Color Code Conversion

HEX and RGB

Change Red to HEX
Change Red to RGB
Change Red to HEX (Transparency: 50%)
Change Red to RGB (Transparency: 50%)


<button id="b1">Change Red to HEX</button><br> <button id="b2">Change Red to RGB</button><br> <button id="b3">Change Red to HEX (Transparency: 50%)</button><br> <button id="b4">Change Red to RGB (Transparency: 50%)</button><br> <br> <div style="background-color:rgb(245 255 250 / 1.0);text-align:left;">Code</div> <div id="code"></div> <div style="background-color:rgb(245 255 250 / 1.0);text-align:left;">Color</div> <div id="bkcolor">[Color appears here]</div>
copy

const b1 = document.getElementById("b1");
b1.addEventListener('click', () =>
{
	//Change red to HEX
	convertCode(0, 0);
});
const b2 = document.getElementById("b2");
b2.addEventListener('click', () =>
{
	//Change red to RGB
	convertCode(1, 0);
});
const b3 = document.getElementById("b3");
b3.addEventListener('click', () =>
{
	//Change red to HEX (Transparent color: 50%)
	convertCode(0, 1);
});
const b4 = document.getElementById("b4");
b4.addEventListener('click', () =>
{
	//Change red to RGB (Transparent color: 50%)
	convertCode(1, 1);
});
const code = document.getElementById("code");
const bkcolor = document.getElementById("bkcolor");
function convertCode(type, alpha)
{
	const r = 255;
	const g = 0;
	const b = 0;
	const a = alpha == 0 ? 1.0 : 0.5;
	let rgbString = "";
	if(type == 1)//rgba
	{
		rgbString = rgbaToHex(r, g, b, a, 1);//hex
		rgbString = hex8ToRgba(rgbString);
	}
	else
	{
		rgbString = rgbaToHex(r, g, b, a, alpha);//hex
	}
	code.innerText = rgbString;
	bkcolor.style.backgroundColor = rgbString;
}

function rgbaToHex(r, g, b, a, option)
{
	const toHex = val => 
	{
		const h = val.toString(16).toUpperCase();
		return h.length === 1 ? "0"+h : h;
	};
	// a: Convert 0-1 to 0-255
	const aa = Math.round(a * 255);
	let tmp = "";
	if(option == 0)
	{
		tmp = "#" + toHex(r) + toHex(g) + toHex(b);
	}
	else
	{
		tmp = "#" + toHex(r) + toHex(g) + toHex(b) + toHex(aa);	
	}
	return tmp;
}
function hex8ToRgba(hex) 
{
	hex = hex.replace('#', '');
	const r = parseInt(hex.slice(0,2), 16);
	const g = parseInt(hex.slice(2,4), 16);
	const b = parseInt(hex.slice(4,6), 16);
	const a = parseInt(hex.slice(6,8), 16) / 255;
	return `rgb(${r} ${g} ${b} / ${a.toFixed(2)})`;
}

To convert RGB to a hex color code, convert it to a hexadecimal string.
※In this sample, custom function , toHex.
There is also a toHex function in standard built-in objects, but won't use it this time.

Color codes are expressed as six hexadecimal digits (eight digits for transparent colors).
The toHex() method is deprecated because it is not supported by all browsers.
In this case, it is recommended to use toString(16).
(Example)
const r = 255;
const rHex = r.toString(16);//ff

Extract the first two characters from the hexadecimal string hex.
Convert it to a decimal integer.
hex contains the hexadecimal string with the # removed.
The slice function uses hex to specify a string range and returns a hexadecimal value.
The second argument of parseInt is set to 16.
Then, parseInt converts the hexadecimal value to a decimal integer.



back