RGB int って何？ RGB はintに変換できる？ それは何進数？

Question

このページは、何をやっているのでしょうか？

・RGB はintに変換できるのでしょうか？

---

RGB(255,128,15)
・10進数

#FF800F
・16進数の文字列？

FF800F
・16進数

0×FF800F
・16進数？

16744463
・RGB int
・何進数？

Answer 1

何進数と言われると十進数ですね。

RGBが、赤／緑／青それぞれの要素の度合いを0 〜 255 の範囲で示すことで、色を指定しているのは理解していますか。

理解しているとして、

• RGB(255,128,15)

に対してそれぞれを16進数表記することで

• RGB(FF,80,0F)

になります。
これを RGB の順に並んでいることを前提として16進数6桁の数値にすることで

• FF800F

になります。
これを逆に十進数にもどすと

• 16744463

になります。

Comments

[re97]

・回答ありがとうございました

＞RGBが、赤／緑／青それぞれの要素の度合いを0 〜 255 の範囲で示すことで、色を指定しているのは理解していますか
・初めて知りました
・参考になりました

Answer 2

＞RGB(255,128,15)
＞・10進数

カッコの中の数値はそれぞれ10進数ですね

＞#FF800F
＞・16進数の文字列？

文字列というよりは多分(話しの流れからも)16進数表記された「カラーコード」ですね。

＞FF800F
＞・16進数

恐らく16進数ですが通常16進数は頭に0xが付くとか&Hが付くとか末尾にHが付くとか
それが扱われる言語（場面）によって表記方法があります。
前後に何も付着せずに16進数だけで16進数を表現するという場合はそれが16進数である
事が前提である事を示すようなルールや解説がどこかに存在していると思います。

＞0×FF800F
＞・16進数？

16進数ですね。

＞16744463
＞・RGB int
＞・何進数？

明示的な進数指定のない0-9で構成された数字の羅列は10進数と考えるのが一般的です。

Comments

[re97]

・回答ありがとうございました

＞カッコの中の数値はそれぞれ10進数
・参考になりました

Answer 3

あえてすべての質問には答えませんが、すべてを理解できる説明に挑戦します。

CSSのカラーコードは16進数が元になっていますが、数値ではありません。
頭の#はカラーコードであるという目印です。数値であるという目印ではありません。

証拠に、#ffと書いても#0000ffという意味にはなりません。もしただの16進数ならこれは同じはずです。

しかも #fff と #ffffff は同じというルールまであります。もしただの16進数ならぜんぜん大きさの違う数です。

ではなぜ16進数が元になっているかというと、色は内部的には数値だからです。

画面上の色はRGB各8ビットずつ、合計24ビットで表現します。
たとえば rgb(0, 255, 0) は 000000001111111100000000 です。

境界がないので、これは3つの数値ではなく、2進数で表現された1つの数値 (int) として見ることができます。

素直に使い慣れた10進数で表します。

「65280」

なんとも中途半端な数です。この数字を見て、ぱっと緑 rgb(0, 255, 0) だと分かる人がいたら、たぶん病気です。

この数は16進数で表現するとすっきりとした数になります。
おわかりだと思いますが、 00FF00 となります。もう緑にしか見えません。その辺の野良犬でも緑と叫びます。

実は2進数と16進数はかなり相性がいいです。
2進数の時に4桁で表現できる範囲が、16進数の時にピッタリ1桁に収まるという関係にあります。

RGBの各8ビットも当然、ピッタリ2桁で表せます。

ところで、 11 って何でしょう。十一ですか？
でも、2進数の三かもしれません。
16進数の十七の可能性もあります。
100,000,000 進数の一億一の可能性も（文字の種類が足りない

「11」だけでも書いた人が16進数だと言い張れば16進数です。

でもだれもわかってくれないと意味が無い（とくにコンピューターが解釈できないと）なので、ルールが有ります。
「16進数を書くとき、それが16進数であるという目印のために、前に0xを付ける」というものです。
多くのプログラム言語で、17 === 0x11を比較するとtrueを返します。(全く同じ意味であるということ)

16進数の前に0xをつけたもの。
これは、「16進数で表した"大きさの情報"」と、「それが"16進数である"という情報」をセットにした、「16進数の数値リテラル」というものです。
これは色コードとは違い、完全に数値を表しています。
0xff は 0x0000ff と同じですし、 0xfff と 0xffffff が等しくなることもありません。

Comments

[re97]

回答ありがとうございました

＞#ffと書いても#0000ffという意味にはなりません。もしただの16進数ならこれは同じはずです。
＞しかも #fff と #ffffff は同じというルールまであります。もしただの16進数ならぜんぜん大きさの違う数です。
・この説明を読んで、なるほどと思いました

＞色は内部的には数値だからです。
＞画面上の色はRGB各8ビットずつ、合計24ビットで表現します。
＞たとえば rgb(0, 255, 0) は 000000001111111100000000 です
・この説明が分かりやすかったです

・参考になりました

Answer 4

String 型と Number 型

JavaScript 前提の話だと思うのですが、「#FF800F === 16進数の文字列」とするなら String 型と Number 型を区別した説明になります。
従って、RGB(255,12,15) は10進数ではなく、「10進数で表したRGBの String 値(CSS Color Module Level 3 規定)」になります。
細かい事のようですが、「これは10進数」「あれは16進数」のような固定観念を作るとなかなか抜け出せないので、始めにしっかりと用語理解に努める事をお勧めします。

