RGB 형식의 색상을 Hex 형식으로 변환하거나 Hex 형식으로 변환하는 방법은 무엇입니까?
예를 들어 ''#0080C0''를 '(0, 128, 192)'로 변환합니다.
Rgb 를 진수 변환 및 추가 할 수 다음 필요한 zero padding.
<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 진정한 바벨. > 거짓값 -;
function componentToHex(c) {
var hex = c.toString(16);
return hex.length == 1 ? "0" + hex : hex;
}
function rgbToHex(r, g, b) {
return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}
alert(rgbToHex(0, 51, 255)); // #0033ff
끝 - < 스니핏 >;!
다른 길로 변환:
<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 진정한 바벨. > 거짓값 -;
function hexToRgb(hex) {
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : null;
}
alert(hexToRgb("#0033ff").g); // "51";
끝 - < 스니핏 >;!
마지막으로, 대체 버전의 리프트로스 () ',' 에서 설명한 것처럼 1 및 [@casablanca& # 39 의 오토메이티드] 에 제안된 이 같은 발언은 @cwolves:
<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 진정한 바벨. > 거짓값 -;
function rgbToHex(r, g, b) {
return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}
alert(rgbToHex(0, 51, 255)); // #0033ff
끝 - < 스니핏 >;!
3일 12월 2012년 # # 업데이트
<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 진정한 바벨. > 거짓값 -;
function hexToRgb(hex) {
// Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
hex = hex.replace(shorthandRegex, function(m, r, g, b) {
return r + r + g + g + b + b;
});
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : null;
}
alert(hexToRgb("#0033ff").g); // "51";
alert(hexToRgb("#03f").g); // "51";
끝 - < 스니핏 >;!
대체 버전의 에스토리브:
function hexToRgb(hex) {
var bigint = parseInt(hex, 16);
var r = (bigint >> 16) & 255;
var g = (bigint >> 8) & 255;
var b = bigint & 255;
return r + "," + g + "," + b;
}
편집: 3/28/2017 심지어 faster< /del> 것으로 보이는데, 이것은 다른 외곽진입 < del>;;
function hexToRgbNew(hex) {
var arrBuff = new ArrayBuffer(4);
var vw = new DataView(arrBuff);
vw.setUint32(0,parseInt(hex, 16),false);
var arrByte = new Uint8Array(arrBuff);
return arrByte[1] + "," + arrByte[2] + "," + arrByte[3];
}
편집: 8/11/2017 이후 새로운 외곽진입 위에 있지 않은 더 많은 테스트를 더 빠르게: (. 하지만 재미있는 것은 또 다른 방법입니다.
<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 진정한 바벨. 참 - >.
const rgbToHex = (r, g, b) => '#' + [r, g, b].map(x => {
const hex = x.toString(16)
return hex.length === 1 ? '0' + hex : hex
}).join('')
console.log(rgbToHex(0, 51, 255)); // '#0033ff'
끝 - < 스니핏 >;!
어레이에서는 되돌려줍니다 ' [r, g, b]'. 또한 ',' 등 세 작품을 대표 hex ", # 03F".
<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 진정한 바벨. 참 - >.
const hexToRgb = hex =>
hex.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i
,(m, r, g, b) => '#' + r + r + g + g + b + b)
.substring(1).match(/.{2}/g)
.map(x => parseInt(x, 16))
console.log(hexToRgb("#0033ff")) // [0, 51, 255]
console.log(hexToRgb("#03f")) // [0, 51, 255]
끝 - < 스니핏 >;!
<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 진정한 바벨. 참 - >.
const rgbToHex = (r, g, b) => '#' + [r, g, b]
.map(x => x.toString(16).padStart(2, '0')).join('')
console.log(rgbToHex(0, 51, 255)); // '#0033ff'
끝 - < 스니핏 >;!
이는 이전 브라우저에서 지원되지 않는 오토메이티드 최신값 ecma 스크립트 기능을 사용합니다. 이 코드를 모든 환경에서 스케쳐내 작업하십시오 콩지름에 [바벨] (https://babeljs.io/) 컴파일하십시오 코드에.
function rgb2hex(red, green, blue) {
var rgb = blue | (green << 8) | (red << 16);
return '#' + (0x1000000 + rgb).toString(16).slice(1)
}
function hex2rgb(hex) {
// long version
r = hex.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i);
if (r) {
return r.slice(1,4).map(function(x) { return parseInt(x, 16); });
}
// short version
r = hex.match(/^#([0-9a-f])([0-9a-f])([0-9a-f])$/i);
if (r) {
return r.slice(1,4).map(function(x) { return 0x11 * parseInt(x, 16); });
}
return null;
}
이 코드는 동의하십시오 # fff 및 # ffffff 변형 및 불투명도의.
function hex2rgb(hex, opacity) {
var h=hex.replace('#', '');
h = h.match(new RegExp('(.{'+h.length/3+'})', 'g'));
for(var i=0; i<h.length; i++)
h[i] = parseInt(h[i].length==1? h[i]+h[i]:h[i], 16);
if (typeof opacity != 'undefined') h.push(opacity);
return 'rgba('+h.join(',')+')';
}
이 중 계산됩니까 스타일입니까 인적 또는 색상에는 사용할 수 있다.
function rgbToHex(color) {
color = ""+ color;
if (!color || color.indexOf("rgb") < 0) {
return;
}
if (color.charAt(0) == "#") {
return color;
}
var nums = /(.*?)rgb\((\d+),\s*(\d+),\s*(\d+)\)/i.exec(color),
r = parseInt(nums[2], 10).toString(16),
g = parseInt(nums[3], 10).toString(16),
b = parseInt(nums[4], 10).toString(16);
return "#"+ (
(r.length == 1 ? "0"+ r : r) +
(g.length == 1 ? "0"+ g : g) +
(b.length == 1 ? "0"+ b : b)
);
}
// not computed
<div style="color: #4d93bc; border: 1px solid red;">...</div>
// computed
<div style="color: rgb(77, 147, 188); border: 1px solid rgb(255, 0, 0);">...</div>
console.log( rgbToHex(color) ) // #4d93bc
console.log( rgbToHex(borderTopColor) ) // #ff0000
汲摹窍妨绰 알파 채널 (불투명도의). 신경쓰지 않고, 두 경우 모두 작동됨 지정되었거나 해시라고 않습니다.
function hexToRGBA(hex, opacity) {
return 'rgba(' + (hex = hex.replace('#', '')).match(new RegExp('(.{' + hex.length/3 + '})', 'g')).map(function(l) { return parseInt(hex.length%2 ? l+l : l, 16) }).concat(opacity||1).join(',') + ')';
}
예를 들면 다음과 같다:
hexToRGBA('#fff') -> rgba(255,255,255,1)
hexToRGBA('#ffffff') -> rgba(255,255,255,1)
hexToRGBA('#fff', .2) -> rgba(255,255,255,0.2)
hexToRGBA('#ffffff', .2) -> rgba(255,255,255,0.2)
hexToRGBA('fff', .2) -> rgba(255,255,255,0.2)
hexToRGBA('ffffff', .2) -> rgba(255,255,255,0.2)
일반적으로 비트 솔루션을 괴상하죠 있다. 그러나 이 경우 내 생각엔 그게 더 세련된 & # 128516.
"'js 함수은 에스토리브 (에스코로) { 반품하십시오 { 빨강: (에스코로 > >; 16) &. 0xFF, 녹색: (에스코로 > >; 8) &. 0xFF, 블루: 에스코로 &. 0xFF, } } "'
사용법:
"'js const {} = 에스토리브 빨강, 녹색, 파랑 (0xFF00FF)
콘솔드로그 255w (red) / / 콘솔드로그 (녹색) / / 0 255w 콘솔드로그 (파란색) / / "'
일반적으로 rgba 이름으로, rgb 색상 값이 // 무시하고 hsl 표기법으로 표현된 또는 hex -
// Hex 값을 3 수 또는 6.
물론 Rgb // 퍼센트 정수 값을 수 있습니다.
이러한 모든 형식을 잘 고려하여, 최소한이요 //
String.prototype.padZero= function(len, c){
var s= this, c= c || "0", len= len || 2;
while(s.length < len) s= c + s;
return s;
}
var colors={
colornames:{
aqua: '#00ffff', black: '#000000', blue: '#0000ff', fuchsia: '#ff00ff',
gray: '#808080', green: '#008000', lime: '#00ff00', maroon: '#800000',
navy: '#000080', olive: '#808000', purple: '#800080', red: '#ff0000',
silver: '#c0c0c0', teal: '#008080', white: '#ffffff', yellow: '#ffff00'
},
toRgb: function(c){
c= '0x'+colors.toHex(c).substring(1);
c= [(c>> 16)&255, (c>> 8)&255, c&255];
return 'rgb('+c.join(',')+')';
},
toHex: function(c){
var tem, i= 0, c= c? c.toString().toLowerCase(): '';
if(/^#[a-f0-9]{3,6}$/.test(c)){
if(c.length< 7){
var A= c.split('');
c= A[0]+A[1]+A[1]+A[2]+A[2]+A[3]+A[3];
}
return c;
}
if(/^[a-z]+$/.test(c)){
return colors.colornames[c] || '';
}
c= c.match(/\d+(\.\d+)?%?/g) || [];
if(c.length<3) return '';
c= c.slice(0, 3);
while(i< 3){
tem= c[i];
if(tem.indexOf('%')!= -1){
tem= Math.round(parseFloat(tem)*2.55);
}
else tem= parseInt(tem);
if(tem< 0 || tem> 255) c.length= 0;
else c[i++]= tem.toString(16).padZero(2);
}
if(c.length== 3) return '#'+c.join('').toLowerCase();
return '';
}
}
//var c='#dc149c';
//var c='rgb(100%,25%,0)';
//
var c= 'red';
alert(colors.toRgb(c)+'\n'+colors.toHex(c));
@ 팀, 추가하려면 오토메이티드 (its) 에 이 조금 서먹서먹하다 피팅이면 셀명).
내가 찾은 후 리프트로스 기록된 대로, 이 함수는 요소와 문자열으로 요점이지 및 r · g · b 값 범위 내의 0-255 가을 합니다.
하지만 분명한 것은 대부분의 i& # 39 m, 정말 이 그림 2 시간이나 걸렸다 보일 수 있습니다 다음 날 방법을 통해 기존 주식의 로그아웃되며 7 선 전 내 문제가 다른 것을 알게 했다. 따라서 다른 것은 시간 절약합니다 &. # 39 의 내 약간 수정된 코드가 here& 귀찮아, 체크 하는 전제 조건 및 트림하여 끕니까 외부 비트에 구체화하십시오.
function rgbToHex(r, g, b) {
if(r < 0 || r > 255) alert("r is out of bounds; "+r);
if(g < 0 || g > 255) alert("g is out of bounds; "+g);
if(b < 0 || b > 255) alert("b is out of bounds; "+b);
return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1,7);
}
비교하십시오 하는 경우 두 가지 색상 값 (RGB 색상 또는 hex 값에 따라, 주어진 이름) 또는 변환하시겠습니까 HEX HTML5 캔바스를 객체에는 사용합니다.
"' var 캔바스를 = 도쿠망스크리틸망 (canvas" ";). var ctx 티스트카누스바s.제콘테스트 (& # 39, 2d& # 39;), =
치스윈필경일 = " rgb (통과, 어떤 값) ";; 치스윈필경일 temp = var. 치스윈필경일 = " someColor";;
경고 (치스윈필경일 = 임시); "'
참고로 이 처리하십니까 알파 채널 전혀 없습니다.
const arrayToRGBString = rgb => `rgb(${rgb.join(',')})`;
const hexToRGBArray = hex => hex.match(/[A-Za-z0-9]{2}/g).map(v => parseInt(v, 16));
const rgbArrayToHex = rgb => `#${rgb.map(v => v.toString(16).padStart(2, '0')).join('')}`;
const rgbStringToArray = rgb => rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/).splice(1, 3)
.map(v => Number(v));
const rgbStringToHex = rgb => rgbArrayToHex(rgbStringToArray(rgb));
팀 다운되어도 아래와 같이 3 자리 에스토리브 작동입니다 개선될 수 있다.
var hex2Rgb = function(hex){
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})|([a-f\d]{1})([a-f\d]{1})([a-f\d]{1})$/i.exec(hex);
return result ? {
r: parseInt(hex.length <= 4 ? result[4]+result[4] : result[1], 16),
g: parseInt(hex.length <= 4 ? result[5]+result[5] : result[2], 16),
b: parseInt(hex.length <= 4 ? result[6]+result[6] : result[3], 16),
toString: function() {
var arr = [];
arr.push(this.r);
arr.push(this.g);
arr.push(this.b);
return "rgb(" + arr.join(",") + ")";
}
} : null;
};
이 때문에 문제가 왔는지 구현하므로 내가 원하는 모든 색상 값 및 불투명도와 추가할 수 있어야 하고, 그래서 수락하려면 이 빠른 jQuery 플러그인에는 넷윈을 캔바스를 사용하는 현대의 브라우저. 그냥 작동합니까 큰 것으로 보인다.
알고보니 내가 만드는 방법을 제대로 파악, t # 39 can& 플러그인에는 도왔으매 I& # 39, ll 그냥 일반 함수은 χ02 정보기술 (it) 을 포함한다.
//accepts any value like '#ffffff', 'rgba(255,255,255,1)', 'hsl(0,100%,100%)', or 'white'
function toRGBA( c ) {
var
can = document.createElement( 'canvas' ),
ctx = can.getContext( '2d' );
can.width = can.height = 1;
ctx.fillStyle = c;
console.log( ctx.fillStyle ); //always css 6 digit hex color string, e.g. '#ffffff'
ctx.fillRect( 0, 0, 1, 1 ); //paint the canvas
var
img = ctx.getImageData( 0, 0, 1, 1 ),
data = img.data,
rgba = {
r: data[ 0 ], //0-255 red
g: data[ 1 ], //0-255 green
b: data[ 2 ], //0-255 blue
a: data[ 3 ] //0-255 opacity (0 being transparent, 255 being opaque)
};
return rgba;
};
이 스니핏을 hex rgb 로 변환 및 rgb 를 hex.
[데모 보기] (
)"' 함수은 에스토리브 (str) { if (/ ^ # ([9a 0 f] [9a 0 f] {3} {6}) $ /ig.test (str) { var 진수 = 스트리스 스트라 (1). 진수 = 3 = 에스트렌크스? 에스트리플레이스 (/ / g, & # 39 (.), $1 $1& # 39;) . hex. var rgb = 페르세인트 (hex, 16). rgb (& # 39, & # 39 복귀하십시오. + [(rgb > >; 16) &. 255 (rgb > >; 8) &. 255w, rgb &. 255] 스타인 (& # 39, & # 39;) + & # 39;) & # 39;; }
반품하십시오 거짓값. }
함수은 리프트로스 (빨강, 녹색, 파랑) {
대한 (var i = 0; 내가 <. 3. ++i) {
if (isNaN < n (n). 0 ᄂ씨 >. 255) { 반품하십시오 거짓값. }
아웃해야 + = (n <. 16? # 39, & # 39 0&. . & # 39, & # 39;) + 니컬러스토스트링 (16). } 아웃해야 반품하십시오. } "'
내 버전니다 hex2rbg:
() 를 사용할 경우 IE8 에스스트림 제거 할 수 있습니다.
예:
hex2rgb('#fff') //rgb(255,255,255)
hex2rgb('#fff', 1) //rgba(255,255,255,1)
hex2rgb('#ffffff') //rgb(255,255,255)
hex2rgb('#ffffff', 1) //rgba(255,255,255,1)
코드:
function hex2rgb (hex, opacity) {
hex = hex.trim();
hex = hex[0] === '#' ? hex.substr(1) : hex;
var bigint = parseInt(hex, 16), h = [];
if (hex.length === 3) {
h.push((bigint >> 4) & 255);
h.push((bigint >> 2) & 255);
} else {
h.push((bigint >> 16) & 255);
h.push((bigint >> 8) & 255);
}
h.push(bigint & 255);
if (arguments.length === 2) {
h.push(opacity);
return 'rgba('+h.join()+')';
} else {
return 'rgb('+h.join()+')';
}
}
R = HexToR("#FFFFFF");
G = HexToG("#FFFFFF");
B = HexToB("#FFFFFF");
function HexToR(h) {return parseInt((cutHex(h)).substring(0,2),16)}
function HexToG(h) {return parseInt((cutHex(h)).substring(2,4),16)}
function HexToB(h) {return parseInt((cutHex(h)).substring(4,6),16)}
function cutHex(h) {return (h.charAt(0)=="#") ? h.substring(1,7):h}
그 결과 이 함수를 사용하여 아키베 없이 배정됩니다. )