javascript — RGB в Hex и Hex в RGB

Исходный файл

Наконец, альтернативная версия ответа '#0080C0'(0, 128, 192) Глядя на вывод

@ casablanca

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-fd]{2})([a-fd]{2})([a-fd]{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";

Как вычислить возраст в годах, учитывая дату рождения в формате ГГГГММДД? Возможно ли использовать функцию Date ()? & # xA ; & # xA ; Я ищу лучшее решение, чем тот, который я сейчас использую: & # xA ; & # xA ; & # xD ; & # хА ; & # Xd ; & # хА ; var dob = ‘rgbToHex(), я прочитал Редактировать: 3/28/2017 Вот еще один подход и предложено в комментариях @cwolves:

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

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

Работал для меня в Firefox-21 и Chromium-25. {* } Это не должно быть заблокировано никакими блокировщиками всплывающих окон … Надеюсь.

событий мутации hexToRgb(), который также анализирует сокращенный шестнадцатеричный триплет, такой как «# 03F»:

function hexToRgb(hex) {
  // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
  var shorthandRegex = /^#?([a-fd])([a-fd])([a-fd])$/i;
  hex = hex.replace(shorthandRegex, function(m, r, g, b) {
    return r   r   g   g   b   b;
  });

  var result = /^#?([a-fd]{2})([a-fd]{2})([a-fd]{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";

выполнит эту работу.

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

Редактировать: 11/11 / 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];
}

Преобразование RGB в шестнадцатеричный

Преобразование шестнадцатеричного в RGB

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

Возвращает массив

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'

Это также имеет проблемы с точностью, поэтому это не может быть полностью либо доверенный. Может быть отключен на несколько часов, в некоторые годы или во время перехода на летнее время (в зависимости от часового пояса).

, вероятно, является наиболее точным, поскольку не зависит от времени суток. http://jsperf.com/birthday-calculation/15 [r, g, b] Ramda JS "#03F" Глядя на вывод

const hexToRgb = hex =>
  hex.replace(/^#?([a-fd])([a-fd])([a-fd])$/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'

. Ваш код почти верен, за исключением того, что вы изменили заказ. Это должно быть: Babel http://jsfiddle.net/codeandcloud/n33RJ/

Важно: Этот ответ не дает 100 % точного ответа, он выключен примерно на 10-20 часов в зависимости от Дата. #rrggbb https://github.com/k-gun/so/blob/master/so_util.js

var decColor = red * 65536   green * 256   blue;

Также, используя сдвиги битов могут немного облегчить чтение:

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

Этот код принимает варианты и непрозрачность # 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(',') ')';
}
function hex2rgb(hex) {
  return ['0x'   hex[1]   hex[2] | 0, '0x'   hex[3]   hex[4] | 0, '0x'   hex[5]   hex[6] | 0];
}

Это можно использовать для получения цветов из свойства вычисляемых стилей:

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: Если вы можете найти лучшее решение, пожалуйста, поделитесь! :-)

Однострочный функционал от HEX до RGBA

Он принимает объект Date в качестве входных данных, поэтому вам необходимо проанализировать отформатированную строку даты #fff: #ffffff // Rgb может быть как процентным, так и целым числом ценности.
Поддерживает альфа-канал (непрозрачность).
Не имеет значения, указан хэш или нет, работает в обоих случаях.

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)  

integer index

// 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 строк, прежде чем я понял, что моя проблема была в другом месте. Итак, в интересах экономии времени других пользователей & Amp ;, вот мой слегка измененный код, который проверяет предварительные условия и удаляет посторонние биты строки.

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

Если вам нужно сравнить два цветовых значения (заданных как rgb, name color или hex) или преобразовать в HEX, используйте HTML5 canvas объект.

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

Но если вы инициализируете массив такой длины, как

Я не могу не поделиться этим для тех, кто, возможно, пишет некоторые современные функциональные / композиционные 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));

Шаблон, соответствующий как минимум 1 заглавным буквам, 1 цифре и любым специальным символам и длиной от 8 до 63.

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

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

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

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

var hex2Rgb = function(hex){
  var result = /^#?([a-fd]{2})([a-fd]{2})([a-fd]{2})|([a-fd]{1})([a-fd]{1})([a-fd]{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;
};

моей версией hex2rbg:

  1. Принять короткий гекс, как # fff
  2. compact 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 (-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();
}

Хотя этот ответ вряд ли идеально подходит под вопрос, тем не менее он может быть очень полезным.

  1. . Таким образом, влияя на все другие объекты, созданные с помощью

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

  1. Установите любой допустимый стиль для цвета, который вы хотите преобразовать.

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

  1. Повторно вызовите свойство стиля

> toRgb.style.color;

< "rgb(133, 225, 133)" Ваш цвет был преобразован в Rgb

Работает для: Hsl, 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

