RGB в Hex и Hex в RGB - PullRequest
Новая
       236

RGB в Hex и Hex в RGB

454 голосов
/ 11 апреля 2011

Как преобразовать цвета в формате RGB в шестнадцатеричный формат и наоборот?

Например, преобразовать '#0080C0' в (0, 128, 192).

Ответы [ 43 ]

6 голосов
/ 19 декабря 2012

@ Тим, чтобы добавить к вашему ответу (это немного неудобно вписывать это в комментарий).

Как написано, я обнаружил, что функция 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);
}
4 голосов
/ 05 декабря 2012

Если вам нужно сравнить два цветовых значения (заданные как 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);
4 голосов
/ 24 февраля 2017

(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));
3 голосов
/ 11 апреля 2011

Можете ли вы после чего-то вроде этого? 

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

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

отображает # 9687c8

3 голосов
/ 02 ноября 2011

Для 3 цифр функция hexToRgb Tim Down может быть улучшена, как показано ниже: 

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;
};
3 голосов
/ 17 марта 2016

Моя версия 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()+')';
    }
}
2 голосов
/ 24 июля 2013

Мне нужна была функция, которая тоже принимает недопустимые значения, такие как

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();
}
2 голосов
/ 23 июня 2013

Я столкнулся с этой проблемой, поскольку хотел принять любое значение цвета и иметь возможность добавить прозрачность, поэтому я создал этот быстрый плагин 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;
};
2 голосов
/ 24 апреля 2013

Этот фрагмент преобразует гекс в rgb и rgb в гекс.

Посмотреть демонстрацию 

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
}
2 голосов
/ 26 апреля 2019

Побитовое решение обычно странно.Но в этом случае я думаю, что это более элегантно ? 

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
Страница:
...