js에서 rgb 및 16진수 색상을 변환하는 방법은 무엇입니까? (코드 예)

RGB와 16진수 색상을 서로 변환하는 방법은 무엇입니까? 이 기사에서는 js가 rgb와 16진수 색상 간의 상호 변환을 구현하는 방법을 소개하여 모든 사람이 rgb와 16진수 색상 간의 상호 변환 원리를 이해할 수 있도록 합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

CSS에서 색상을 정의하려면 rgb 색상 값을 사용할 수 있습니다(예: rgb(182, 0, 35)). 또한 16진수 색상 값(예: #B60023)을 사용할 수도 있습니다. rgb(182, 0, 35)이든 #B60023이든 둘 다 동일한 색상을 나타냅니다. 실제로 어떤 표현 방법을 사용하더라도 웹 페이지의 끊임없이 변화하는 특성으로 인해 발생하는 상황도 다를 수 있습니다. 이상해요. 때로는 RGB와 16진수 색상을 변환해야 할 때도 있습니다.

RGB와 16진수 색상을 변환하는 방법의 예를 살펴보겠습니다.

16진수 색상 값의 경우 왼쪽에서 오른쪽으로 RGB를 나타내는 두 그룹으로 나눌 수 있습니다. 두 개의 16진수 중 첫 번째 숫자에 16진수를 곱하고 그 결과를 두 번째 숫자에 더해 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() 빨간색은 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!