반응형
RGB 값이 아닌 헥스 컬러 값을 얻는 방법은?
다음 jQuery를 사용하면 요소의 배경색 RGB 값을 얻을 수 있습니다.
$('#selector').css('backgroundColor');
RGB가 아닌 hex 값을 얻을 방법이 있습니까?
TL;DR
이 깨끗한 한 줄 기능을 둘 다 사용합니다.rgb그리고.rgba지원:
const rgba2hex = (rgba) => `#${rgba.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+\.{0,1}\d*))?\)$/).slice(1).map((n, i) => (i === 3 ? Math.round(parseFloat(n) * 255) : parseFloat(n)).toString(16).padStart(2, '0').replace('NaN', '')).join('')}`
2021년 업데이트된 답변
제가 원래 이 질문에 대답한 지 많은 시간이 흘렀습니다.그러고 나서 멋진 ECMAscript 5와 2015+ 기능은 화살표 기능, Array.map, String.padStart 및 템플릿 문자열과 같은 브라우저에서 주로 사용할 수 있게 되었습니다.몇 년 전부터 크로스 브라우저 원-라이너 작성이 가능합니다.rgb2hex:
const rgb2hex = (rgb) => `#${rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/).slice(1).map(n => parseInt(n, 10).toString(16).padStart(2, '0')).join('')}`
// Use as you wish...
console.log(rgb2hex('rgb(0,0,0)'))
console.log(rgb2hex('rgb(255, 255, 255)'))
console.log(rgb2hex('rgb(255,0,0)'))
console.log(rgb2hex('rgb(38, 170, 90)'))이것은 각각의 숫자를 안에 넣도록 규칙적인 표현을 사용함으로써 작동합니다.rgb문자열,slice(1)숫자만 얻다 (첫번째 결과)match전체 문자열 자체입니다.)map각각의 숫자를 통해 반복하고, 각각의 반복은 다음으로 변환됩니다.Number와 함께parseInt, 16진법으로 돌아가죠String(기본-16 변환을 통해), 필요한 경우 다음을 통해 0을 추가합니다.padStart.마침내.join각각의 숫자를 고유한 숫자로 변환/조정함String처음부터'#'.
물론 원라이너로서 큰 노력 없이 연장할 수 있습니다.rgba2hex:
const rgba2hex = (rgba) => `#${rgba.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+\.{0,1}\d*))?\)$/).slice(1).map((n, i) => (i === 3 ? Math.round(parseFloat(n) * 255) : parseFloat(n)).toString(16).padStart(2, '0').replace('NaN', '')).join('')}`
// Now it doesn't matter if 'rgb' or 'rgba'...
console.log(rgba2hex('rgb(0,0,0)'))
console.log(rgba2hex('rgb(255, 255, 255)'))
console.log(rgba2hex('rgb(255,0,0)'))
console.log(rgba2hex('rgb(38, 170, 90)'))
console.log(rgba2hex('rgba(255, 0, 0, 0.5)'))
console.log(rgba2hex('rgba(0,255,0,1)'))
console.log(rgba2hex('rgba(127,127,127,0.25)'))그리고 이것이 마지막입니다.하지만 오래된 학교 자바스크립트 세계 속으로 깊이 들어가고 싶다면 계속 읽어보세요.
2010년도 원답
@Matt 제안을 바탕으로 작성한 보다 깨끗한 솔루션은 다음과 같습니다.
function rgb2hex(rgb) {
rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
function hex(x) {
return ("0" + parseInt(x).toString(16)).slice(-2);
}
return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}
일부 브라우저는 이미 색상을 16진수로 반환합니다(Internet Explorer 8 이하 버전).이러한 경우를 처리해야 할 경우 @gfrobenius가 제안한 것처럼 함수 내부에 조건을 추가하면 됩니다.
function rgb2hex(rgb) {
if (/^#[0-9A-F]{6}$/i.test(rgb)) return rgb;
rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
function hex(x) {
return ("0" + parseInt(x).toString(16)).slice(-2);
}
return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}
jQuery를 사용하고 있고 보다 완벽한 접근 방식을 원한다면 jQuery 1.4.3부터 사용 가능한 CSS Hook을 사용할 수 있습니다. jQuery.css("backgroundColor")가 16진수 형식으로 반환되도록 강제할 수 있습니까?
var hexDigits = new Array
("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f");
//Function to convert rgb color to hex format
function rgb2hex(rgb) {
rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}
function hex(x) {
return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
}
(출처)
대부분의 브라우저는 다음을 사용할 때 RGB 값을 반환합니다.
$('#selector').css('backgroundColor');
I.E(지금까지 테스트된 6개만)만 Hex 값을 반환합니다.
I.E의 오류 메시지를 방지하기 위해 if 문으로 함수를 랩핑할 수 있습니다.
function rgb2hex(rgb) {
if ( rgb.search("rgb") == -1 ) {
return rgb;
} else {
rgb = rgb.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+))?\)$/);
function hex(x) {
return ("0" + parseInt(x).toString(16)).slice(-2);
}
return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}
}
rgba 호환성을 위해 @ErickPetru 업데이트됨:
function rgb2hex(rgb) {
rgb = rgb.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+))?\)$/);
function hex(x) {
return ("0" + parseInt(x).toString(16)).slice(-2);
}
return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}
regex는 정의된 경우 알파 값과 일치하도록 업데이트했지만 사용하지 않았습니다.
여기 jQuery를 사용하지 않는 ES6 원 라이너가 있습니다.
var rgb = document.querySelector('#selector').style['background-color'];
return '#' + rgb.substr(4, rgb.indexOf(')') - 4).split(',').map((color) => parseInt(color).toString(16).padStart(2, '0')).join('');
여기 투명도 검사하는 버전이 있습니다. 제 목표가 결과를 스타일 속성에 삽입하는 것이었기 때문에 이것이 필요했습니다. 여기서 헥스 컬러의 투명 버전은 실제로 "투명"이라는 단어입니다.
function rgb2hex(rgb) {
if ( rgb.search("rgb") == -1 ) {
return rgb;
}
else if ( rgb == 'rgba(0, 0, 0, 0)' ) {
return 'transparent';
}
else {
rgb = rgb.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+))?\)$/);
function hex(x) {
return ("0" + parseInt(x).toString(16)).slice(-2);
}
return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}
}
짧다
// c - color str e.g."rgb(12,233,43)", result color hex e.g. "#0ce92b"
let rgb2hex=c=>'#'+c.match(/\d+/g).map(x=>(+x).toString(16).padStart(2,0)).join``
// rgb - color str e.g."rgb(12,233,43)", result color hex e.g. "#0ce92b"
let rgb2hex= c=> '#'+c.match(/\d+/g).map(x=>(+x).toString(16).padStart(2,0)).join``
console.log(rgb2hex("rgb(12,233,43"));16진수로 구성된 요소의 배경색을 반환하는 함수입니다.
function getBgColorHex(elem){
var color = elem.css('background-color')
var hex;
if(color.indexOf('#')>-1){
//for IE
hex = color;
} else {
var rgb = color.match(/\d+/g);
hex = '#'+ ('0' + parseInt(rgb[0], 10).toString(16)).slice(-2) + ('0' + parseInt(rgb[1], 10).toString(16)).slice(-2) + ('0' + parseInt(rgb[2], 10).toString(16)).slice(-2);
}
return hex;
}
사용 예:
$('#div1').click(function(){
alert(getBgColorHex($(this));
}
Readable & & Reg-exp 무료(Reg-exp 없음)
저는 reg-exp가 없고 읽을 수 있는 기본 기능을 사용하는 기능을 만들었습니다.
함수는 색상을 16진수, rgb 또는 rgba CSS 형식으로 받아들이고 16진수 표현을 반환합니다.
편집: rgba() 형식 구문 분석에 오류가 발생했습니다. 수정됨...
function getHexColor( color ){
//if color is already in hex, just return it...
if( color.indexOf('#') != -1 ) return color;
//leave only "R,G,B" :
color = color
.replace("rgba", "") //must go BEFORE rgb replace
.replace("rgb", "")
.replace("(", "")
.replace(")", "");
color = color.split(","); // get Array["R","G","B"]
// 0) add leading #
// 1) add leading zero, so we get 0XY or 0X
// 2) append leading zero with parsed out int value of R/G/B
// converted to HEX string representation
// 3) slice out 2 last chars (get last 2 chars) =>
// => we get XY from 0XY and 0X stays the same
return "#"
+ ( '0' + parseInt(color[0], 10).toString(16) ).slice(-2)
+ ( '0' + parseInt(color[1], 10).toString(16) ).slice(-2)
+ ( '0' + parseInt(color[2], 10).toString(16) ).slice(-2);
}
@Jim F 답변과 동일한 답변이지만 ES6 구문에서는 지침이 적습니다.
const rgb2hex = (rgb) => {
if (rgb.search("rgb") === -1) return rgb;
rgb = rgb.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+))?\)$/);
const hex = (x) => ("0" + parseInt(x).toString(16)).slice(-2);
return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
};
부트스트랩 색상 선택기에서 가져온 색상 클래스
// Color object
var Color = function(val) {
this.value = {
h: 1,
s: 1,
b: 1,
a: 1
};
this.setColor(val);
};
Color.prototype = {
constructor: Color,
//parse a string to HSB
setColor: function(val){
val = val.toLowerCase();
var that = this;
$.each( CPGlobal.stringParsers, function( i, parser ) {
var match = parser.re.exec( val ),
values = match && parser.parse( match ),
space = parser.space||'rgba';
if ( values ) {
if (space === 'hsla') {
that.value = CPGlobal.RGBtoHSB.apply(null, CPGlobal.HSLtoRGB.apply(null, values));
} else {
that.value = CPGlobal.RGBtoHSB.apply(null, values);
}
return false;
}
});
},
setHue: function(h) {
this.value.h = 1- h;
},
setSaturation: function(s) {
this.value.s = s;
},
setLightness: function(b) {
this.value.b = 1- b;
},
setAlpha: function(a) {
this.value.a = parseInt((1 - a)*100, 10)/100;
},
// HSBtoRGB from RaphaelJS
// https://github.com/DmitryBaranovskiy/raphael/
toRGB: function(h, s, b, a) {
if (!h) {
h = this.value.h;
s = this.value.s;
b = this.value.b;
}
h *= 360;
var R, G, B, X, C;
h = (h % 360) / 60;
C = b * s;
X = C * (1 - Math.abs(h % 2 - 1));
R = G = B = b - C;
h = ~~h;
R += [C, X, 0, 0, X, C][h];
G += [X, C, C, X, 0, 0][h];
B += [0, 0, X, C, C, X][h];
return {
r: Math.round(R*255),
g: Math.round(G*255),
b: Math.round(B*255),
a: a||this.value.a
};
},
toHex: function(h, s, b, a){
var rgb = this.toRGB(h, s, b, a);
return '#'+((1 << 24) | (parseInt(rgb.r) << 16) | (parseInt(rgb.g) << 8) | parseInt(rgb.b)).toString(16).substr(1);
},
toHSL: function(h, s, b, a){
if (!h) {
h = this.value.h;
s = this.value.s;
b = this.value.b;
}
var H = h,
L = (2 - s) * b,
S = s * b;
if (L > 0 && L <= 1) {
S /= L;
} else {
S /= 2 - L;
}
L /= 2;
if (S > 1) {
S = 1;
}
return {
h: H,
s: S,
l: L,
a: a||this.value.a
};
}
};
사용방법
var color = new Color("RGB(0,5,5)");
color.toHex()
위의 @Justin의 답변에 덧붙이자면..
그럴 것 같네요.
var rgb = document.querySelector('#selector').style['background-color'];
return '#' + rgb.substr(4, rgb.indexOf(')') - 4).split(',').map((color) => String("0" + parseInt(color).toString(16)).slice(-2)).join('');
위의 구문 분석 함수는 선행 0을 잘라내기 때문에 5자 또는 4자의 잘못된 색 코드를 생성할 수 있습니다. 즉, rgb(216, 160, 10)의 경우 #d8a0a를 생성하고 #d8a00a가 되어야 합니다.
감사해요.
이건 좀 더 보기 좋군요.
var rgb = $('#selector').css('backgroundColor').match(/\d+/g);
var r = parseInt(rgb[0], 10);
var g = parseInt(rgb[1], 10);
var b = parseInt(rgb[2], 10);
var hex = '#'+ r.toString(16) + g.toString(16) + b.toString(16);
좀 더 간결한 원라인:
var rgb = $('#selector').css('backgroundColor').match(/\d+/g);
var hex = '#'+ Number(rgb[0]).toString(16) + Number(rgb[1]).toString(16) + Number(rgb[2]).toString(16);
jQuery가 항상 hex를 반환하도록 강제합니다.
$.cssHooks.backgroundColor = {
get: function(elem) {
if (elem.currentStyle)
var bg = elem.currentStyle["backgroundColor"];
else if (window.getComputedStyle) {
var bg = document.defaultView.getComputedStyle(elem,
null).getPropertyValue("background-color");
}
if (bg.search("rgb") == -1) {
return bg;
} else {
bg = bg.match(/\d+/g);
function hex(x) {
return ("0" + parseInt(x).toString(16)).slice(-2);
}
return "#" + hex(bg[0]) + hex(bg[1]) + hex(bg[2]);
}
}
}
질문이 JQuery를 사용하고 있었으므로, Daniel Elliott의 코드를 기반으로 한 JQuery 플러그인은 다음과 같습니다.
$.fn.cssAsHex = function(colorProp) {
var hexDigits = '0123456789abcdef';
function hex(x) {
return isNaN(x) ? '00' : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
};
// Convert RGB color to Hex format
function rgb2hex(rgb) {
var rgbRegex = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
return '#' + hex(rgbRegex[1]) + hex(rgbRegex[2]) + hex(rgbRegex[3]);
};
return rgb2hex(this.css(colorProp));
};
다음과 같이 사용:
var hexBackgroundColor = $('#myElement').cssAsHex('background-color');
IE에서 스크립팅 오류가 발생하지 않는 솔루션은 다음과 같습니다. http://haacked.com/archive/2009/12/29/convert-rgb-to-hex.aspx
Steven Pribilinsky의 답은 0으로 선행합니다. 예를 들어 #ff0000은 #ff00이 됩니다.
해결책은 선행 0과 후행 2자리의 부분 문자열을 추가하는 것입니다.
var rgb = $('#selector').css('backgroundColor').match(/\d+/g);
var hex = '#'+ String('0' + Number(rgb[0]).toString(16)).slice(-2) + String('0' + Number(rgb[1]).toString(16)).slice(-2) + String('0' + Number(rgb[2]).toString(16)).slice(-2);
향상된 기능 "hex"
function hex(x){
return isNaN(x) ? "00" : hexDigits[x >> 4] + hexDigits[x & 0xf];
// or option without hexDigits array
return (x >> 4).toString(16)+(x & 0xf).toString(16);
}
여기 제 해결책이 있습니다. 또한 인수를 사용하여 추가 사례를 확인하고 제공된 문자열에서 다른 가능한 공백과 대문자를 확인합니다.
var a = "rgb(10, 128, 255)";
var b = "rgb( 10, 128, 255)";
var c = "rgb(10, 128, 255 )";
var d = "rgb ( 10, 128, 255 )";
var e = "RGB ( 10, 128, 255 )";
var f = "rgb(10,128,255)";
var g = "rgb(10, 128,)";
var rgbToHex = (function () {
var rx = /^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i;
function pad(num) {
if (num.length === 1) {
num = "0" + num;
}
return num;
}
return function (rgb, uppercase) {
var rxArray = rgb.match(rx),
hex;
if (rxArray !== null) {
hex = pad(parseInt(rxArray[1], 10).toString(16)) + pad(parseInt(rxArray[2], 10).toString(16)) + pad(parseInt(rxArray[3], 10).toString(16));
if (uppercase === true) {
hex = hex.toUpperCase();
}
return hex;
}
return;
};
}());
console.log(rgbToHex(a));
console.log(rgbToHex(b, true));
console.log(rgbToHex(c));
console.log(rgbToHex(d));
console.log(rgbToHex(e));
console.log(rgbToHex(f));
console.log(rgbToHex(g));
jsperf에서의 속도 비교
추가적인 개선은 다음과 같습니다.trim()그rgb으로 묶다
var rxArray = rgb.trim().match(rx),
나의 아름다운 non-standard 솔루션
HTML
<div id="selector" style="background-color:#f5b405"></div>
jQuery
$("#selector").attr("style").replace("background-color:", "");
결과
#f5b405
를 사용하고 과 하고 가 했습니다 는 를 했습니다 가 는 과 - Expected [ 'rgba(255, 255, 255, 1)' ] to contain '#fff'.아래 기능은 저에게 잘 작동했습니다.
function RGBAToHexA(test:string) {
let sep = test.toString().indexOf(",") > -1 ? "," : " ";
const rgba = test.toString().substring(5).split(")")[0].split(sep);
console.log(rgba)
let r = (+rgba[0]).toString(16),
g = (+rgba[1]).toString(16),
b = (+rgba[2]).toString(16),
a = Math.round(+rgba[3] * 255).toString(16);
if (r.length == 1)
r = "0" + r;
if (g.length == 1)
g = "0" + g;
if (b.length == 1)
b = "0" + b;
if (a.length == 1)
a = "0" + a;
return "#" + r + g + b + a;
}
describe('Check CSS', function() {
it('should check css of login page', async function(){
browser.waitForAngularEnabled(true);
browser.actions().mouseMove(element(by.css('.btn-auth, .btn-auth:hover'))).perform(); // mouse hover on button
csspage.Loc_auth_btn.getCssValue('color').then(function(color){
console.log(RGBAToHexA(color))
expect( RGBAToHexA(color)).toContain(cssData.hoverauth.color);
})
기능성 프로그래밍을 사랑하는 모든 사람들에게, 여기 다소 기능적인 접근법이 있습니다:)
const getHexColor = (rgbValue) =>
rgbValue.replace("rgb(", "").replace(")", "").split(",")
.map(colorValue => (colorValue > 15 ? "0" : "") + colorValue.toString(16))
.reduce((acc, hexValue) => acc + hexValue, "#")
다음과 같이 사용합니다.
const testRGB = "rgb(13,23,12)"
getHexColor(testRGB)
나의 콤팩트 버전
//Function to convert rgb color to hex format
function rgb2hex(rgb) {
if(/^#/.test(rgb))return rgb;// if returns colors as hexadecimal
let re = /\d+/g;
let hex = x => (x >> 4).toString(16)+(x & 0xf).toString(16);
return "#"+hex(re.exec(rgb))+hex(re.exec(rgb))+hex(re.exec(rgb));
}전체 케이스(rgb, rgba, transparent... 등) 솔루션(coffeeScript)
rgb2hex: (rgb, transparentDefault=null)->
return null unless rgb
return rgb if rgb.indexOf('#') != -1
return transparentDefault || 'transparent' if rgb == 'rgba(0, 0, 0, 0)'
rgb = rgb.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+))?\)$/);
hex = (x)->
("0" + parseInt(x).toString(16)).slice(-2)
'#' + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3])
안녕하세요 자바스크립트로 요소의 색상을 받고 해결책을 알려드립니다.
function rgb_hex(rgb_string_js){ //example: "rgb(102,54,255)"
var new_rgb_list = rgb_string_js.replace("rgb(","").replace(")","").split(",");
return ("#" + parseInt(new_rgb_list[0]).toString(16) + parseInt(new_rgb_list[1]).toString(16) + parseInt(new_rgb_list[2]).toString(16));
}
컬러 패키지는 작지만 강력한 것이 가장 좋은 선택일 것입니다.
import { colord } from "colord";
colord("rgb(192, 192, 192)").toHex();
언급URL : https://stackoverflow.com/questions/1740700/how-to-get-hex-color-value-rather-than-rgb-value
반응형
'source' 카테고리의 다른 글
| Spring Data JPA 저장소에서 제네릭 사용 (0) | 2023.09.08 |
|---|---|
| MariaDB에서 대용량 ibd 파일에 대해 테이블 최적화 (0) | 2023.09.08 |
| 파이썬에서 적합한 '아무것도 하지 않는' 람다 표현? (0) | 2023.09.08 |
| 독트린 부울 형식을 false로 설정할 수 없습니다. (0) | 2023.09.03 |
| 제목 없이 DialogFragment를 만드는 방법은 무엇입니까? (0) | 2023.09.03 |