BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] RGBから16進数、16進数からRGB

2022-03-14 01:23:29

質問

RGB形式の色をHex形式に変換する方法と、その逆を行う方法を教えてください。

例えば、以下のように変換します。 '#0080C0' を (0, 128, 192) .

解決方法は？

注意事項 の両方のバージョンがあります。 rgbToHex には整数を指定します。 r , g と b ということで、整数以外の値がある場合は、自分で丸める必要があります。

以下は、RGBから16進への変換を行い、必要なゼロパディングを追加するものです。 

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() で説明したように カサブランカさんの回答 と、@cwolves さんのコメントで提案されています。 

function rgbToHex(r, g, b) {
  return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}

alert(rgbToHex(0, 51, 255)); // #0033ff

2012年12月3日更新

以下は hexToRgb() のような16進数の省略形もパースします。 

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

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します