RGB 형식의 색상을 16 진수 형식으로 변환하거나 그 반대로 변환하는 방법은 무엇입니까?

예를 들어로 변환 '#0080C0'하십시오 (0, 128, 192).

참고 : 두 버전 rgbToHex에 대한 정수 값으로 기대할 r, g그리고 b, 당신은 당신이 정수가 아닌 값이있는 경우 자신의 라운딩을 수행해야하므로.

다음은 RGB에서 16 진수로 변환하고 필요한 제로 패딩을 추가합니다.

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

다른 방법으로 변환 :

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";

마지막으로 @casablanca 의 답변rgbToHex() 에서 논의 되고 @cwolves의 의견에서 제안 된 대체 버전의 .

function rgbToHex(r, g, b) {
  return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}

alert(rgbToHex(0, 51, 255)); // #0033ff

2012 년 12 월 3 일 업데이트

다음 hexToRgb()은 "# 03F"와 같은 속기 16 진 삼중 항도 구문 분석 하는 버전입니다 .

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";

hexToRgb의 대체 버전 :

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 여기에 또 다른 접근법이 있습니다 그것은 더 빠른 것 같습니다

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 더 많은 테스트 후 위의 새로운 접근 방식은 더 빠르지 않습니다.

Tim Down의 ECMAScript 6 버전 답변

RGB를 16 진수로 변환

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'

16 진수를 RGB로 변환

배열을 반환합니다 [r, g, b]. 와 같은 속기 16 진 트리플렛과도 작동합니다 "#03F".

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]

보너스 : padStart()방법을 사용하여 RGB를 16 진수로

const rgbToHex = (r, g, b) => '#' + [r, g, b]
  .map(x => x.toString(16).padStart(2, '0')).join('')

console.log(rgbToHex(0, 51, 255)); // '#0033ff'

이 답변은 최신 브라우저에서 지원되지 않는 최신 ECMAScript 기능을 사용합니다. 이 코드가 모든 환경에서 작동하게하려면 Babel 을 사용하여 코드를 컴파일해야합니다.

내 버전은 다음과 같습니다.

  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;
  }

나는 당신이 HTML 스타일의 16 진수 표기법을 의미한다고 가정합니다 #rrggbb. 주문이 취소 된 것을 제외하고는 코드가 거의 정확합니다. 그것은해야한다:

var decColor = red * 65536 + green * 256 + blue;

또한 비트 시프트를 사용하면 조금 더 쉽게 읽을 수 있습니다.

var decColor = (red << 16) + (green << 8) + blue;

function hex2rgb(hex) {
  return ['0x' + hex[1] + hex[2] | 0, '0x' + hex[3] + hex[4] | 0, '0x' + hex[5] + hex[6] | 0];
}

이 코드는 #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(',')+')';
}

1 행 기능 HEX-RGBA

짧은 형식 #fff과 긴 #ffffff형식을 모두 지원합니다 .
알파 채널 (불투명도)을 지원합니다.
해시를 지정했는지 여부는 상관하지 않으며 두 경우 모두 작동합니다.

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)  

계산 된 스타일 속성에서 색상을 가져 오는 데 사용할 수 있습니다.

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

참조 : https://github.com/k-gun/so/blob/master/so_util.js

비트 단위 솔루션은 일반적으로 이상합니다. 그러나이 경우 나는 그것이 더 우아하다고 생각합니다 😄

function hexToRGB(hexColor){
  return {
    red: (hexColor >> 16) & 0xFF,
    green: (hexColor >> 8) & 0xFF,  
    blue: hexColor & 0xFF,
  }
}

용법:

const {red, green, blue } = hexToRGB(0xFF00FF)

console.log(red) // 255
console.log(green) // 0
console.log(blue) // 255

// hsl 표기법을 무시하고 색상 값은 일반적으로 이름, rgb, rgba 또는 hex-

// 16 진수는 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));

@ Tim, 답변에 추가하십시오 (댓글에 약간 어색합니다).

작성된 것처럼 rgbToHex 함수는 점 뒤에 요소가 포함 된 문자열을 반환하며 r, g, b 값은 0-255 범위에 있어야합니다.

