質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.48%

  • JavaScript

    17034questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

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

解決済

回答 5

投稿

  • 評価
  • クリップ 1
  • VIEW 3,152

re97

score 195

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

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


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

#FF800F
・16進数の文字列?

FF800F
・16進数

0×FF800F
・16進数?

16744463
・RGB int
・何進数?

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 5

+5

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

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

理解しているとして、

  • RGB(255,128,15) 

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

  • RGB(FF,80,0F) 

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

  • FF800F

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

  • 16744463

になります。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/04/26 11:15

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

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

    キャンセル

+3

>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進数と考えるのが一般的です。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/04/26 11:12

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

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

    キャンセル

checkベストアンサー

+1

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

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

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

それぞれの色の明るさを、0~255(8ビットの2進数で表現できる範囲)で表すとして、上から8ビットずつを赤、緑、青の明るさを表すのに使うことにすると、24ビットの2進数で色を表すことができます。

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

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

RGB(255,128,15)を24ビット2進数で表現したものを、16進数で表せば FF800F 、10進数で表せば 16744463 となります。

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/04/26 11:11 編集

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

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

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

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

    キャンセル

+1

 String 型と Number 型

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

 コードリーディング

本題の 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 さん

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/04/26 11:14

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

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

    キャンセル

+1

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

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 が等しくなることもありません。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/04/26 11:19

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

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

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

    ・参考になりました

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.48%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    17034questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。