RGB biçimindeki renkleri Hex biçimine veya tersi nasıl dönüştürür?

Örneğin, dönüştürmek '#0080C0'için (0, 128, 192).

Not : her iki versiyonu rgbToHexiçin tamsayı değerler beklediğinin r, gve b, size tamsayı olmayan değerler varsa kendi yuvarlama yapmak gerekir böylece.

RGB'den onaltılık dönüşüme aşağıdakiler yapılır ve gerekli sıfır dolgusu eklenir:

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

Diğer şekilde dönüştürme:

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

Son olarak, @ casablanca'nın cevabındargbToHex() tartışıldığı ve @cwolves tarafından yapılan yorumlarda önerildiği gibi alternatif bir versiyonu :

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

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

Güncelleme 3 Aralık 2012

Bunun bir sürümü hexToRgb()de "# 03F" gibi bir steno altıgen üçlüsünü ayrıştırır:

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'nin alternatif bir sürümü:

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

Edit: 3/28/2017 İşte başka bir yaklaşım bu daha da hızlı görünüyor

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

Edit: 8/11/2017 Daha fazla testten sonra yukarıdaki yeni yaklaşım daha hızlı değil :(. Eğlenceli bir alternatif yol olmasına rağmen.

Tim Down cevabının ECMAScript 6 sürümü

RGB'yi onaltılık biçime dönüştürme

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'

Hex'i RGB'ye dönüştürme

Bir dizi döndürür [r, g, b]. Ayrıca steno altıgen üçüzlerle de çalışır "#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]

Bonus: RGB - hex padStart()yöntemi kullanarak

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

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

Bu yanıtın, eski tarayıcılarda desteklenmeyen en son ECMAScript özelliklerini kullandığını unutmayın. Bu kodun tüm ortamlarda çalışmasını istiyorsanız , kodunuzu derlemek için Babel'i kullanmalısınız .

İşte benim versiyonum:

  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 tarzı onaltılık gösterim demek istediğinizi varsayıyorum #rrggbb. Siparişiniz tersine çevrilmiş olması dışında, kodunuz neredeyse doğrudur. Olmalı:

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

Ayrıca, bit-shift kullanmak okumayı biraz daha kolaylaştırabilir:

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

Bu kod #fff ve #ffffff değişkenlerini ve opaklığı kabul eder.

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

Tek hat işlevsel HEX - RGBA

Hem kısa hem de #fffuzun #ffffffformları destekler .
Alfa kanalını (opaklık) destekler.
Her iki durumda da karma belirtilip belirtilmediğini umursamaz.

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

örnekler:

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)  

Bu, hesaplanan stil özelliklerinden renk almak için kullanılabilir:

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

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

Bitsel çözelti normalde tuhaftır. Ama bu durumda sanırım bu daha zarif 😄

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

Kullanımı:

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

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

// hsl gösterimini yok sayarak, renk değerleri genellikle adlar, rgb, rgba veya hex-

// Hex, 3 değer veya 6 olabilir.

// Rgb yüzde ve tamsayı olabilir.

// En azından bu biçimlerin tümünü hesaba katmak en iyisidir.

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, cevabınıza eklemek için (bunu bir yoruma uydurmak biraz garip).

Yazıldığı gibi rgbToHex işlevinin noktadan sonra öğeler içeren bir dize döndürdüğünü ve r, g, b değerlerinin 0-255 aralığında kalmasını gerektirdiğini gördüm.

Eminim ki bu çoğu için açık gibi görünebilir, ama benim anlayabilmem iki saat sürdü ve o zamana kadar sorunumun başka bir yerde olduğunu fark etmeden önce orijinal yöntem 7 hatta balonlandı. Bu yüzden başkalarının zaman ve güçlükten tasarruf etmek adına, ön koşulları kontrol eden ve ipin yabancı bitlerini kesen biraz değiştirilmiş kodum.

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 birleştirilebilir ok işlevleri

ES6 kullanarak bazı modern fonksiyonel / kompozisyon js yazanlar için bunu paylaşmaya dayanamıyorum. İşte veri görselleştirme için renk enterpolasyonu yapan bir renk modülünde kullandığım bazı kaygan tek gömlekler.

Bunun alfa kanalını hiç işlemediğini unutmayın.

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

Deneyin

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

İki renk değerini (RGB, ad rengi veya onaltılık değer olarak verilir) karşılaştırmanız veya HEX'e dönüştürmeniz gerekiyorsa HTML5 tuval nesnesini kullanın.

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

Böyle bir şeyin peşinde olabilir misiniz?

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

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

# 9687c8 görüntüler

3 basamaklı Tim Down'ın hexToRgb işlevi aşağıdaki gibi geliştirilebilir:

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

Herhangi bir renk değerini kabul etmek ve opaklık eklemek istediğim için bu sorunla karşılaştım, bu yüzden modern tarayıcılarda yerel tuvali kullanan bu hızlı jQuery eklentisini yaptım. Sadece harika görünüyor.

