jsでRGBと16進数の色を変換するにはどうすればよいですか? (コード例)

RGB 色と 16 進数の色を相互に変換するにはどうすればよいですか?この記事では、rgbと16進数の相互変換の原理を誰でも理解できるように、jsがどのようにしてrgbと16進数の色の相互変換を実現しているのかを紹介します。困っている友人は参考にしていただければ幸いです。

CSS で色を定義する場合は、rgb(182, 0, 35) などの RGB カラー値を使用できます。また、#B60023 などの 16 進数のカラー値も使用できます。 rgb(182, 0, 35) であろうと #B60023 であろうと、実際にはどちらの表現方法が使用されても同じ色を表しますが、Web ページの刻々と変化する性質により、遭遇する状況も異なる場合があります。時々、RGB と 16 進数の色を変換する必要があります。

RGB カラーと 16 進カラーを変換する方法の例を見てみましょう。

16 進数のカラー値の場合、RGB を左から右に表す 2 つのグループに分けることができます。 2 つの 16 進数の最初の数値に 16 進数を乗算し、その結果を 2 番目の数値に加算して、0 ～ 255 の数値を取得します。

たとえば、16 進数のカラー値 #B60023 があり、これを RGB に変換すると、R (B6)、G (00)、B (23) となります。すると、赤は B(11) x 16 6 = 182 となります。緑は 0、青は 2 x 16 3 = 35 です。したがって、16 進カラー値 #B60023 に対応する rgb() red は、rgb(182, 0, 35) となります。

それでは、JavaScript を使用して、RGB 色と 16 進数の色を相互に変換するにはどうすればよいでしょうか?その方法を見てみましょう。

JavaScript の実装色変換の中核は塩基間の変換です。

RGB 形式は実際には 10 進数表現であるため、16 進数のカラーと RGB カラーの間の変換は 16 進数と 10 進数間の変換になります。

1. JavaScript は RGB カラーの 16 進数への変換 (10 進数から 16 進数へ) を実装します。

10 進数を 16 進数に変換します。コア コードは次のとおりです:

var num=255; 
num.toString(16);

その他 結果は FF です。 。

説明: toString のパラメーター「16」は、値が 16 進文字列に変換されることを示します。

RGB カラーを 16 進数に変換する サンプル コードは次のとおりです:

var sRgb = "RGB(23, 245, 56)";
var sHexColor = sRgb.colorHex(); //colorHex()表示转换为十六进制方法

//十六进制颜色值的正则表达式
var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;

/*RGB颜色转换为16进制*/
String.prototype.colorHex = function(){
	var that = this;
	if(/^(rgb|RGB)/.test(that)){
		var aColor = that.replace(/(?:\(|\)|rgb|RGB)*/g,"").split(",");
		var strHex = "#";
		for(var i=0; i<aColor.length; i++){
			var hex = Number(aColor[i]).toString(16);
			if(hex === "0"){
				hex += hex;	
			}
			strHex += hex;
		}
		if(strHex.length !== 7){
			strHex = that;	
		}
		return strHex;
	}else if(reg.test(that)){
		var aNum = that.replace(/#/,"").split("");
		if(aNum.length === 6){
			return that;	
		}else if(aNum.length === 3){
			var numHex = "#";
			for(var i=0; i<aNum.length; i+=1){
				numHex += (aNum[i]+aNum[i]);
			}
			return numHex;
		}
	}else{
		return that;	
	}
};

2. JavaScript は 16 進数のカラーから RGB カラーへの変換を実装します

16 進数を 10 進数に変換するのは比較的簡単です。コア コードは次のとおりです。

parseInt("0xFF");

結果は 255

説明: 「0x」は、現在のシステムが 16 進数であることを示します。後続の parseInt パラメータがないため、デフォルトでは 10 進数に変換されます。

16 進数のカラーを RGB カラーに変換する コード例は次のとおりです:

var sHex = "#34538b";
var sRgbColor = sHex.colorRgb();//colorRgb()表示转为RGB颜色值的方法

//十六进制颜色值的正则表达式
var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;

/*16进制颜色转为RGB格式*/
String.prototype.colorRgb = function(){
	var sColor = this.toLowerCase();
	if(sColor && reg.test(sColor)){
		if(sColor.length === 4){
			var sColorNew = "#";
			for(var i=1; i<4; i+=1){
				sColorNew += sColor.slice(i,i+1).concat(sColor.slice(i,i+1));	
			}
			sColor = sColorNew;
		}
		//处理六位的颜色值
		var sColorChange = [];
		for(var i=1; i<7; i+=2){
			sColorChange.push(parseInt("0x"+sColor.slice(i,i+2)));	
		}
		return "RGB(" + sColorChange.join(",") + ")";
	}else{
		return sColor;	
	}
};

要約: 上記はこの記事の全内容です。ご自身で試してみてください。皆さんの勉強のお役に立てれば幸いです。関連チュートリアルの詳細については、JavaScript ビデオ チュートリアル 、jQuery ビデオ チュートリアル 、bootstrap チュートリアル をご覧ください。

以上がjsでRGBと16進数の色を変換するにはどうすればよいですか? (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。