Преобразовать RGB в HEX формат цвета на jQuery

В последнее время стало популярным использование input-ов из html5. Одним из них является поле цвета (type="color"). Он работает с HEX форматом цвета (например: #000000) и это очень удобно.

Но недавно столкнулся с такой проблемой. Мне нужно было получить цвет элемента с помощью jQuery и подставить его в input с цветом. Но метод .css() возвращает цвет только в формате RGB. Поэтому пришлось поломать голову, как быстро преобразовать RGB в HEX.

Чтобы лучше понять, как это должно работать - составим такой пример:

<div class="colorss">
<div style="color: green">Зеленый</div>
<div style="color: blue">Голубой</div>
<div style="color: yellow">Желтый</div><br>
<input type="color">
</div>

<script>
$('.colorss div').on('click', function(){
$('.colorss input').val($(this).css('color'));
alert($(this).css('color'));
});
</script>

Здесь при клике на цвета input берет их значения и подставляет в свой value. В идеале цвет в поле должен копироваться, но этого не происходит, так как нам нуже HEX формат. А с .css() метода передается RGB - его мы видим при каждом alert-e, что говорит о том, что скрипт работает правильно.

Используем в примере функцию преобразования RGB в HEX:

<script>
function rgb_to_hex(color){
var rgb = color.replace(/\s/g,'').match(/^rgba?\((\d+),(\d+),(\d+)/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) : color;
}

$('.colorss div').on('click', function(){
if($(this).css('color').length != 0) { //если атрибут цвета существует
$('.colorss input').val(rgb_to_hex($(this).css('color')));
}
});
</script>

Так как html составляющая остается неизменной, я ее пропустил. В коде скрипта добавилась функция rgb_to_hex(), которая и принимает из .css() RGB цвет и преобразует его в HEX формат. За счет этого input сразу изменяет свой цвет при клике на соответствующий div.

Примеры использования функции:
alert(rgb_to_hex('rgb(0, 34, 34)')); // #002222
alert(rgb_to_hex('rgba(7, 72, 169, 0.59)')); // #0748a9

Стоит сказать, что если в rgb формате есть 4-й параметр (прозрачность) - он игнорируется этой функцией без ошибки.

На заметку. В PHP можно сделать обратное преобразование так:

$hex_color = "#ffffff";
list($r, $g, $b) = sscanf($hex_color, "#%2x%2x%2x");
echo 'rgb(', $r, ',' , $g, ',' , $b, ')';

На выходе мы получим значение: rgb(255,255,255); при условии, что $hex_color будет записан полным форматом (#ffffff, а не #fff).