Düzenle

Doğru bir jQuery eklentisi nasıl yapılacağını anlayamıyorum, bu yüzden sadece normal bir işlev olarak sunacağım.

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

çok geçersiz değerleri kabul eden bir fonksiyona ihtiyacım vardı

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

Bu @cwolves cevabının bir dönüşü

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}

Sonucu sorunsuz bir şekilde elde etmek için bu işlevi kullanın. :)

Bir dizeyi kabul eden steno versiyonu:

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

Zaten onaltılık olup olmadığını kontrol etmek için

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

Bu cevabın soruya mükemmel bir şekilde uyması pek mümkün olmasa da, çok az faydalı olabilir.

1. Herhangi bir rastgele eleman oluştur

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

2. Dönüştürmek istediğiniz renge geçerli herhangi bir stil ayarlama

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

3. Style özelliğini tekrar arayın

> toRgb.style.color;

< "rgb(133, 225, 133)" Renginiz Rgb'ye dönüştürüldü

Şunun için çalışır: Hsl, Hex

Şunun için çalışmaz: Adlandırılmış renkler

Benim hex2rbg sürümü:

1. #Fff gibi kısa onaltılık kabul et
2. Algoritma uyumluluğu o (n) 'dir, normal ifadeden daha hızlı olmalıdır. ÖrneğinString.replace, String.split, String.match vb.
3. Sabit alan kullanın.
4. RGB ve rgba desteği.

IE8 kullanıyorsanız hex.trim () öğesini kaldırmanız gerekebilir.

Örneğin

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)

kod:

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

Bu snippet, hex'i rgb'ye ve rgb'yi hex'e dönüştürür.

Demoyu görüntüle

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
}

#AARRGGBB (Alfa, Kırmızı, Yeşil, Mavi) hex biçimine sahip XAML verileri ile çalışıyorum. Yukarıdaki cevapları kullanarak, benim çözümüm:

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/

Doğrudan jQuery'den dönüştürmek için deneyebilirsiniz:

  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;

Birçok yanıtı dikkate alarak (kısmen RGB'den HEX'e ya da başka bir şekilde) soruyu cevaplayınca kısmi cevabımı da göndereceğimi düşündüm.

Benzer bir sorunum vardı ve böyle bir şey yapmak istedim: herhangi bir geçerli CSS rengi (HSL (a), RGB (a), HEX veya renk adı) girin ve 1. bir alfa değeri ekleyebilir veya kaldırabilirsiniz, 2. bir rgb (a) nesnesi döndürür. Tam olarak bu amaçla bir eklenti yazdım. GitHub'da bulunabilir (jQuery gerektirir, ancak isterseniz çatallayabilir ve vanilya versiyonu yapabilirsiniz). İşte bir demo sayfası . Sen edebilirsiniz kendiniz deneyin ve anında oluşturulan çıktıyı bakın.

Seçenekleri buraya kopyalayıp yapıştıracağım:

RGB Jeneratör bir argümanı, rengi kabul eder ve üç seçenek sunar: asObject, addAlpha ve removeAlpha. Üç seçenek atlandığında, RGB rengi dize olarak döndürülür.

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

Varsayılan olarak alfa bileşenlerinin dahil edildiğini unutmayın. Giriş değeri bir alfa değeri içeriyorsa, çıktı RGBa biçiminde olacaktır.

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

RemoveAlpha öğesini true olarak ayarlayarak bu davranışı devre dışı bırakabilirsiniz. Bu, başlangıçtaki HSLa veya RGBa rengindeki alfa değerlerini kaldıracaktır.

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

Öte yandan, bir alfa kanalı eklemek istiyorsanız, bunu 0 ile 1 arasında herhangi bir değere addAlpha ayarlayarak yapabilirsiniz. Giriş saydam olmayan bir renk olduğunda, alfa değeri eklenecektir. Saydamsa, sağlanan değer girişin alfa bileşeninin üzerine yazacaktır.

$.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)

Son olarak RGB (a) rengini nesne olarak çıkarmak da mümkündür. R, g, b ve isteğe bağlı olarak 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'ın en yüksek puanlı yanıtı, RGB'ye dönüştürme için görebildiğim en iyi çözümü sunuyor. Hex dönüşümü için bu çözümü daha iyi seviyorum çünkü Hex'e dönüşüm için en özlü sınır kontrolünü ve sıfır dolguyu sağlıyor.

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

Sola kaydırma '<<' ve veya '|' operatörleri de bunu eğlenceli bir çözüm haline getiriyor.

Bunu buldum ve oldukça basit olduğunu ve doğrulama testlerine sahip olduğunu ve alfa değerlerini (isteğe bağlı) desteklediğini düşündüğüm için, bu duruma uygun olacaktır.

Ne yaptığınızı biliyorsanız regex satırını yorumlamanız yeterlidir ve biraz daha hızlıdır.

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