Примечание : обе версии 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";
<<
оператор сдвига влево. Предполагается,g
что это ненулевое целое число,g << 8
поэтому эффективно умножаетсяg
на 256, добавляя нули к концу его шестнадцатеричного представления. Аналогичноr << 16
добавляет 4 ноля. Добавление1 << 24
(1000000 в шестнадцатеричном формате) гарантирует, что шестнадцатеричное представление будет дополнено левыми полями любыми необходимыми нулями после1
удаления начального значения с помощьюslice()
. Например, если быr
иg
были и ноль, иb
было 51,((r << 16) + (g << 8) + b).toString(16)
вернул бы строку «33»; добавь1 << 24
и получишь "1000033". Тогда раздень1
и ты там.(r << 16)
) давать одинаковые результаты как на больших, так и на младших порядковых компьютерах? Редактировать: это не так. Вот почему: stackoverflow.com/questions/1041554/…rgbToHex
функции. Кто-то захочет либо типизировать переданные вами значения rgb в виде целых чисел, либо немного изменить функцию rgbToHex. Пример: jsfiddle.net/cydqo6wj Current:return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
Modified:return "#" + ((1 << 24) + ((+r) << 16) + ((+g) << 8) + (+b)).toString(16).slice(1);
В модифицированной версии я просто заставляю значения rgb вычисляться в целых числах до перехода на 16 / hex.Альтернативная версия hexToRgb:
Редактировать: 28.03.2017 Вот еще один подход
это кажется еще быстрееРедактировать: 8/11/2017 Новый подход выше после дополнительного тестирования не быстрее :(. Хотя это забавный альтернативный способ.
источник
return [r, g, b].join();
.return [(bigint = parseInt(hex, 16)) >> 16 & 255, bigint >> 8 & 255, bigint & 255].join();
#
) доparseInt
:hex = hex.replace(/[^0-9A-F]/gi, '');
ECMAScript 6 версия ответа Тима Дауна
Преобразование RGB в гекс
Преобразование гекса в RGB
Возвращает массив
[r, g, b]
. Работает также с сокращенными шестнадцатеричными тройками, такими как"#03F"
.Бонус: RGB в гекс, используя
padStart()
методОбратите внимание, что в этом ответе используются новейшие функции ECMAScript, которые не поддерживаются в старых браузерах. Если вы хотите, чтобы этот код работал во всех средах, вы должны использовать Babel для компиляции вашего кода.
источник
.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(m, r, g, b) => '#' + r + r + g + g + b + b)
становится:.replace(/^#?([a-f\d])([a-f\d])([a-f\d])([a-f\d])$/i,(m, r, g, b, a) => '#' + r + r + g + g + b + b + a + a)
Но есть ли способ заставить регулярное выражение работать с A RGBA в качестве необязательного 4-го шестнадцатеричного значения? Это полностью дополнило бы функциональность, заставив одно регулярное выражение работать с шестнадцатеричным RGB и RGBA. В противном случае это два регулярных выражения, одно с 3 значениями, другое с 4. Вы должны разделить 4-е значение на 255, чтобы получить 4-й аргумент для rgba ().Вот моя версия:
источник
rgb2hex
метода. Почему мы добавим0x1000000
кrgb
, и почему мы должны вызвать.slice(1)
в последний раз ?Я предполагаю , что вы имеете в виду HTML-стиль шестнадцатеричного т.е.
#rrggbb
. Ваш код почти правильный, за исключением того, что вы изменили заказ. Должен быть:Кроме того, использование битовых сдвигов может немного облегчить чтение:
источник
var decColor = (red < 16 ? '0' : '') + (red << 16) + (green << 8) + blue;
red < 16
вам нужно добавить префикс a0
к конечному результату.var hexColor = ((1 << 24) + (red << 16) + (green << 8) + blue).toString(16).substr(1);
источник
r
,g
,b
:function hex2rgb(hex){return{r:'0x'+hex[1]+hex[2]|0,g:'0x'+hex[3]+hex[4]|0,b:'0x'+hex[5]+hex[6]|0}}
Этот код принимает варианты #fff и #ffffff и непрозрачность.
источник
Однострочный функционал от HEX до RGBA
Поддерживает как короткие, так
#fff
и длинные#ffffff
формы.Поддерживает альфа-канал (непрозрачность).
Не заботится, указан хэш или нет, работает в обоих случаях.
Примеры:
источник
Это может быть использовано для получения цветов из вычисленных свойств стиля:
Ссылка: https://github.com/k-gun/so/blob/master/so_util.js
источник
(r.length == 1 ? "0" + r : r)
и аналогично для зеленого и синего.Побитовое решение обычно странно. Но в этом случае я думаю, что это более элегантно 😄
Применение:
источник
// Игнорируя запись hsl, значения цвета обычно выражаются в виде имен, rgb, rgba или hex-
// Hex может быть 3 значения или 6.
// Rgb может быть процентами, а также целочисленными значениями.
// Лучше всего учитывать все эти форматы, по крайней мере.
источник
@ Тим, чтобы добавить к своему ответу (это немного неудобно вписывать это в комментарий).
Как написано, я обнаружил, что функция rgbToHex возвращает строку с элементами после точки и требует, чтобы значения r, g, b находились в диапазоне 0-255.
Я уверен, что большинству это может показаться очевидным, но мне понадобилось два часа, чтобы понять, и к тому времени оригинальный метод увеличился до 7 строк, прежде чем я понял, что моя проблема в другом месте. Таким образом, в интересах экономии времени и хлопот, вот мой слегка исправленный код, который проверяет предварительные условия и удаляет посторонние фрагменты строки.
источник
(2017) SIMPLE ES6 комбинируемые функции стрелок
Я не могу не поделиться этим для тех, кто может писать некоторые современные функциональные / композиционные Js с использованием ES6. Вот несколько простых строк, которые я использую в цветовом модуле, который выполняет интерполяцию цвета для визуализации данных.
Обратите внимание, что это не обрабатывает альфа-канал вообще.
источник
Пытаться
Показать фрагмент кода
источник
Если вам нужно сравнить два цветовых значения (заданные как RGB, имя цвета или шестнадцатеричное значение) или преобразовать в HEX, используйте объект холста HTML5.
источник
Можете ли вы после чего-то вроде этого?
отображает # 9687c8
источник
Для 3 цифр hexToRgb функция Tim Down может быть улучшена, как показано ниже:
источник
Я столкнулся с этой проблемой, поскольку хотел принять любое значение цвета и иметь возможность добавить непрозрачность, поэтому я создал этот быстрый плагин jQuery, который использует собственный холст в современных браузерах. Кажется, работает просто замечательно.
редактировать
Оказывается, я не могу понять, как сделать его правильным плагином jQuery, поэтому я просто представлю его как обычную функцию.
источник
Мне нужна была функция, которая принимает недопустимые значения, такие как
RGB (-255, 255, 255) RGB (510, 255, 255)
это ответ @cwolves
источник
Используйте эти функции для достижения результата без каких-либо проблем. :)
источник
Сокращенная версия, которая принимает строку:
Чтобы проверить, не является ли он уже шестнадцатеричным
источник
Хотя этот ответ вряд ли идеально подходит к вопросу, тем не менее он может быть очень полезным.
var toRgb = document.createElement('div');
toRg.style.color = "hsl(120, 60%, 70%)";
> toRgb.style.color;
< "rgb(133, 225, 133)"
Ваш цвет был преобразован в RgbРаботает для: Hsl, Hex
Не работает для: именованных цветов
источник
Моя версия hex2rbg:
String.replace, String.split, String.match
т.д ..вам может понадобиться удалить hex.trim (), если вы используете IE8.
например
код:
источник
h.join(',')
это то же самое, что иh.join()
.Этот фрагмент преобразует гекс в rgb и rgb в гекс.
Посмотреть демо
источник
Я работаю с данными XAML, которые имеют шестнадцатеричный формат #AARRGGBB (альфа, красный, зеленый, синий). Используя ответы выше, вот мое решение:
http://jsfiddle.net/kvLyscs3/
источник
Для конвертации напрямую из jQuery вы можете попробовать:
источник
источник
Учитывая большое количество ответов, ответьте на вопрос только частично (от RGB до HEX или наоборот), я решил опубликовать свой частичный ответ.
У меня была похожая проблема, и я хотел сделать что-то вроде этого: ввести любой допустимый цвет CSS (HSL (a), RGB (a), HEX или имя цвета) и 1. иметь возможность добавлять или удалять альфа-значение, 2. вернуть объект rgb (a). Я написал плагин именно для этой цели. Его можно найти на GitHub (для этого требуется jQuery, но при желании вы можете его разветвить и сделать ванильную версию). Вот демонстрационная страница . Вы можете попробовать для себя и увидеть результат, полученный на лету.
Я скопирую и вставлю варианты здесь:
RGB Generator принимает один аргумент, цвет и предоставляет три параметра: asObject, addAlpha и removeAlpha. Когда три параметра опущены, цвет RGB будет возвращен в виде строки.
Обратите внимание, что по умолчанию альфа-компоненты включены. Если входное значение содержит альфа-значение, вывод будет в формате RGBa.
Вы можете отключить это поведение, установив для параметра removeAlpha значение true. Это удалит любое альфа-значение из исходного цвета HSLa или RGBa.
Если, с другой стороны, вы хотите добавить альфа-канал, вы можете сделать это, установив addAlpha в любое значение от 0 до 1. Когда входной сигнал имеет непрозрачный цвет, альфа-значение будет добавлено. Если он прозрачный, предоставленное значение перезапишет альфа-компонент ввода.
Наконец, также возможно вывести цвет RGB (a) как объект. Он будет состоять из r, g, b и, необязательно, a.
источник
Лучший ответ от Tim Down обеспечивает лучшее решение, которое я вижу для преобразования в RGB. Мне больше нравится это решение для шестнадцатеричного преобразования, потому что оно обеспечивает самую краткую проверку границ и заполнение нулями для преобразования в шестнадцатеричное.
Использование сдвига влево «<<» и или «|» операторы тоже делают это забавным решением.
источник
Я нашел это, и потому что я думаю, что это довольно просто и имеет проверочные тесты и поддерживает альфа-значения (необязательно), это будет соответствовать случаю.
Просто закомментируйте строку регулярного выражения, если вы знаете, что делаете, и это немного быстрее.
источник