• 4.2. 数値の色の値 - CSS3色モジュール

コードリーディング

本題の RGB int についてはコードを読んでみてください。

{
var red=parseInt(this.form.red.value)     // 赤の10進数値を Number 型に変換
var green=parseInt(this.form.green.value) // 緑の10進数値を Number 型に変換
var blue=parseInt(this.form.blue.value)   // 青の10進数値を Number 型に変換
this.form.rgbint.value=256*256*red+256*green+blue           // 16進数のカラーコード文字列を10進数に奇数変換した数値
this.form.rgbhex.value=tohex(red)+tohex(green)+tohex(blue)  // 16進数のカラーコード文字列
document.bgColor=tohex(red)+tohex(green)+tohex(blue)

function tohex (n) {
   var retval='';
   if (n<=0) {
      retval='00';
      return retval;
   }
   var nt=n;
   while (n>0) {
      var m=n;
      n=m>>4;
      m=m%16;
      var string='';
      if (m<10) string=''+m; else {
         switch (m) {
            case 10:
            default:
               string='A'
            break;
            
            case 11:
               string='B'
            break;
            
            case 12:
               string='C'
            break;
            
            case 13:
               string='D'
            break;
            
            case 14:
               string='E'
            break;
            
            case 15:
               string='F'
            break;
         }
      }
      retval=string+retval;
   }
   if (nt<16) retval='0'+retval;
   return retval;
}
}

10進数と16進数

#ff800f はビット列を16進数にしたものですが、0xff800f (16進数表記)を10進数表記に奇数変換すると 16744463 になります。

'use strict';
var red = 255, green = 128, blue = 15;
var rgb = red * 256 * 256 + green * 256 + blue;

/**
 * Number.prototype.toString は第一引数で与えられた基数に奇数変換します。
 */
console.log('RGB(' + [red, green, blue] + ')'); // "RGB(255,128,15)" (String 型)
console.log(rgb.toString(16));       // "ff800f" (16進数の String 型)
console.log('#' + rgb.toString(16)); // "#ff800f" (16進数の String 型)
console.log(rgb);                    // 16744463 (Number 型)
console.log(0xff800f);               // 16744463 (Number 型)

Re: re97 さん

Comments

[re97]

・回答ありがとうございました

＞RGB(255,12,15) は10進数ではなく、「10進数で表したRGBの String 値(CSS Color Module Level 3 規定)」になります
・大変参考になりました

Answer 5

RGBは光の色の三原色である、赤、緑、青、それぞれの明るさの組で色を表現する形式です。

デジカメの画像や、地デジテレビの画像などでは、三原色の明るさが整数で表現されます。

質問にある 「RGB(255,128,15) 」は、赤、緑、青の明るさが、それぞれ255,128,15である色を表現しています。（「３つの１０進数の組で赤、緑、青の明るさを表現した形式」であって、「１０進数」ではありません）

それぞれの色の明るさを、０～２５５（８ビットの２進数で表現できる範囲）で表すとして、上から８ビットずつを赤、緑、青の明るさを表すのに使うことにすると、２４ビットの２進数で色を表すことができます。

このように、１つの整数(Integer)値でRGB３色の明るさの値（一つの色）を表現する形式が一般的にRGB Int と呼ばれます。
昔にパソコン(PC-8001等）の画面は、３ビットRGB Int(RGBがそれぞれ１ビット)で、８色が使えました。
現在の多くのデジカメや地デジテレビで使われているのは、２４ビットRGB Intで、約１６００万色が表現できます。

質問の２つ目以降の表現は、次のように成っています。

RGB(255,128,15)を２４ビット２進数で表現したものを、１６進数で表せば FF800F 、１０進数で表せば 16744463 となります。

"#" は、number signと呼ばれる記号で、数値であることを意味します。
0xは、javaなどのプログラミング言語で、１６進数の値が後に続くことを意味します。

最後に、「・RGB はintに変換できるのでしょうか？」に対する答えですが、
intをデータの表現形式（ビットの並び）と考えるのであれば、上で説明したように変換できます（対応付けが可能です）。
intを数学的な整数と考えるのであれば、RGBの値を表現することは不可能です。16744463の７は、７０万という数字を表しているのであって、RGBを構成する数値の一部を表現している訳ではありません。

このあたりの区別をあいまいにすると、「RGB Intで表現された値に２を掛ければ、明るさが２倍になるだろう」というような理解不能なコードを生むことになります。

Comments

[re97]

・回答ありがとうございました

＞昔にパソコン(PC-8001等）の画面は、３ビットRGB Int(RGBがそれぞれ１ビット)で、８色が使えました
・「３ビットRGB Int」を初めて知りましたが、この例えが大変分かりやすかったです

＞上から８ビットずつを赤、緑、青の明るさを表すのに使うことにすると、２４ビットの２進数で色を表すことができます
・これを読んで、２４ビットってそういう意味だったんだ、と初めて理解できました

＞１つの整数(Integer)値でRGB３色の明るさの値（一つの色）を表現する形式が一般的にRGB Int と呼ばれます
・大変参考になりました