Як конвертувати кольори у формат RGB у шістнадцятковий формат і навпаки?

Наприклад, перетворити '#0080C0'в (0, 128, 192).

Примітка : як варіант rgbToHexЧекайте цілочисельні значення r, gі b, таким чином Ви повинні будете зробити своє власне округлення , якщо у вас є не цілі значення.

Наступне зробить перетворення RGB в шістнадцяткову і додасть необхідні нульові накладки:

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

Нарешті, альтернативна версія rgbToHex(), про яку йшлося у відповіді @ casablanca та запропонована в коментарях @cwolves:

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

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

Оновлення 3 грудня 2012 року

Ось версія, hexToRgb()яка також аналізує скорочений шістнадцятковий триплет, такий як "# 03F":

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

Редагувати: 28.03.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];
}

Редагувати: 11.08.2017 Новий підхід вище після тестування не швидший :(. Хоча це цікавий альтернативний спосіб.

Версія відповіді Тіма Дауна ECMAScript 6

Перетворення RGB в шістнадцятковий

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'

Перетворення шістнадцяткових в RGB

Повертає масив [r, g, b]. Працює також зі скороченими шістнадцятковими трійками, такими як "#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]

Бонус: RGB до шестигранної за допомогою padStart()методу

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, тобто #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(',')+')';
}

Однорядковий функціональний 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-

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

@ Тім, щоб додати свою відповідь (це трохи незручно вписало це в коментар).

Як було написано, я виявив, що функція rgbToHex повертає рядок з елементами після точки, і вона вимагає, щоб значення r, g, b потрапляли в межах 0-255.

Я впевнений, що це може здатися очевидним для більшості, але мені знадобилося дві години, щоб я з'ясував, і до цього часу оригінальний метод розрізався на 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 - компоновані функції стрілок

Я не можу противитися тому, щоб поділитися цим для тих, хто, можливо, пише деякі сучасні функціональні / композиційні js за допомогою ES6. Ось кілька гладких одношарових я використовую в кольоровому модулі, який робить кольорову інтерполяцію для візуалізації даних.

Зауважте, що це взагалі не обробляє альфа-канал.

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, колір імені або шістнадцяткове значення) або перетворити на HEX, використовуйте об’єкт полотна 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

Для трьох цифр функцію Тім Дауна можна вдосконалити, як показано нижче:

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

Щоб перевірити, чи він уже не є шістнадцятковим

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
2. Сумісність алгоритму є o (n), повинна бути швидшою, ніж використання регулярного вираження. напрString.replace, String.split, String.match тощо.
3. Використовуйте постійний простір.
4. Підтримка rgb та rgba.

Вам може знадобитися видалити hex.trim (), якщо ви використовуєте 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()+')';
    }
}

Цей фрагмент перетворює шістнадцятковий в rgb і rgb в hex.

Переглянути демонстраційну версію

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
}

Я працюю з даними XAML, які мають шістнадцятковий формат #AARRGGBB (Альфа, Червоний, Зелений, Синій). Використовуючи відповіді вище, ось моє рішення:

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. бути в змозі додати або видалити значення альфа, 2. повернути 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

Відповідь Тіма Дауна з найкращим рейтингом - це найкраще рішення, яке я бачу для переходу на RGB. Мені подобається, що це рішення для конверсії Hex краще, хоча тому, що воно забезпечує перевірку самих чітких меж та нульове накладення для перетворення в Hex.

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