반응형
16진수를 RGBA로 변환
나의 바이올린 - http://jsbin.com/pitu/1/edit
나는 쉬운 헥소토르바 변환을 시도하고 싶었습니다.제가 사용한 브라우저는 모두 RGB를 기본값으로 사용하여 색상을 렌더링하므로 극단적인 색상 선택기를 사용할 때는 16진수 값이 생성하는 배경 색상을 잡아 16진수 값을 RGB로 변환합니다(기본값 RGB = 단순 변환).
나는 그것을 교체하려고 했습니다.)에 대한 ., 1)하지만 그것이 효과가 없어서 rgba를 rgba로 변환하는 방법을 알아보러 갔는데 아직도 어려움을 겪고 있습니다.
재쿼리
$('.torgb').val($('#color').css('background-color'));
$('.torgba').val().replace(/rgb/g,"rgba");
는.
편집:
TinyColor는 제가 원하는 모든 것을 여기서 더 많이 할 수 있는 훌륭한 색 조작 js 라이브러리입니다.여러분들도 한번 해보시는 게 좋을 것 같네요! - https://github.com/bgrins/TinyColor
//If you write your own code, remember hex color shortcuts (eg., #fff, #000)
function hexToRgbA(hex){
var c;
if(/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)){
c= hex.substring(1).split('');
if(c.length== 3){
c= [c[0], c[0], c[1], c[1], c[2], c[2]];
}
c= '0x'+c.join('');
return 'rgba('+[(c>>16)&255, (c>>8)&255, c&255].join(',')+',1)';
}
throw new Error('Bad Hex');
}
hexToRgbA('#fbafff')
/* returned value: (String)
rgba(251,175,255,1)
*/
@ElDoRado1239는 올바른 생각을 가지고 있지만 더 깨끗한 방법도 있습니다.
function hexToRGB(hex, alpha) {
var r = parseInt(hex.slice(1, 3), 16),
g = parseInt(hex.slice(3, 5), 16),
b = parseInt(hex.slice(5, 7), 16);
if (alpha) {
return "rgba(" + r + ", " + g + ", " + b + ", " + alpha + ")";
} else {
return "rgb(" + r + ", " + g + ", " + b + ")";
}
}
hexToRGB('#FF0000', 0.5);ES6 기능은 '#'을 사용하거나 사용하지 않고 6자 16진수만 처리할 수 있습니다.
const hex2rgba = (hex, alpha = 1) => {
const [r, g, b] = hex.match(/\w\w/g).map(x => parseInt(x, 16));
return `rgba(${r},${g},${b},${alpha})`;
};
용도:
hex2rgba('#af087b', .5) // returns: rgba(175,8,123,0.5)
hex2rgba('af087b', .5) // returns: rgba(175,8,123,0.5)
hex2rgba('af087b') // returns: rgba(175,8,123,1)
Clean TypeScript 버전:
hexToRGB(hex: string, alpha: string) {
const r = parseInt(hex.slice(1, 3), 16);
const g = parseInt(hex.slice(3, 5), 16);
const b = parseInt(hex.slice(5, 7), 16);
if (alpha) {
return `rgba(${r}, ${g}, ${b}, ${alpha})`;
}
return `rgb(${r}, ${g}, ${b})`;
}
@AJFarkas의 답변을 기반으로 합니다.
모든 Hex Form 모듈식 접근 방식
주요 과제는 2018년 기준으로 몇 가지 형태의 HEX가 있다는 것입니다.6문자의 전통적인 문자, 3문자의 단축형, 그리고 알파를 포함하는 새로운 4문자와 8문자의 조합입니다.다음 기능은 모든 HEX 폼을 처리할 수 있습니다.
const isValidHex = (hex) => /^#([A-Fa-f0-9]{3,4}){1,2}$/.test(hex)
const getChunksFromString = (st, chunkSize) => st.match(new RegExp(`.{${chunkSize}}`, "g"))
const convertHexUnitTo256 = (hexStr) => parseInt(hexStr.repeat(2 / hexStr.length), 16)
const getAlphafloat = (a, alpha) => {
if (typeof a !== "undefined") {return a / 255}
if ((typeof alpha != "number") || alpha <0 || alpha >1){
return 1
}
return alpha
}
export const hexToRGBA = (hex, alpha) => {
if (!isValidHex(hex)) {throw new Error("Invalid HEX")}
const chunkSize = Math.floor((hex.length - 1) / 3)
const hexArr = getChunksFromString(hex.slice(1), chunkSize)
const [r, g, b, a] = hexArr.map(convertHexUnitTo256)
return `rgba(${r}, ${g}, ${b}, ${getAlphafloat(a, alpha)})`
}
알파는 다음과 같은 방법으로 기능에 제공될 수 있습니다.
- 4 또는 8 폼 HEX의 일부로 사용됩니다.
- 0-1 사이의 두 번째 모수로서,
산출량
const c1 = "#f80"
const c2 = "#f808"
const c3 = "#0088ff"
const c4 = "#0088ff88"
const c5 = "#98736"
console.log(hexToRGBA(c1)) // rgba(255, 136, 0, 1)
console.log(hexToRGBA(c2)) // rgba(255, 136, 0, 0.53125)
console.log(hexToRGBA(c3)) // rgba(0, 136, 255, 1)
console.log(hexToRGBA(c4)) // rgba(0, 136, 255, 0.53125)
console.log(hexToRGBA(c5)) // Uncaught Error: Invalid HEX
console.log(hexToRGBA(c1, 0.5)) // rgba(255, 136, 0, 0.5)
console.log(hexToRGBA(c3, 0.5)) // rgba(0, 136, 255, 0.5)
다음에 도움이 되는 경우 순수 JS 솔루션:
function hexToRGB(hex,alphaYes){
var h = "0123456789ABCDEF";
var r = h.indexOf(hex[1])*16+h.indexOf(hex[2]);
var g = h.indexOf(hex[3])*16+h.indexOf(hex[4]);
var b = h.indexOf(hex[5])*16+h.indexOf(hex[6]);
if(alphaYes) return "rgba("+r+", "+g+", "+b+", 1)";
else return "rgb("+r+", "+g+", "+b+")";
}
"alphaYes"는 알파를 원하는지 아닌지에 따라 "true" 또는 "false"입니다.
알파를 제공하면 rgba 또는 rgba를 반환하는 함수가 있습니다.이 기능은 또한 짧은 16진수 색상 코드도 변환합니다.
함수:
function hexToRgb(hex, alpha) {
hex = hex.replace('#', '');
var r = parseInt(hex.length == 3 ? hex.slice(0, 1).repeat(2) : hex.slice(0, 2), 16);
var g = parseInt(hex.length == 3 ? hex.slice(1, 2).repeat(2) : hex.slice(2, 4), 16);
var b = parseInt(hex.length == 3 ? hex.slice(2, 3).repeat(2) : hex.slice(4, 6), 16);
if ( alpha ) {
return 'rgba(' + r + ', ' + g + ', ' + b + ', ' + alpha + ')';
}
else {
return 'rgb(' + r + ', ' + g + ', ' + b + ')';
}
}
예:
hexToRgb('FF0000');// rgb(255, 0, 0)
hexToRgb('#FF0000');// rgb(255, 0, 0)
hexToRgb('#FF0000', 1);// rgba(255, 0, 0, 1)
hexToRgb('F00');// rgb(255, 0, 0)
hexToRgb('#F00');// rgb(255, 0, 0)
hexToRgb('#F00', 1);// rgba(255, 0, 0, 1)
ES6 모던, ReGEx 프리, 오류 확인 및 상수 화살표 기능이 있는 솔루션으로 오류에 대해 null을 반환합니다.알파가 지정되지 않은 경우 기본값인 1이 사용됩니다.
const hexToRGB = (hex, alpha = 1) => {
let parseString = hex;
if (hex.startsWith('#')) {parseString = hex.slice(1, 7);}
if (parseString.length !== 6) {return null;}
const r = parseInt(parseString.slice(0, 2), 16);
const g = parseInt(parseString.slice(2, 4), 16);
const b = parseInt(parseString.slice(4, 6), 16);
if (isNaN(r) || isNaN(g) || isNaN(b)) {return null;}
return `rgba(${r}, ${g}, ${b}, ${alpha})`;
};
고참: 반니다됩환을 반환합니다.null오류가 있는 경우대체할 수 있습니다.{return null;}문장을 합니다: 스우문 포함로:{throw "Not a valid hex color!";}하지만 안에서 전화를 해야 합니다.try-catch:
hexToRGB("#3454r5") => null
hexToRGB("#345465") => rgba(52, 84, 101, 1)
hexToRGB("#345465", 0.5) => rgba(52, 84, 101, 0.5)
저는 @AJFarkas 답변이 마음에 들었고 바로 가기 16진수(#fff) 지원을 추가했습니다.
function hexToRGB(hex, alpha) {
if (!hex || [4, 7].indexOf(hex.length) === -1) {
return; // throw new Error('Bad Hex');
}
hex = hex.substr(1);
// if shortcuts (#F00) -> set to normal (#FF0000)
if (hex.length === 3) {
hex = hex.split('').map(function(el){
return el + el + '';
}).join('');
}
var r = parseInt(hex.slice(0, 2), 16),
g = parseInt(hex.slice(2, 4), 16),
b = parseInt(hex.slice(4, 6), 16);
if (alpha !== undefined) {
return "rgba(" + r + ", " + g + ", " + b + ", " + alpha + ")";
} else {
return "rgb(" + r + ", " + g + ", " + b + ")";
}
}
document.write(hexToRGB('#FF0000', 0.5));
document.write('<br>');
document.write(hexToRGB('#F00', 0.4));3, 4, 6 및 8자 색상 코드를 지원하는 빠른 기능은 다음과 같습니다.
function hexToRGBA(hex) {
// remove invalid characters
hex = hex.replace(/[^0-9a-fA-F]/g, '');
if (hex.length < 5) {
// 3, 4 characters double-up
hex = hex.split('').map(s => s + s).join('');
}
// parse pairs of two
let rgba = hex.match(/.{1,2}/g).map(s => parseInt(s, 16));
// alpha code between 0 & 1 / default 1
rgba[3] = rgba.length > 3 ? parseFloat(rgba[3] / 255).toFixed(2): 1;
return 'rgba(' + rgba.join(', ') + ')';
}
이것이 하는 일입니다.16진수가 아닌 모든 문자가 제거됩니다.HEX가 5자 미만이면 각 문자가 두 배가 됩니다.그런 다음 HEX를 두 문자 쌍으로 나누고 각 쌍을 정수로 구문 분석합니다.알파 HEX가 있으면 0에서 1 사이의 부동 소수점으로 구문 분석되고, 그렇지 않으면 기본값이 1입니다.그런 다음 배열을 결합하여 RGBA 문자열이 형성되고 반환됩니다.
여기 ES2015+ 버전이 있습니다. 좀 더 방어적이고 간단한 3자리 구문을 처리합니다.
/*
* Takes a 3 or 6-digit hex color code, and an optional 0-255 numeric alpha value
*/
function hexToRGB(hex, alpha) {
if (typeof hex !== 'string' || hex[0] !== '#') return null; // or return 'transparent'
const stringValues = (hex.length === 4)
? [hex.slice(1, 2), hex.slice(2, 3), hex.slice(3, 4)].map(n => `${n}${n}`)
: [hex.slice(1, 3), hex.slice(3, 5), hex.slice(5, 7)];
const intValues = stringValues.map(n => parseInt(n, 16));
return (typeof alpha === 'number')
? `rgba(${intValues.join(', ')}, ${alpha})`
: `rgb(${intValues.join(', ')})`;
}
function hexToRGB(hex, alpha) {
var r = parseInt(hex.slice(1, 3), 16),
g = parseInt(hex.slice(3, 5), 16),
b = parseInt(hex.slice(5, 7), 16);
if (alpha) {
return "rgba(" + r + ", " + g + ", " + b + ", " + alpha + ")";
} else {
return "rgb(" + r + ", " + g + ", " + b + ")";
}
}
hexToRGB('#FF0000', 0.5);사실, 저는 ES6 방법을 사용하는 것을 방지하는 것과 함께 사용하는 것을 좋아합니다. RegExp는 안전하지 않습니다. 신뢰할 수 없습니다. 아래 답변은 TypeScript입니다. JavaScript만 필요하다면 유형을 제거하십시오.
// TypeScript
const hex2rgba = (hex: string, alpha = 1): string => {
if (alpha > 1 || alpha < 0) {
throw new Error('alpha is not correct!');
}
const red = parseInt(hex.slice(1, 3), 16);
const green = parseInt(hex.slice(3, 5), 16);
const blue = parseInt(hex.slice(5, 7), 16);
return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
};
깨끗하고 읽을 수 있는 활자 스크립트 방식: (나는 활자를 분리할 수 있지만, 그렇게 과거를 복사하는 것이 더 쉽습니다.)
export const hexToRGB = (hex: string, alpha: number | undefined = 1) => {
hex = hex.toUpperCase();
const r = parseInt(hex.slice(1, 3), 16);
const g = parseInt(hex.slice(3, 5), 16);
const b = parseInt(hex.slice(5, 7), 16);
return `rgba(${r}, ${g}, ${b}, ${alpha})`;
}
오랜 시간이 지난 후 DOM API는 알파를 포함하여 기본적으로 이 변환을 수행합니다.내 말은 네가 좋아한다면,
tempElement.style.cssText = "color: #de1e7eaa";
console.log(tempElement.style.color) // <- rgb(222, 30, 126, 0.667)
RGB 값을 문자열로 가져옵니다.그런 다음 필요에 따라 처리할 수도 있고 하지 않을 수도 있습니다.우리가 충분히 게으르면 이 기회를 활용할 수 있습니다.
var color = "#de1e7eaa", // hex color code in string including alpha
temp = document.createElement("i"), // just a temporary element
rgbStr,
rgbInt;
temp.style.cssText = `color: ${color}`; // assign it to the style of the <i> element
rgbStr = temp.style.color;
rgbInt = Array.from(rgbStr.matchAll(/\d+\.?\d*/g), c=> +c[0]) // temp.style.color gives RGB string
// then we convert it to Number if need be
console.log(rgbStr);
console.log(rgbInt);그리고 또 다른 것은 비트 이동에 기반을 둔 것입니다.
// hex can be a string in the format of "fc9a04", "0xfc9a04" or "#fc90a4" (uppercase digits are allowed) or the equivalent number
// alpha should be 0-1
const hex2rgb = (hex, alpha) => {
const c = typeof(hex) === 'string' ? parseInt(hex.replace('#', ''), 16) : hex;
return `rgb(${c >> 16}, ${(c & 0xff00) >> 8}, ${c & 0xff}, ${alpha})`;
};
해라
let hex2rgba= (hex,a)=> `rgba(${hex.substr(1).match(/../g).map(x=>+`0x${x}`)},${a})`
/// hex - str e.g. "#abcdef"; a - alpha range 0-1; result e.g. "rgba(1,1,1,0)"
let hex2rgba= (hex,a)=> `rgba(${hex.substr(1).match(/../g).map(x=>+`0x${x}`)},${a})`;
function convert() {
console.log(hex2rgba(inp.value,1));
}<input id="inp" value="#abcdef" >
<button onclick="convert()">convert</button>모든 바로 가기와 함께 작동합니다.
@kennebec의 답변을 기반으로 모든 16진수 바로 가기(#123, #1234, #1234, #123456, #1234678)에서 작동하는 솔루션이 있습니다.
const hex2rgba = (hex) => {
let c = hex.substring(1).split('');
if (!/^#(([\dA-Fa-f]{3}){1,2}|([\dA-Fa-f]{4}){1,2})$/.test(hex)) {
throw new Error('Your hexadecimal color is not correct.');
}
switch (c.length) {
case 3:
c = [c[0] + c[0], c[1] + c[1], c[2] + c[2], 'ff'];
break;
case 4:
c = [c[0]+c[0], c[1]+c[1], c[2]+c[2], c[3]+c[3]];
break;
case 6:
c = [c[0]+c[1], c[2]+c[3], c[4]+c[5], 'ff'];
break;
case 8:
c = [c[0]+c[1], c[2]+c[3], c[4]+c[5], c[6]+c[7]];
break;
}
c = c.map((char) => parseInt(char, 16).toString());
c[3] = (Math.round((parseInt(c[3],10)/255)*100)/100).toString();
return c[3] === '1'
? `rgb( ${c[0]}, ${c[1]}, ${c[2]})`
: `rgba(${c[0]}, ${c[1]}, ${c[2]}, ${c[3]})`;
}
//return a rgb or rgba value according to the alpha value
console.log(hex2rgba('#af6'))
console.log(hex2rgba('#af6f'))
console.log(hex2rgba('#af64f576'))유형 스크립트 버전
const hex2rgba = (hex: string): string => {
let c: string[] = hex.substring(1).split('');
if (!/^#(([\dA-Fa-f]{3}){1,2}|([\dA-Fa-f]{4}){1,2})$/.test(hex)) {
throw new Error('Your hexadecimal color is not correct.');
}
switch (c.length) {
case 3:
c = [c[0] + c[0], c[1] + c[1], c[2] + c[2], 'ff'];
break;
case 4:
c = [c[0]+c[0], c[1]+c[1], c[2]+c[2], c[3]+c[3]];
break;
case 6:
c = [c[0]+c[1], c[2]+c[3], c[4]+c[5], 'ff'];
break;
case 8:
c = [c[0]+c[1], c[2]+c[3], c[4]+c[5], c[6]+c[7]];
break;
}
c = c.map((char) => parseInt(char, 16).toString());
c[3] = (Math.round((parseInt(c[3],10)/255)*100)/100).toString();
return c[3] === '1'
? `rgb( ${c[0]}, ${c[1]}, ${c[2]})`
: `rgba(${c[0]}, ${c[1]}, ${c[2]}, ${c[3]})`;
}대부분의 사용 사례에서 오버킬이 발생할 수 있지만 명명된 모든 색상을 포함하는 모든 에지 케이스를 처리하고 실제로 유효한 CSS 색상 문자열(16진수만이 아님)을 RGBA로 변환하는 솔루션이 필요한 경우:
function toRGBA(cssColor) {
let el = document.createElement("div");
el.style.color = cssColor;
el.style.display = "none";
document.body.appendChild(el);
let rgba = window.getComputedStyle(el).getPropertyValue("color");
el.remove();
let [r, g, b, a] = rgba.match(/[0-9.]+/g).map(n => Number(n));
if(a === undefined) a = 1; // <-- getPropertyValue returns rgb(...) if there is no transparency, so we add alpha if missing
return [r, g, b, a];
}
toRGBA("#34f1a8") // [52, 241, 168, 1]
toRGBA("#fe6") // [255, 238, 102, 1]
toRGBA("blue") // [0, 0, 255, 1]
toRGBA("hsl(0, 90%, 50%)") // [242, 13, 13, 1]
...
(분명히 이 접근 방식은 Deno 또는 Node.js와 같은 서버 측 코드에는 적합하지 않습니다.)
알파(ahex)가 있는 HEX를 rgba로 변환합니다.
function ahex_to_rba(ahex) {
//clean #
ahex = ahex.substring(1, ahex.length);
ahex = ahex.split('');
var r = ahex[0] + ahex[0],
g = ahex[1] + ahex[1],
b = ahex[2] + ahex[2],
a = ahex[3] + ahex[3];
if (ahex.length >= 6) {
r = ahex[0] + ahex[1];
g = ahex[2] + ahex[3];
b = ahex[4] + ahex[5];
a = ahex[6] + (ahex[7] ? ahex[7] : ahex[6]);
}
var int_r = parseInt(r, 16),
int_g = parseInt(g, 16),
int_b = parseInt(b, 16),
int_a = parseInt(a, 16);
int_a = int_a / 255;
if (int_a < 1 && int_a > 0) int_a = int_a.toFixed(2);
if (int_a || int_a === 0)
return 'rgba('+int_r+', '+int_g+', '+int_b+', '+int_a+')';
return 'rgb('+int_r+', '+int_g+', '+int_b+')';
}
스니펫으로 직접 시도해 보십시오.
function ahex_to_rba(ahex) {
//clean #
ahex = ahex.substring(1, ahex.length);
ahex = ahex.split('');
var r = ahex[0] + ahex[0],
g = ahex[1] + ahex[1],
b = ahex[2] + ahex[2],
a = ahex[3] + ahex[3];
if (ahex.length >= 6) {
r = ahex[0] + ahex[1];
g = ahex[2] + ahex[3];
b = ahex[4] + ahex[5];
a = ahex[6] + (ahex[7] ? ahex[7] : ahex[6]);
}
var int_r = parseInt(r, 16),
int_g = parseInt(g, 16),
int_b = parseInt(b, 16),
int_a = parseInt(a, 16);
int_a = int_a / 255;
if (int_a < 1 && int_a > 0) int_a = int_a.toFixed(2);
if (int_a || int_a === 0)
return 'rgba('+int_r+', '+int_g+', '+int_b+', '+int_a+')';
return 'rgb('+int_r+', '+int_g+', '+int_b+')';
}
$(function() {
$('#go').click(function() {
$('p b').text(ahex_to_rba($('#hex').val()));
})
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="hex" type="text" value="#ffaaffaa">
<input id="go" type="button" value="Go">
<p>Result: <b></b></p>@ElDoRado1239에 추가
알파 값(유형 스크립트 스니펫)을 전달하려는 경우:
static hexToRGB(hex: string, alpha: number): string {
var h = "0123456789ABCDEF";
var r = h.indexOf(hex[1]) * 16 + h.indexOf(hex[2]);
var g = h.indexOf(hex[3]) * 16 + h.indexOf(hex[4]);
var b = h.indexOf(hex[5]) * 16 + h.indexOf(hex[6]);
if (alpha) {
return `rgba(${r}, ${g}, ${b}, ${alpha})`
}
return `rgba(${r}, ${g}, ${b})`;
}
@kennebec의 솔루션을 사용하도록 수정alpha매개 변수
function hexToRgbA(hex, alpha=1){
if(alpha > 1) alpha = 1;
if(alpha < 0) alpha = 0;
var c;
if(/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)){
c= hex.substring(1).split('');
if(c.length== 3){
c= [c[0], c[0], c[1], c[1], c[2], c[2]];
}
c= '0x'+c.join('');
return 'rgba('+[(c>>16)&255, (c>>8)&255, c&255].join(',')+','+alpha+')';
}
throw new Error('Bad Hex');
}
hexToRgbA('#fce881', 0.6);
/* returned value: (String)
rgba(252,232,129,0.6)
*/
이는 모든 사용 사례(짧은 코드, 긴 코드, 알파 포함/없음)에 적용됩니다.
hexToRGBA=q=>{
q=q.replace('#', '')
let l=q.length
if(l!=3 && l!=4 && l!==6 && l!=8) return
let red, green, blue, alpha, red_, green_, blue_, alpha_
switch(l){
case 3:
red_ = q[0]+q[0]
green_ = q[1]+q[1]
blue_ = q[2]+q[2]
alpha = 255
break
case 4:
red_ = q[0]+q[0]
green_ = q[1]+q[1]
blue_ = q[2]+q[2]
alpha_ = q[3]+q[3]
alpha = +("0x"+alpha_)
break
case 6:
red_ = q[0]+q[1]
green_ = q[2]+q[3]
blue_ = q[4]+q[5]
alpha = 255
break
case 8:
red_ = q[0]+q[1]
green_ = q[2]+q[3]
blue_ = q[4]+q[5]
alpha_ = q[6]+q[7]
alpha = +("0x"+alpha_)
break
}
red = +("0x"+red_)
green = +("0x"+green_)
blue = +("0x"+blue_)
return [red, green, blue, alpha]
}
참고: 알파는 4번째 요소로 반환됩니다. 범위는 0-255입니다.
function* chunks(array, size) {
for (let i = 0; i < array.length; i += size) {
yield array.slice(i, i + size);
}
}
function hexToRgba(hex, opacity = 1) {
const arr = hex.replace("#", "").split("");
return [...chunks(arr, arr.length === 6 ? 2 : 1)].reduce(
(accum, cv, index, array) => {
const lastIndex = array.length - 1 === index;
const int = parseInt(
array.length === 2 ? cv.join("") : cv[0] + cv[0],
16
);
return accum + int + (lastIndex ? `,${opacity})` : ",");
},
"rgba("
);
}
console.log(hexToRgba("#eee", 1));
발전기와 감속기를 사용합니다.과 함께 또는 없이 사용할 수 있습니다.#.
간단한 사례만 처리하면 되는 경우(즉, 다음과 같은 바로 가기를 처리하지 않는 경우) 원라이너#fff):
"aabbcc".split(/(..)/).filter(c=>c).map(c => parseInt(c, 16))
휠을 다시 구현할 필요가 없습니다.
- RGB에서 HEX로: https://github.com/sindresorhus/rgb-hex
- HEX에서 RGB로: https://github.com/sindresorhus/hex-rgb
여기에 이걸 놓겠습니다.
(str, alpha) => {
if(!/^#([A-Fa-f0-9]{3}){1,2}$/.test(str))
throw new Error('Bad hex')
let c = str.substring(1).split('')
if(c.length === 3) c = [c[0], c[0], c[1], c[1], c[2], c[2]];
c = '0x'+c.join('');
return `rgba(${(c>>16)&255}, ${(c>>8)&255}, ${c&255}, ${alpha})`;
};
사용해 보십시오.
<div class="torgb" onclick="rgba();" style="background-color:#000; width:20px; height:20px;"></div>
<script>
function rgba(){
$('.torgb').attr('background-color','rgba(0,0,0,1)');
$('.torgb').attr('onclick','hex();');
}
function hex(){
$('.torgb').attr('background-color','#000');
$('.torgb').attr('onclick','rgba();');
}
</script>
언급URL : https://stackoverflow.com/questions/21646738/convert-hex-to-rgba
반응형
'programing' 카테고리의 다른 글
| 동적 SQL 결과를 SQL 저장 프로시저의 임시 테이블로 변환 (0) | 2023.08.28 |
|---|---|
| 어떤 CEP 제품으로 시작해야 합니까? (0) | 2023.08.28 |
| 오라클에서 동일한 데이터베이스에 전체 스키마의 복사본을 만드는 방법 (0) | 2023.08.28 |
| SQL: 날짜 범위별, 연도별 그룹별로 두 테이블 결합 (0) | 2023.08.28 |
| iOS 13용 SF 심볼에 가중치를 설정하려면 어떻게 해야 합니까? (0) | 2023.08.28 |