На смежную тему, более (и, возможно, лучше) способы преобразования между цветами hex и RGB здесь: stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb Это колесо было изобретено достаточно много раз построить автопоезд. Я надеялся, что одна из популярных библиотек JS, проще, чем меньше, будет иметь функцию полезности.
Майкл Шепер
Помните, что некоторые браузеры возвращают rgba (#, #, #, #), например, rgba (0,0,0,0), который является прозрачным, а не черным. 4-е значение - непрозрачность, при этом значение 1.0 соответствует цвету 100%, а 0,5 - 50%.
Двенадцать24
Ответы:
141
var hexDigits =newArray("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f");//Function to convert rgb color to hex formatfunction rgb2hex(rgb){
rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);return"#"+ hex(rgb[1])+ hex(rgb[2])+ hex(rgb[3]);}function hex(x){return isNaN(x)?"00": hexDigits[(x - x %16)/16]+ hexDigits[x %16];}
+1, вы можете использовать Number.toString (16) - по крайней мере, для каждой шестнадцатеричной цифры (или pad с 0, если меньше 16)
orip
19
-1. Как упоминалось в orip, вы можете использовать toString (16). Проголосовал за другие неэффективности. Если вы собираетесь объявлять hexDigits при каждом вызове функции, по крайней мере, делайте это в теле функции rgb2hex (не в теле hex), чтобы массив не переопределялся 3 раза за 1 вызов rgb2hex. Также научитесь использовать «var», чтобы не загрязнять глобальный охват.
Мэтт
3
Этот метод не выглядит слишком терпимым к различным пробелам или заглавным буквам. jsfiddle.net/Xotic750/pSQ7d
Xotic750
1
Если вы действительно хотите быть педантичным, вы можете сделать регулярное выражение более допустимым: rgb.match(/^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i)однако данное регулярное выражение предназначено для того, чтобы справляться с форматом, заданным браузером при использовании jQuery, и у него нет различий между пробелами и опознавательными знаками Вы говорите о. Вы также можете использовать то же регулярное выражение и просто удалить все пробелы и преобразовать в нижний регистр перед сопоставлением на rgb. PS Ваш пример с скрипкой: 'rgb (10, 128,)' Я не думаю, что это разумно для тестирования
переплет
и для меня возвращение jquery css background-colors приходит в формате с rgba, так что это не работает.
Мигель
159
Вот более чистое решение, которое я написал на основе предложения @Matt:
function rgb2hex(rgb){
rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);function hex(x){return("0"+ parseInt(x).toString(16)).slice(-2);}return"#"+ hex(rgb[1])+ hex(rgb[2])+ hex(rgb[3]);}
Некоторые браузеры уже возвращают цвета в шестнадцатеричном формате (начиная с Internet Explorer 8 и ниже). Если вам нужно разобраться с этими случаями, просто добавьте условие внутри функции, как предложено @gfrobenius:
Я предлагаю всем: взгляните на мой ответ здесь, чтобы увидеть улучшенную версию с использованием jQuery CSS Hooks .
Эрик Петручелли
1
@ Гиго, прости, но ты не прав. IE8 уже возвращает цвета , как шестнадцатеричные при получении текущего стиля, таким образом: document.getElementById("your_id").currentStyle["backgroundColor"]. Функция rgb2hex()не нужна. Вот плагин jQuery с использованием CSS-хуков, которые я предложил выше, который уже выполняет все проверки для восстановления цветов в разных браузерах: stackoverflow.com/questions/6177454/…
Erick Petrucelli
2
@Ghigo, я думаю, вы неправильно поняли: вы НЕ ДОЛЖНЫ использовать эту функцию, если вы находитесь в браузере, который возвращает HEX. Эта функция конвертирует RGB в HEX и только его. Не используйте его, когда он не в RGB. Тот факт, что вам нужно более полное решение (которое определяет, является ли значение уже как RGB, как сделано @ Jim-F), не меняет того факта, что это решение предлагает именно то, что было запрошено OP. Твое понижение не имеет смысла, извини.
Эрик Петручелли,
4
Извините, но я не согласен. Кросс-браузерная функция всегда лучше, чем та, которая требует выполнения на основе определения браузера. Оператор попросил преобразовать $('#selector').css('backgroundColor')в гекс, а не значение rgb в гекс. И на IE8, $('#selector').css('backgroundColor')уже шестнадцатеричный, поэтому он должен быть обработан. Вот и все. Не сердитесь на меня :)
Ghigo
1
Сделайте это, ребята, простой вкладыш, который я добавил в rgb2hex()функцию, спасибо @ErickPetru! Я должен написать код обратно в IE7, хотите верьте, хотите нет. С .css('backgroundColor')и родные obj.style.backgroundColorIE7 & 8 будут возвращать hex, а не RGB, поэтому я добавил это в качестве первой строки rgb2hex()функции в поставляемом ответе, чтобы она работала вплоть до IE7: /* IE7&8 will return hex, so no need to run this function if it is already hex. */if (/^#[0-9A-F]{6}$/i.test(rgb)) return rgb.substring(1, 7); //I'm doing a subtring here because I do not want the leading # symbolнадеюсь, это поможет.
Гфробениус
61
Большинство браузеров, похоже, возвращают значение RGB при использовании:
$('#selector').css('backgroundColor');
Только IE (пока протестировано только 6) возвращает значение Hex.
Чтобы избежать сообщений об ошибках в IE, вы можете заключить функцию в оператор if:
Этот работает лучше, чем большинство других, так как Джим принимает во внимание rgba, что и использует Safari (по крайней мере, в Mac OS X). Спасибо, Джим!
Паскаль Линделауф
1
Отличное решение. Обратите внимание, что функция возвращает строчные буквы, т.е. # ff5544, а не # FF5544.
Питер
Это регулярное выражение будет поддерживать каналы aplha также в приведенном выше решении rgb = rgb.match (/ ^ rgba? ((\ D +), \ s * (\ d +), \ s * (\ d +) (?:, \ S *) (0 \ \ d +.))) $ /?);
Хеннинг зимой
работать как шарм
ucMedia
22
Обновлен @ErickPetru для совместимости с rgba:
function rgb2hex(rgb){
rgb = rgb.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+))?\)$/);function hex(x){return("0"+ parseInt(x).toString(16)).slice(-2);}return"#"+ hex(rgb[1])+ hex(rgb[2])+ hex(rgb[3]);}
Я обновил регулярное выражение для соответствия альфа-значению, если оно определено, но не использую его.
Просто для полноты: я работаю над тем, что будет экспортировать в PowerPoint (не спрашивайте ...), и он принимает четвертый байт шестнадцатеричной строки для альфа-канала, поэтому можно использовать его следующим образом: return hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]) /* Add the alpha channel if it exists */ + (rgb[5] !== undefined ? hex(Math.round(rgb[5] * 255)) : ''); Также я удаляю #символ, чтобы сделать его независимым от конечного использования (можно получить вывод и, 0xнапример, добавить к нему префикс или оставить его без префикса). Надеюсь, это поможет кому-то!
Оскар Гомес Альканьис
10
Вот один лайнер ES6, который не использует jQuery:
var rgb = document.querySelector('#selector').style['background-color'];return'#'+ rgb.substr(4, rgb.indexOf(')')-4).split(',').map((color)=> parseInt(color).toString(16)).join('');
Спасибо, это помогло мне включить его в страницу Wordpress, которая удаляет обратные слеши регулярных выражений в предыдущих ответах.
Джейсон
5
Вот версия, которая также проверяет прозрачность, я нуждался в этом, поскольку мой объект должен был вставить результат в атрибут стиля, где прозрачная версия шестнадцатеричного цвета на самом деле является словом «прозрачный» ..
цветовой класс, взятый из палитры начальной загрузки
// Color objectvarColor=function(val){this.value ={
h:1,
s:1,
b:1,
a:1};this.setColor(val);};Color.prototype ={constructor:Color,//parse a string to HSB
setColor:function(val){
val = val.toLowerCase();var that =this;
$.each(CPGlobal.stringParsers,function( i, parser ){var match = parser.re.exec( val ),
values = match && parser.parse( match ),
space = parser.space||'rgba';if( values ){if(space ==='hsla'){
that.value =CPGlobal.RGBtoHSB.apply(null,CPGlobal.HSLtoRGB.apply(null, values));}else{
that.value =CPGlobal.RGBtoHSB.apply(null, values);}returnfalse;}});},
setHue:function(h){this.value.h =1- h;},
setSaturation:function(s){this.value.s = s;},
setLightness:function(b){this.value.b =1- b;},
setAlpha:function(a){this.value.a = parseInt((1- a)*100,10)/100;},// HSBtoRGB from RaphaelJS// https://github.com/DmitryBaranovskiy/raphael/
toRGB:function(h, s, b, a){if(!h){
h =this.value.h;
s =this.value.s;
b =this.value.b;}
h *=360;var R, G, B, X, C;
h =(h %360)/60;
C = b * s;
X = C *(1-Math.abs(h %2-1));
R = G = B = b - C;
h =~~h;
R +=[C, X,0,0, X, C][h];
G +=[X, C, C, X,0,0][h];
B +=[0,0, X, C, C, X][h];return{
r:Math.round(R*255),
g:Math.round(G*255),
b:Math.round(B*255),
a: a||this.value.a
};},
toHex:function(h, s, b, a){var rgb =this.toRGB(h, s, b, a);return'#'+((1<<24)|(parseInt(rgb.r)<<16)|(parseInt(rgb.g)<<8)| parseInt(rgb.b)).toString(16).substr(1);},
toHSL:function(h, s, b, a){if(!h){
h =this.value.h;
s =this.value.s;
b =this.value.b;}var H = h,
L =(2- s)* b,
S = s * b;if(L >0&& L <=1){
S /= L;}else{
S /=2- L;}
L /=2;if(S >1){
S =1;}return{
h: H,
s: S,
l: L,
a: a||this.value.a
};}};
Я создал функцию, которая использует удобочитаемые базовые функции и не использует регулярные выражения.
Функция принимает цвет в шестнадцатеричном, rgb или rgba CSS-формате и возвращает шестнадцатеричное представление.
РЕДАКТИРОВАТЬ: была ошибка при разборе формата rgba (), исправлено ...
function getHexColor( color ){//if color is already in hex, just return it...if( color.indexOf('#')!=-1)return color;//leave only "R,G,B" :
color = color
.replace("rgba","")//must go BEFORE rgb replace.replace("rgb","").replace("(","").replace(")","");
color = color.split(",");// get Array["R","G","B"]// 0) add leading #// 1) add leading zero, so we get 0XY or 0X// 2) append leading zero with parsed out int value of R/G/B// converted to HEX string representation// 3) slice out 2 last chars (get last 2 chars) => // => we get XY from 0XY and 0X stays the samereturn"#"+('0'+ parseInt(color[0],10).toString(16)).slice(-2)+('0'+ parseInt(color[1],10).toString(16)).slice(-2)+('0'+ parseInt(color[2],10).toString(16)).slice(-2);}
Не работает на rgba (0,0,0,0). Во-первых: порядок должен измениться. .replace("rgba", "") .replace("rgb", "") .replace("(", "") .replace(")", "");В противном случае вы получите a0,0,0,0. И он возвращает # 000000, который является черным, а не прозрачным.
Двенадцать24
Если 4-е значение в rgba равно 0 (нулю), то для css для этого «элемента» будет: element {color: # 000000, opacity: 0.0;}, который является прозрачным или просто условно возвращает 'rgba (0,0 0,0) вернуться к звонящему.
Двенадцать24
@ Twelve24 Исправлен синтаксический анализ - я действительно заметил, что перед прочтением вашего комментария, но определенно спасибо за это :), Что касается прозрачности - функция должна возвращать цвет HEXA или "базовый цвет" - так, чтобы он был нарочно :)
jave.web
3
Пытаться
// c - color str e.g."rgb(12,233,43)", result color hex e.g. "#0ce92b"let rgb2hex= c=>'#'+c.match(/\d+/g).map(x=>(+x).toString(16).padStart(2,0)).join``
// rgb - color str e.g."rgb(12,233,43)", result color hex e.g. "#0ce92b"let rgb2hex= c=>'#'+c.match(/\d+/g).map(x=>(+x).toString(16).padStart(2,0)).join``
console.log(rgb2hex("rgb(12,233,43"));
var rgb = $('#selector').css('backgroundColor').match(/\d+/g);var r = parseInt(rgb[0],10);var g = parseInt(rgb[1],10);var b = parseInt(rgb[2],10);var hex ='#'+ r.toString(16)+ g.toString(16)+ b.toString(16);
более лаконичная строчка:
var rgb = $('#selector').css('backgroundColor').match(/\d+/g);var hex ='#'+Number(rgb[0]).toString(16)+Number(rgb[1]).toString(16)+Number(rgb[2]).toString(16);
var rgb = document.querySelector('#selector').style['background-color'];return'#'+ rgb.substr(4, rgb.indexOf(')')-4).split(',').map((color)=>String("0"+ parseInt(color).toString(16)).slice(-2)).join('');
Поскольку вышеприведенные функции parse int обрезают начальные нули, таким образом выдают неправильные цветовые коды из 5 или 4 букв, которые могут быть ... т.е. для rgb (216, 160, 10) он выдает # d8a0a, тогда как он должен быть # d8a00a.
В более старых версиях IE выбор значения цвета объекта с использованием jquery иногда может возвращать hex вместо rgb, в то время как большинство современных браузеров возвращают RGB. Связанный с функцией обрабатывает оба варианта использования
Пол Т
1
Ответ Стивена Прибилинского отбрасывает ведущие нули, например # ff0000 становится # ff00.
Решение состоит в том, чтобы добавить начальный 0 и подстроку из последних 2 цифр.
var rgb = $('#selector').css('backgroundColor').match(/\d+/g);var hex ='#'+String('0'+Number(rgb[0]).toString(16)).slice(-2)+String('0'+Number(rgb[1]).toString(16)).slice(-2)+String('0'+Number(rgb[2]).toString(16)).slice(-2);
Ответы:
( Источник )
источник
rgb.match(/^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i)
однако данное регулярное выражение предназначено для того, чтобы справляться с форматом, заданным браузером при использовании jQuery, и у него нет различий между пробелами и опознавательными знаками Вы говорите о. Вы также можете использовать то же регулярное выражение и просто удалить все пробелы и преобразовать в нижний регистр перед сопоставлением на rgb. PS Ваш пример с скрипкой: 'rgb (10, 128,)' Я не думаю, что это разумно для тестированияВот более чистое решение, которое я написал на основе предложения @Matt:
Некоторые браузеры уже возвращают цвета в шестнадцатеричном формате (начиная с Internet Explorer 8 и ниже). Если вам нужно разобраться с этими случаями, просто добавьте условие внутри функции, как предложено @gfrobenius:
Если вы используете jQuery и хотите более полный подход, вы можете использовать CSS-хуки, доступные с jQuery 1.4.3, как я показал, отвечая на этот вопрос: могу ли я принудительно вернуть jQuery.css ("backgroundColor") в шестнадцатеричном формате?
источник
document.getElementById("your_id").currentStyle["backgroundColor"]
. Функцияrgb2hex()
не нужна. Вот плагин jQuery с использованием CSS-хуков, которые я предложил выше, который уже выполняет все проверки для восстановления цветов в разных браузерах: stackoverflow.com/questions/6177454/…$('#selector').css('backgroundColor')
в гекс, а не значение rgb в гекс. И на IE8,$('#selector').css('backgroundColor')
уже шестнадцатеричный, поэтому он должен быть обработан. Вот и все. Не сердитесь на меня :)rgb2hex()
функцию, спасибо @ErickPetru! Я должен написать код обратно в IE7, хотите верьте, хотите нет. С.css('backgroundColor')
и родныеobj.style.backgroundColor
IE7 & 8 будут возвращать hex, а не RGB, поэтому я добавил это в качестве первой строкиrgb2hex()
функции в поставляемом ответе, чтобы она работала вплоть до IE7:/* IE7&8 will return hex, so no need to run this function if it is already hex. */
if (/^#[0-9A-F]{6}$/i.test(rgb)) return rgb.substring(1, 7); //I'm doing a subtring here because I do not want the leading # symbol
надеюсь, это поможет.Большинство браузеров, похоже, возвращают значение RGB при использовании:
Только IE (пока протестировано только 6) возвращает значение Hex.
Чтобы избежать сообщений об ошибках в IE, вы можете заключить функцию в оператор if:
источник
Обновлен @ErickPetru для совместимости с rgba:
Я обновил регулярное выражение для соответствия альфа-значению, если оно определено, но не использую его.
источник
return hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]) /* Add the alpha channel if it exists */ + (rgb[5] !== undefined ? hex(Math.round(rgb[5] * 255)) : '');
Также я удаляю#
символ, чтобы сделать его независимым от конечного использования (можно получить вывод и,0x
например, добавить к нему префикс или оставить его без префикса). Надеюсь, это поможет кому-то!Вот один лайнер ES6, который не использует jQuery:
источник
Вот версия, которая также проверяет прозрачность, я нуждался в этом, поскольку мой объект должен был вставить результат в атрибут стиля, где прозрачная версия шестнадцатеричного цвета на самом деле является словом «прозрачный» ..
источник
Функция, которая возвращает цвет фона элемента в шестнадцатеричном виде.
пример использования:
jsfiddle
источник
Тот же ответ, что и у @Jim F, но с синтаксисом ES6 , поэтому меньше инструкций:
источник
цветовой класс, взятый из палитры начальной загрузки
как пользоваться
источник
Читаемый && Reg-exp бесплатно (без Reg-exp)
Я создал функцию, которая использует удобочитаемые базовые функции и не использует регулярные выражения.
Функция принимает цвет в шестнадцатеричном, rgb или rgba CSS-формате и возвращает шестнадцатеричное представление.
РЕДАКТИРОВАТЬ: была ошибка при разборе формата rgba (), исправлено ...
источник
.replace("rgba", "") .replace("rgb", "") .replace("(", "") .replace(")", "");
В противном случае вы получите a0,0,0,0. И он возвращает # 000000, который является черным, а не прозрачным.Пытаться
Показать фрагмент кода
источник
Этот выглядит немного лучше:
более лаконичная строчка:
заставляя jQuery всегда возвращать hex:
источник
Просто чтобы добавить ответ @ Джастина выше ..
так должно быть
Поскольку вышеприведенные функции parse int обрезают начальные нули, таким образом выдают неправильные цветовые коды из 5 или 4 букв, которые могут быть ... т.е. для rgb (216, 160, 10) он выдает # d8a0a, тогда как он должен быть # d8a00a.
Спасибо
источник
Вот решение, которое я нашел, которое не выдает ошибки скриптинга в IE: http://haacked.com/archive/2009/12/29/convert-rgb-to-hex.aspx
источник
Ответ Стивена Прибилинского отбрасывает ведущие нули, например # ff0000 становится # ff00.
Решение состоит в том, чтобы добавить начальный 0 и подстроку из последних 2 цифр.
источник
Поскольку вопрос касался использования JQuery, вот плагин JQuery, основанный на коде Дэниела Эллиотта:
Используйте это как:
источник
Здесь мое решение, также делает touppercase с помощью аргумента и проверяет другие возможные пробелы и заглавные буквы в предоставленной строке.
На jsfiddle
Сравнение скорости на jsperf
Дальнейшее улучшение может быть
trim()
вrgb
строкуисточник
Мое красивое нестандартное решение
HTML
JQuery
результат
источник