я столкнулся с этой проблемой, поскольку хотел принять любое значение цвета и иметь возможность добавить прозрачность, поэтому я создал этот быстрый плагин jQuery, который использует собственный холст в современных браузерах. Кажется, работает просто замечательно.

Edit

Оказывается, я не могу понять, как сделать его правильным плагином 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;
};
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}

Используйте эти функции для достижения результата без каких-либо проблем. :)

Я работаю с данными 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;

Сокращенная версия, которая принимает строку:

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

Чтобы проверить, не является ли она уже шестнадцатеричной Учитывая большое количество ответов, лишь частично отвечаю на вопрос (от RGB до HEX

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

и наоборот), я решил опубликовать свой частичный ответ. или GitHub

У меня была похожая проблема, и я хотел сделать что-то вроде этого: ввести любой допустимый цвет CSS (HSL (a), RGB (a), HEX или имя цвета) и 1. иметь возможность добавлять или удалять альфа-значение , 2. вернуть объект rgb (a). Я написал плагин именно для этой цели. Его можно найти в (для этого требуется jQuery, но при желании вы можете его разветвить и сделать ванильную версию). Вот демонстрационная страница , попробуйте для себя . Вы можете javascript — Как начать работу с Node.js — Переполнение стека Неявно добавлено JavaScript и когда мы предоставляем

javascript — Как начать работу с Node.js

, принимают один аргумент — цвет и предоставляют три параметра: asObject, addAlpha и removeAlpha. Если три параметра не указаны, цвет RGB будет возвращен в виде строки.

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

http://nodejs.org/

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

запрос. Кроме того, код состояния HTTP для ответа должен быть 2xx — обычно 200 или 204. Если это любой другой код состояния, браузер остановится прямо здесь.

$.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. Мне больше нравится это решение для шестнадцатеричного преобразования, потому что оно обеспечивает самую краткую проверку границ и заполнение нулями для преобразования в шестнадцатеричное.

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

javascript — ошибка: невозможно установить заголовки после их отправки клиенту — переполнение стека

HTML5 имеет

Просто закомментируйте строку регулярных выражений, если вы знаете, что делаете, и это немного быстрее.

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

Вместо копий и копий фрагментов, найденных здесь и там, я бы рекомендовал использовать хорошо протестированную и поддерживаемую библиотеку: Но что (доступно для node.js и браузера). Это всего лишь 7 КБ (минимизировано, сжато еще меньше).

Мой пример =)

