Вывести данные input type=“color” rgba

Question

input type="color" получаю цвет в hex формате, к примеру, #ffffff. Интересно, а можно ли вывести в rgb, к примеру, 255,255,255, и как это сделать на JS.

Answer 1

Функция, которой пользуюсь уже много лет. Из hex в rgb:

function hexToRgb(hex) {

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

console.log(hexToRgb("#fff"));

Answer 2

Предполагает, что hex строка всегда валидная (а из color input она именно такая):

console.log( toRGB("#ff0000") );
console.log( toRGB("#00ff00") );
console.log( toRGB("#dddddd") );

function toRGB(hex) {      
  return "rgb(" + hex.match(/[^#]./g).map(ff => parseInt(ff, 16)) + ")";
}

[^#] — что угодно кроме решетки, . — еще один любой символ (уже точно не решетка). match выдает массив вида ["ff", "00", "00"], через map элементы превращаются в десятичные числа, а конкатенация массива со строкой - и так расставляет запятые между элементами (вызвав его встроенный метод Array.prototype.toString)

Если хочется обрабатывать вообще любой hex цвет, можно так:

console.log( parse_hex("#ff0000") );   // rgb(255,0,0)
console.log( parse_hex("#00ff00ff") ); // rgba(0,255,0,1)
console.log( parse_hex("#DDD6") );     // rgba(221,221,221,2.5)
console.log( parse_hex("#123") );      // rgb(17,34,51)

console.log( parse_hex("#12") );       // null
console.log( parse_hex("#12345") );    // null
console.log( parse_hex("#1234567") );  // null

function parse_hex(hex) {
  if (!/^#?([a-f\d]{3,4}|[a-f\d]{6}|[a-f\d]{8})$/i.test(hex)) return null;
  // [a-f или цифра] — 3, 4, 6 или 8 штук.
  // С валидацией разобрались, можно больше не думать про это.
  
  hex = hex.replace(/#/, "");
  
  /***/
  if (hex.length < 6) { // abc → aabbcc
    hex = hex.replace(/(.)/g, "$1$1");
  }
  
  var dec = hex.match(/../g).map(function(val) { return parseInt(val, 16) });
  
  /***/
  var type = "rgb";
  
  if (dec.length > 3) {
    type = "rgba";
    dec[3] = Math.round(100 * 255 / dec[3]) / 100;
  }
  
  return type + "(" + dec + ")";
}

.as-console-wrapper { min-height: 100vh !important; }

БЛОГ НА HUSL

Вывести данные input type=“color” rgba

Ответы (2 шт):