나는 이것이 가장 분명하게 보일지 확신하지만, 내가 알아내는 데 2 ​​시간이 걸렸고 그때까지 원래의 방법이 7 줄로 올라갔습니다. 내 문제가 다른 곳에 있다는 것을 깨달았습니다. 따라서 다른 사람들의 시간과 번거 로움을 줄이기 위해 전제 조건을 확인하고 불필요한 문자열을 잘라내는 약간 수정 된 코드가 있습니다.

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);
}

(2017) SIMPLE ES6 컴포저 블 화살표 기능

ES6을 사용하여 현대적인 기능 / 조성 js를 작성하는 사람들에게는 이것을 공유하는 것을 거부 할 수 없습니다. 다음은 데이터 시각화를 위해 색상 보간을 수행하는 색상 모듈에서 사용중인 매끄러운 단일 라이너입니다.

이것은 알파 채널을 전혀 처리하지 않습니다.

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));

시험

let hex2rgb= c=> `rgb(${c.substr(1).match(/../g).map(x=>+`0x${x}`)})`;
let rgb2hex= c=>'#'+c.match(/\d+/g).map(x=>(+x).toString(16).padStart(2,0)).join``

let hex2rgb= c=> `rgb(${c.substr(1).match(/../g).map(x=>+`0x${x}`)})`;
let rgb2hex= c=> '#'+c.match(/\d+/g).map(x=>(+x).toString(16).padStart(2,0)).join``;

// TEST
console.log('#0080C0          -->', hex2rgb('#0080C0'));
console.log('rgb(0, 128, 192) -->', rgb2hex('rgb(0, 128, 192)'));

두 가지 색상 값 (RGB, 이름 색상 또는 16 진수 값으로 제공됨)을 비교하거나 16 진수로 변환하려면 HTML5 캔버스 객체를 사용하십시오.

var canvas = document.createElement("canvas");
var ctx = this.canvas.getContext('2d');

ctx.fillStyle = "rgb(pass,some,value)";
var temp =  ctx.fillStyle;
ctx.fillStyle = "someColor";

alert(ctx.fillStyle == temp);

이런 식으로 갈 수 있습니까?

function RGB2HTML(red, green, blue)
{
    return '#' + red.toString(16) +
           green.toString(16) +
           blue.toString(16);
}

alert(RGB2HTML(150, 135, 200));

표시 # 9687c8

Tim Down의 3 자리 hexToRgb 기능은 다음과 같이 향상 될 수 있습니다.

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 플러그인을 만들었습니다. 잘 작동하는 것 같습니다.

편집하다

적절한 jQuery 플러그인을 만드는 방법을 알 수 없으므로 일반 함수로 표시합니다.

//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;
};

나는 잘못된 값을 받아들이는 함수가 필요했다.

rgb (-255, 255, 255) rgb (510, 255, 255)

이것은 @cwolves 답변의 분사입니다.

function rgb(r, g, b) {
  this.c = this.c || function (n) {
    return Math.max(Math.min(n, 255), 0)
  };

  return ((1 << 24) + (this.c(r) << 16) + (this.c(g) << 8) + this.c(b)).toString(16).slice(1).toUpperCase();
}

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}

이 기능을 사용하면 문제없이 결과를 얻을 수 있습니다. :)

문자열을 허용하는 속기 버전 :

function rgbToHex(a){
  a=a.replace(/[^\d,]/g,"").split(","); 
  return"#"+((1<<24)+(+a[0]<<16)+(+a[1]<<8)+ +a[2]).toString(16).slice(1)
}

document.write(rgbToHex("rgb(255,255,255)"));

아직 16 진수가 아닌지 확인하려면

function rgbToHex(a){
  if(~a.indexOf("#"))return a;
  a=a.replace(/[^\d,]/g,"").split(","); 
  return"#"+((1<<24)+(+a[0]<<16)+(+a[1]<<8)+ +a[2]).toString(16).slice(1)
}

document.write("rgb: "+rgbToHex("rgb(255,255,255)")+ " -- hex: "+rgbToHex("#e2e2e2"));

이 답변은 질문에 완벽하게 맞지 않을 수도 있지만 덜 유용 할 수 있습니다.

1. 임의의 요소 생성

var toRgb = document.createElement('div');

2. 유효한 스타일을 변환하려는 색상으로 설정하십시오.

toRg.style.color = "hsl(120, 60%, 70%)";

3. 스타일 속성을 다시 호출

> toRgb.style.color;

< "rgb(133, 225, 133)" 당신의 색깔은 RGB로 변환되었습니다

작품 : Hsl, Hex

작동하지 않음 : 명명 된 색상

내 버전의 hex2rbg :

1. #fff와 같은 짧은 16 진수를 받아들입니다
2. 알고리즘 호환성은 o (n)이며 정규 표현식을 사용하는 것보다 빠릅니다. 예. String.replace, String.split, String.match등
3. 일정한 공간을 사용하십시오.
4. rgb 및 rgba를 지원하십시오.

IE8을 사용하는 경우 hex.trim ()을 제거해야 할 수도 있습니다.

예 :

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()+')';
    }
}

이 스 니펫은 16 진수를 rgb로, rgb를 16 진수로 변환합니다.

데모보기

function hexToRgb(str) { 
    if ( /^#([0-9a-f]{3}|[0-9a-f]{6})$/ig.test(str) ) { 
        var hex = str.substr(1);
        hex = hex.length == 3 ? hex.replace(/(.)/g, '$1$1') : hex;
        var rgb = parseInt(hex, 16);               
        return 'rgb(' + [(rgb >> 16) & 255, (rgb >> 8) & 255, rgb & 255].join(',') + ')';
    } 

    return false; 
}

function rgbToHex(red, green, blue) {
    var out = '#';

    for (var i = 0; i < 3; ++i) {
        var n = typeof arguments[i] == 'number' ? arguments[i] : parseInt(arguments[i]);

        if (isNaN(n) || n < 0 || n > 255) {
            return false;
        }

        out += (n < 16 ? '0' : '') + n.toString(16);
    }
    return out
}

16 진수 형식이 #AARRGGBB (Alpha, Red, Green, Blue) 인 XAML 데이터로 작업하고 있습니다. 위의 답변을 사용하여 내 해결책은 다음과 같습니다.

function hexToRgba(hex) {
    var bigint, r, g, b, a;
    //Remove # character
    var re = /^#?/;
    var aRgb = hex.replace(re, '');
    bigint = parseInt(aRgb, 16);

    //If in #FFF format
    if (aRgb.length == 3) {
        r = (bigint >> 4) & 255;
        g = (bigint >> 2) & 255;
        b = bigint & 255;
        return "rgba(" + r + "," + g + "," + b + ",1)";
    }

    //If in #RRGGBB format
    if (aRgb.length >= 6) {
        r = (bigint >> 16) & 255;
        g = (bigint >> 8) & 255;
        b = bigint & 255;
        var rgb = r + "," + g + "," + b;

        //If in #AARRBBGG format
        if (aRgb.length == 8) {
            a = ((bigint >> 24) & 255) / 255;
            return "rgba(" + rgb + "," + a.toFixed(1) + ")";
        }
    }
    return "rgba(" + rgb + ",1)";
}

http://jsfiddle.net/kvLyscs3/

jQuery에서 직접 변환하려면 다음을 시도하십시오.

  function rgbToHex(color) {
    var bg = color.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    function hex(x) {
      return ("0" + parseInt(x).toString(16)).slice(-2);
    }
    return     "#" + hex(bg[1]) + hex(bg[2]) + hex(bg[3]);
  }

  rgbToHex($('.col-tab-bar .col-tab span').css('color'))

function getRGB(color){
  if(color.length == 7){
    var r = parseInt(color.substr(1,2),16);
    var g = parseInt(color.substr(3,2),16);
    var b = parseInt(color.substr(5,2),16);    
    return 'rgb('+r+','+g+','+b+')' ;
  }    
  else
    console.log('Enter correct value');
}
var a = getRGB('#f0f0f0');
if(!a){
 a = 'Enter correct value'; 
}

a;

많은 답변을 고려할 때 (RGB에서 HEX 또는 다른 방법으로) 질문에 부분적으로 만 답변한다는 것을 고려할 때 부분 답변도 게시한다고 생각했습니다.

비슷한 문제가 있었고 유효한 CSS 색상 (HSL (a), RGB (a), HEX 또는 색상 이름)을 입력하고 1. 알파 값을 추가하거나 제거 할 수 있습니다. rgb (a) 객체를 반환합니다. 이 목적을 위해 플러그인을 정확하게 작성했습니다. GitHub 에서 찾을 수 있습니다 (jQuery가 필요하지만 원하는 경우 포크하고 바닐라 버전을 만들 수 있습니다). 여기 데모 페이지가 있습니다. 당신은 자신을 위해 시도 할 수 있습니다 보고 즉시 출력을 볼 .

옵션을 여기에 복사하여 붙여 넣습니다.

RGB 생성기는 하나의 인수 인 색상을 허용하며 asObject, addAlpha 및 removeAlpha의 세 가지 옵션을 제공합니다. 세 가지 옵션을 생략하면 RGB 색상이 문자열로 반환됩니다.

$.rgbGenerator("white")
// Will return rgb(255,255,255)

기본적으로 알파 구성 요소가 포함되어 있습니다. 입력 값에 알파 값이 포함 된 경우 출력은 RGBa 형식입니다.

$.rgbGenerator("hsla(0,100%,50%,0.8)")
// Will return rgba(255,0,0,0.8)

removeAlpha를 true로 설정하여이 동작을 비활성화 할 수 있습니다. 초기 HSLa 또는 RGBa 색상에서 알파 값이 제거됩니다.

$.rgbGenerator("hsla(0,100%,50%,0.8)", {removeAlpha: true})
// Will return rgb(255,0,0)

반면에 알파 채널을 추가하려는 경우 addAlpha를 0과 1 사이의 값으로 설정하면됩니다. 입력이 투명하지 않은 색상이면 알파 값이 추가됩니다. 투명한 값이면 제공된 값이 입력의 알파 구성 요소를 덮어 씁니다.

$.rgbGenerator("hsl(0,100%,50%)", {addAlpha: 0.4})
// Will return rgba(255,0,0,0.4)
$.rgbGenerator("hsla(0,100%,50%,0.8)", {addAlpha: 0.4})
// Will return rgba(255,0,0,0.4)

마지막으로 RGB (a) 색상을 객체로 출력 할 수도 있습니다. r, g, b 및 선택적으로 a로 구성됩니다.

$.rgbGenerator("hsla(0,100%,50%,0.8)", {asObject: true})
/* Will return
{
  "r": 255,
  "g": 0,
  "b": 0,
  "a": 0.8
}
*/
$.rgbGenerator("hsla(0,100%,50%,0.8)", {asObject: true}).r
// Will return 255

Tim Down의 최고 평점 답변은 RGB로 변환 할 때 볼 수있는 최상의 솔루션을 제공합니다. 나는 16 진수 변환을 위해 가장 간결한 경계 검사 및 제로 패딩을 제공하기 때문에 16 진수 변환을 위해이 솔루션을 더 좋아합니다.

function RGBtoHex (red, green, blue) {
  red = Math.max(0, Math.min(~~this.red, 255));
  green = Math.max(0, Math.min(~~this.green, 255));
  blue = Math.max(0, Math.min(~~this.blue, 255));

  return '#' + ('00000' + (red << 16 | green << 8 | blue).toString(16)).slice(-6);
};

왼쪽 시프트 '<<'및 '|'사용 운영자는 이것을 재미있는 솔루션으로 만듭니다.

나는 이것을 발견했고 그것이 꽤 직설적이며 유효성 검사 테스트를 받았으며 알파 값 (선택 사항)을 지원하기 때문에이 경우에 적합합니다.

당신이하고있는 일을 알고 조금 더 빠르면 정규식 라인을 주석 처리하십시오.

function hexToRGBA(hex, alpha){
    hex = (""+hex).trim().replace(/#/g,""); //trim and remove any leading # if there (supports number values as well)
    if (!/^(?:[0-9a-fA-F]{3}){1,2}$/.test(hex)) throw ("not a valid hex string"); //Regex Validator
    if (hex.length==3){hex=hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2]} //support short form
    var b_int = parseInt(hex, 16);
    return "rgba("+[
        (b_int >> 16) & 255, //R
        (b_int >> 8) & 255, //G
        b_int & 255, //B
        alpha || 1  //add alpha if is set
    ].join(",")+")";
}