color: {
            toHex: function(num){
                var str = num.toString(16);
                return (str.length<6?'#00' str:'#' str);
            },
            toNum: function(hex){
                return parseInt(hex.replace('#',''), 16);
            },
            rgbToHex: function(color)
            {
                color = color.replace(/s/g,"");
                var aRGB = color.match(/^rgb((d{1,3}[%]?),(d{1,3}[%]?),(d{1,3}[%]?))$/i);
                if(aRGB)
                {
                    color = '';
                    for (var i=1;  i<=3; i  ) color  = Math.round((aRGB[i][aRGB[i].length-1]=="%"?2.55:1)*parseInt(aRGB[i])).toString(16).replace(/^(.)$/,'0$1');
                }
                else color = color.replace(/^#?([da-f])([da-f])([da-f])$/i, '$1$1$2$2$3$3');
                return '#' color;
            }

, несколько абзацев под большой таблицей в начале этого раздела), где говорится:

Исходный файл

Наконец, альтернативная версия ответа '#0080C0'(0, 128, 192) Глядя на вывод

Совершенно другой подход для преобразования шестнадцатеричного цветового кода в RGB без регулярных выражений

Он обрабатывает оба #FFF и #FFFFFF на основе длины строки. Он удаляет # от начала строки, делит каждый символ строки и преобразует его в base10 и добавляет его в соответствующий индекс на основе своей позиции.

//Algorithm of hex to rgb conversion in ES5
function hex2rgbSimple(str){
  str = str.replace('#', '');
  return str.split('').reduce(function(result, char, index, array){
    var j = parseInt(index * 3/array.length);
    var number = parseInt(char, 16);
    result[j] = (array.length == 3? number :  result[j]) * 16   number;
    return result;
  },[0,0,0]);
}

//Same code in ES6
hex2rgb = str => str.replace('#','').split('').reduce((r,c,i,{length: l},j,n)=>(j=parseInt(i*3/l),n=parseInt(c,16),r[j]=(l==3?n:r[j])*16 n,r),[0,0,0]);

//hex to RGBA conversion
hex2rgba = (str, a) => str.replace('#','').split('').reduce((r,c,i,{length: l},j,n)=>(j=parseInt(i*3/l),n=parseInt(c,16),r[j]=(l==3?n:r[j])*16 n,r),[0,0,0,a||1]);

//hex to standard RGB conversion
hex2rgbStandard = str => `RGB(${str.replace('#','').split('').reduce((r,c,i,{length: l},j,n)=>(j=parseInt(i*3/l),n=parseInt(c,16),r[j]=(l==3?n:r[j])*16 n,r),[0,0,0]).join(',')})`;


console.log(hex2rgb('#aebece'));
console.log(hex2rgbSimple('#aebece'));

console.log(hex2rgb('#aabbcc'));

console.log(hex2rgb('#abc'));

console.log(hex2rgba('#abc', 0.7));

console.log(hex2rgbStandard('#abc'));

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

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

HTML использует шестнадцатеричную систему, а rgb использует десятичную систему. поэтому вы должны преобразовать число из шестнадцатеричного в десятичное и наоборот.

Похоже, вы ищете что-то вроде этого:

function hexstr(number) {
    var chars = new Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f");
    var low = number & 0xf;
    var high = (number >> 4) & 0xf;
    return ""   chars[high]   chars[low];
}

function rgb2hex(r, g, b) {
    return "#"   hexstr(r)   hexstr(g)   hexstr(b);
}

, рекомендуйте удалить еще один запрос

rgbToHex = (rgb) ->
    a = rgb.match /d /g
    rgb  unless a.length is 3
    "##{ ((1 << 24)   (parseInt(a[0]) << 16)   (parseInt(a[1]) << 8)   parseInt(a[2])).toString(16).slice(1) }"

Использование объединения анонимных функций и Array.map для более чистого ; более упорядоченного вида.

var write=function(str){document.body.innerHTML=JSON.stringify(str,null,'    ');};

function hexToRgb(hex, asObj) {
  return (function(res) {
    return res == null ? null : (function(parts) {
      return !asObj ? parts : { r : parts[0], g : parts[1], b : parts[2] }
    }(res.slice(1,4).map(function(val) { return parseInt(val, 16); })));
  }(/^#?([a-fd]{2})([a-fd]{2})([a-fd]{2})$/i.exec(hex)));
}

function rgbToHex(r, g, b) {
  return (function(values) {
    return '#'   values.map(function(intVal) {
      return (function(hexVal) {
        return hexVal.length == 1 ? "0"   hexVal : hexVal;
      }(intVal.toString(16)));
    }).join('');
  }(arguments.length === 1 ? Array.isArray(r) ? r : [r.r, r.g, r.b] : [r, g, b]))
}

// Prints: { r: 255, g: 127, b: 92 }
write(hexToRgb(rgbToHex(hexToRgb(rgbToHex(255, 127, 92), true)), true));
body{font-family:monospace;white-space:pre}

Я нашел это…
http://jsfiddle.net/Mottie/xcqpF/1/light/

function rgb2hex(rgb){
    rgb = rgb.match(/^rgba?[s ]?([s ]?(d )[s ]?,[s ]?(d )[s ]?,[s ]?(d )[s ]?/i);
    return (rgb && rgb.length === 4) ? "#"  
        ("0"   parseInt(rgb[1],10).toString(16)).slice(-2)  
        ("0"   parseInt(rgb[2],10).toString(16)).slice(-2)  
        ("0"   parseInt(rgb[3],10).toString(16)).slice(-2) : '';
}

Вот Javascript код для изменения HEX Цветовое значение для R Вот более минимальный метод без каких-либо зависимостей или библиотек. G reen, HTML: индивидуально.

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}

Примечание к уровню 4 CSS: Как правило, причина, по которой вы хотите иметь возможность конвертировать шестнадцатеричный код в RGB, заключается в альфа-канале, и в этом случае вы можете вскоре сделать это с помощью CSS4 . Вот примечание #FF8800FF или #f80fдля полностью прозрачного оранжевого.

(Для ясности, это не инициализирует в одной функции, переходящий от одного к другому . Он принимает необязательный альфа-канал, поддерживает оба формата строки и массива, анализирует 3,4,6,7-символьные шестнадцатеричные значения и rgb / полную или частичную строки (за исключением определенных в процентах значений rgb / a) без флага.

(Заменить несколько синтаксисов ES6 при поддержке IE)

В строке:

function rgbaHex(c,a,i){return(Array.isArray(c)||(typeof c==='string'&&/,/.test(c)))?((c=(Array.isArray(c)?c:c.replace(/[sa-z();] /gi,'').split(',')).map(s=>parseInt(s).toString(16).replace(/^([a-zd])$/i,'0$1'))),'#' c[0] c[1] c[2]):(c=c.replace(/#/,''),c=c.length%6?c.replace(/(.)(.)(.)/,'$1$1$2$2$3$3'):c,a=parseFloat(a)||null,`rgb${a?'a':''}(${[(i=parseInt(c,16))>>16&255,i>>8&255,i&255,a].join().replace(/,$/,'')})`);}

Не стесняйтесь добавлять вашу реализацию в следующие

function rgbaHex(c, a) {
    // RGBA to Hex
    if (Array.isArray(c) || (typeof c === 'string' && /,/.test(c))) {
        c = Array.isArray(c) ? c : c.replace(/[sa-z();] /gi, '').split(',');
        c = c.map(s => window.parseInt(s).toString(16).replace(/^([a-zd])$/i, '0$1'));

        return '#'   c[0]   c[1]   c[2];
    }
    // Hex to RGBA
    else {
        c = c.replace(/#/, '');
        c = c.length % 6 ? c.replace(/(.)(.)(.)/, '$1$1$2$2$3$3') : c;
        c = window.parseInt(c, 16);

        a = window.parseFloat(a) || null;

        const r = (c >> 16) & 255;
        const g = (c >> 08) & 255;
        const b = (c >> 00) & 255;

        return `rgb${a ? 'a' : ''}(${[r, g, b, a].join().replace(/,$/,'')})`;
    }
}

Использование:

rgbaHex('#a8f')

rgbaHex('#aa88ff')

rgbaHex('#A8F')

rgbaHex('#AA88FF')

rgbaHex('#AA88FF', 0.5)

rgbaHex('#a8f', '0.85')

// etc.

rgbaHex('rgba(170,136,255,0.8);')

rgbaHex('rgba(170,136,255,0.8)')

rgbaHex('rgb(170,136,255)')

rgbaHex('rg170,136,255')

rgbaHex(' 170, 136, 255 ')

rgbaHex([170,136,255,0.8])

rgbaHex([170,136,255])

// etc.

На основании @ MichałPerłakowski ответ (EcmaScipt 6) и его ответ на основе Ответ Тима Дауна

Я написал модифицированную версию функции преобразования hexToRGB с добавлением безопасной проверки, если цветовые компоненты r / g / b находятся в диапазоне 0-255, а также функции могут принимать параметры Number r / g / b или String r Параметры / g / b и вот оно:

 function rgbToHex(r, g, b) {
     r = Math.abs(r);
     g = Math.abs(g);
     b = Math.abs(b);

     if ( r < 0 ) r = 0;
     if ( g < 0 ) g = 0;
     if ( b < 0 ) b = 0;

     if ( r > 255 ) r = 255;
     if ( g > 255 ) g = 255;
     if ( b > 255 ) b = 255;

    return '#'   [r, g, b].map(x => {
      const hex = x.toString(16);
      return hex.length === 1 ? '0'   hex : hex
    }).join('');
  }

Для безопасного использования функции — вы должны проверить, является ли передаваемая строка реальным цветом строки rbg — например, очень простой проверкой может быть:

if( rgbStr.substring(0,3) === 'rgb' ) {

  let rgbColors = JSON.parse(rgbStr.replace('rgb(', '[').replace(')', ']'))
  rgbStr = this.rgbToHex(rgbColors[0], rgbColors[1], rgbColors[2]);

  .....
}

Я выбрал это для использования с Если второй аргумент не задан, он вернет пустой объект с первым аргументом, который будет использоваться в качестве прототипа возвращаемого объекта (первый объект, который будет использоваться в прототипе возвращаемого объекта цепь). . Он преобразует строку RGB, такую ​​как "30,209,19", в соответствующий клон шестнадцатеричной строки "#1ed113":

var rgb = '30,209,19';

var hex = _.reduce(rgb.split(','), function(hexAccumulator, rgbValue) {
    var intColor = _.parseInt(rgbValue);

    if (_.isNaN(intColor)) {
        throw new Error('The value '   rgbValue   ' was not able to be converted to int');
    }

    // Ensure a value such as 2 is converted to "02".
    var hexColor = _.padLeft(intColor.toString(16), 2, '0');

    return hexAccumulator   hexColor;
}, '#');

. Вы можете попробовать этот простой фрагмент кода ниже.

Очень распространенное использование в jQuery — это различать jQuery объекты хранятся в переменных от других переменных. Например, я бы определил

list($r, $g, $b) = sscanf(#7bde84, "#xxx");
echo $r . "," . $g . "," . $b;

Это вернет 123,222,132

От RGB до HEX

$rgb = (123,222,132),
$rgbarr = explode(",",$rgb,3);
echo sprintf("#xxx", $rgbarr[0], $rgbarr[1], $rgbarr[2]);

Так что теперь вы можете передавать переменную в функции replace.

Если это кому-нибудь поможет, у моего API есть функции для этих преобразований.

<script src="http://api.xlww.net/xQuery/xQuery.js"></script>
<script>
  x.init();
  var rgb=new x.rgb(37,255,83);
  alert(rgb.hex);
  var hex=new x.hex("#ffa500");
  alert("(" hex.rgb[0] "," hex.rgb[1] "," hex.rgb[2] ")");
</script>
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector