Javascript rgb to hex

Я использую JS-библиотеку TweenMax с ColorPropsPlugin, которая будет отображать значения цвета, указанные во многих форматах, проблема заключается в том, что результат всегда в форме строки:

Как это можно преобразовать в шестнадцатеричное число, например:

Я бы сначала отрезал части CSS:

Затем разделите его на отдельные числа:

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

И склейте его вместе:

Ниже приведена адаптация из класса Colour , который я написал и использовал, но может быть излишним для ваших нужд, поскольку он обрабатывает проценты и отрицательные числа.

Это то, что я сделал.

После запуска ‘rgb(125,181,215)’.toRGB() вы получите значения свойств .r , .g и .b (с правильными целыми значениями) в том же строковом объекте.

Чтобы получить значение hex, просто используйте yourNumber.toString(16);

Теперь запуск h("rgb(255, 60, 60)") вернет #ff3c3c .

Вы можете заменить ‘#’ на ‘0x’ , чтобы получить выходы в форме 0xff3c3c .

EXTRA: как это работает.

h , объявленный как функция стрелки (новый в ES6), принимает значение RGB (строка) и сохраняет его в x . Затем все экземпляры чисел в x найдены с помощью уравнения регулярных выражений /d+/g и используются далее как массив (возвращаемый match , используемый map ).

map обрабатывают все элементы возвращаемого массива с помощью функции y . Функция принимает значение (которое хранилось в массиве как строка), поскольку z преобразует его в число ( +z ), проверяет, меньше ли оно (16), т.е. Шестнадцатеричное представление имеет одна цифра), и если true, добавляет ‘0’ к началу элемента.

Затем он преобразует его в строку базы 16 (hex, by .toString(16) ) и возвращает ее в map . Таким образом, все десятичные строки в массиве теперь меняются на шестнадцатеричные строки.

Наконец, элементы массива соединены вместе ( join(») ), без разделителя и ‘#’ добавляется в начало строки.

Примечание. Если в коде указано значение больше 255, выход будет содержать более шести шестнадцатеричных цифр. Например, вывод для rgb(256, 0, 0) будет #1000000 .

Чтобы ограничить значение до 255, это будет код:

Во фронтенде иногда возникает необходимость конвертации цвета между форматами RGB/RGBA и HEX.

HEX — это сокращение от слова «hexadecimal», которое переводится на русский язык, как «шестнадцатеричный». Число в этом формате может занимать 16 бит (2 байта) памяти и записывается с помощью 16 символов: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, C, D, E, F.

RGB — это сокращение является краткой записью трех названий цветов палитры «red — green — blue» («красный — зеленый — синий»). Стандартный RGB формат может занимать 24 бита (3 байта) памяти. Для его записи используются те же символы, что и у чисел в HEX формате (кроме букв).

Читайте также:  Бесплатная программа для заполнения документов

Приведем примеры готовых функций, которыми вы можете воспользоваться для выполнения перевода цвета из hex в rgb и наоборот.

RGB to HEX

Если значение передаётся отдельными компонентами, то есть в виде трёх чисел:

Более короткое решение с использованием побитового сдвига влево:

Если цвет в функцию будет передаваться в виде строки вида rgba(0, 255, 0, 0.5) :

Причём функция поддерживает цвет и без прозрачности, то есть без указания альфа-компоненты.

HEX to RGB

Значение передаётся в виде строки, например #00ff00 , а результат в виде объекта с тремя компонентами:

Ещё один вариант с использованием побитового сдвига вправо:

Как видно, сделать конвертер rgb в hex совсем несложно.

How to convert colors in RGB format to Hex format and vice versa?

For example, convert ‘#0080C0’ to (0, 128, 192) .

46 Answers 46

Note: both version of rgbToHex expect integer values for r , g and b , so you’ll need to do your own rounding if you have non-integer values.

The following will do to the RGB to hex conversion and add any required zero padding:

Converting the other way:

Finally, an alternative version of rgbToHex() , as discussed in @casablanca’s answer and suggested in the comments by @cwolves:

Update 3 December 2012

Here’s a version of hexToRgb() that also parses a shorthand hex triplet such as "#03F":

An alternative version of hexToRgb:

Edit: 3/28/2017 Here is another approach that seems to be even faster

Edit: 8/11/2017 The new approach above after more testing is not faster :(. Though it is a fun alternate way.

Converting RGB to hex

Converting hex to RGB

Returns an array [r, g, b] . Works also with shorthand hex triplets such as "#03F" .

Bonus: RGB to hex using padStart() method

Note that this answer uses latest ECMAScript features, which are not supported in older browsers. If you want this code to work in all environments, you should use Babel to compile your code.

Here’s my version:

I’m assuming you mean HTML-style hexadecimal notation, i.e. #rrggbb . Your code is almost correct, except you’ve got the order reversed. It should be:

Also, using bit-shifts might make it a bit easier to read:

This code accept #fff and #ffffff variants and opacity.

This could be used for getting colors from computed style propeties:

One-line functional HEX to RGBA

Supports both short #fff and long #ffffff forms.
Supports alpha channel (opacity).
Does not care if hash specified or not, works in both cases.

Читайте также:  Cougar gx f750 обзор

Bitwise solution normally is weird. But in this case I guess that is more elegant 😄

// Ignoring hsl notation, color values are commonly expressed as names, rgb, rgba or hex-

// Hex can be 3 values or 6.

// Rgb can be percentages as well as integer values.

// Best to account for all of these formats, at least.

@ Tim, to add to your answer (its a little awkward fitting this into a comment).

As written, I found the rgbToHex function returns a string with elements after the point and it requires that the r, g, b values fall within the range 0-255.

I’m sure this may seem obvious to most, but it took two hours for me to figure out and by then the original method had ballooned to 7 lines before I realised my problem was elsewhere. So in the interests of saving others time & hassle, here’s my slightly amended code that checks the pre-requisites and trims off the extraneous bits of the string.

(2017) SIMPLE ES6 composable arrow functions

I can’t resist sharing this for those who may be writing some modern functional/compositional js using ES6. Here are some slick one-liners I am using in a color module that does color interpolation for data visualization.

Note that this does not handle the alpha channel at all.

If you need compare two color values (given as RGB, name color or hex value) or convert to HEX use HTML5 canvas object.

May you be after something like this?

For 3 digits hexToRgb function of Tim Down can be improved as below:

I came across this problem since I wanted to accept any color value and be able to add an opacity, so I made this quick jQuery plugin that uses the native canvas on modern browsers. Seems to work just great.

Edit

Turns out I can’t figure out how to make it a proper jQuery plugin, so I’ll just present it as a regular function.

i needed a function that accepts invalid values too like

rgb(-255, 255, 255) rgb(510, 255, 255)

this is a spin off of @cwolves answer

Use these Function to achive the result without any issue. 🙂

Shorthand version that accepts a string:

To check if it’s not already hexadecimal

While this answer is unlikely to fit the question perfectly it may be very useful none the less.

  1. Create any random element

var toRgb = document.createElement(‘div’);

  1. Set any valid style to the color you want to convert
Читайте также:  Реальное фото девушек на аву без лица

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

  1. Call the style property again

Your color has been converted to Rgb

Works for: Hsl, Hex

Does not work for: Named colors

My version of hex2rbg:

  1. Accept short hex like #fff
  2. Algorithm compacity is o(n), should faster than using regex. e.g String.replace, String.split, String.match etc..
  3. Use constant space.
  4. Support rgb and rgba.

you may need remove hex.trim() if you are using IE8.

This snippet converts hex to rgb and rgb to hex.

I’m working with XAML data that has a hex format of #AARRGGBB (Alpha, Red, Green, Blue). Using the answers above, here’s my solution:

For convert directly from jQuery you can try:

Considering a lot of answers only partially answer the question (either from RGB to HEX or the other way around) I thought I’d post my partial answer as well.

I had a similar issue and I wanted to do something like this: input any valid CSS colour (HSL(a), RGB(a), HEX or colour name) and 1. be able to add or remove an alpha value, 2. return an rgb(a) object. I wrote a plugin exactly for this purpose. It can be found on GitHub (it requires jQuery, but if you want you can fork it and make a vanilla version). Here is a demo page. You can try for yourself and see the output generated on the fly.

I’ll copy-paste the options here:

RGB Generator accepts one argument, the colour, and provides three options: asObject, addAlpha and removeAlpha. When the three options are omitted, the RGB colour will be returned as a string.

Note that by default alpha components are included. If the input value contains an alpha value, the output will be in RGBa format.

You can disable this behaviour by setting removeAlpha to true. This will remove any alpha value from an initial HSLa or RGBa colour.

If, on the other hand, you want to add an alpha channel, you can do so by setting addAlpha to any value between 0 and 1. When the input is a non-transparent colour, the alpha value will be added. If it is a transparent one, the provided value will overwrite the alpha component of the input.

Finally it’s also possible to output the RGB(a) colour as an object. It will consist of r, g, b and optionally a.