BETA

RGB値だけでは色は1つに定まらない

投稿日:2018-12-23
最終更新:2019-01-03
※この記事は外部サイト(https://qiita.com/mishimay/items/e1e2f5360...)からのクロス投稿です

TL;DR

色を一意に決めるにはRGB値RGB色空間<sup>1</sup>の両方の指定が必要。

RGB色空間とは

テレビやスマホのディスプレイは人間が見ることのできるすべての色を表現することはできません。
人間が見ることのできるすべての色のうち、特定の範囲に限定されたRGB色空間がいくつも定義されています (e.g. sRGB, Adobe RGB, Display P3)。
RGB色空間の定義は例えばディスプレイの性能を表す際に使われます。

iPhone SE - 技術仕様
ディスプレイ
フルsRGB規格
https://support.apple.com/kb/SP738?viewlocale=ja_JP&locale=ko_KR

以下のような図<sup>2</sup>をCIE色度図と言い、色の塗られている範囲が人が見ることのできるすべての色の範囲を表しています。
三角形で表された範囲がさまざまに定義されたRGB色空間です。

RGB値(カラーコード)とは

RGB値とは、それぞれのRGB色空間の中における特定の色が(赤, 緑, 青)の要素をどれだけ含んでいるかを表したものです。
通常各要素は0から255の範囲で記述されると思います。
ここで注意が必要なのは、同じRGB値でもRGB色空間が違えば違う色を指すということです。
CIE色度図を見ると、例えば三角形の上側の頂点が (R:0, G:255, B:0) を指しますが、RGB色空間によってその値が示す緑色が大きく違っていることが分かります。

Digital Color Meterで実験

macOSには標準で Digital Color Meter というアプリケーションが入っています。
これを使うと画面上に表示されている色を調べられるのですが、このとき各種RGB色空間とそのRGB値が何であるか見ることができます。

<img width="374" alt="Screen Shot 2018-12-23 at 14.57.09.png" src="https://qiita-image-store.s3.amazonaws.com/0/23679/4a1370eb-f55a-e46c-6ea9-0b740925ae33.png">
<img width="374" alt="Screen Shot 2018-12-23 at 14.58.41.png" src="https://qiita-image-store.s3.amazonaws.com/0/23679/e263e3e3-94e9-4ed0-0587-6da5721e03b4.png">
<img width="374" alt="Screen Shot 2018-12-23 at 14.57.33.png" src="https://qiita-image-store.s3.amazonaws.com/0/23679/cab21bc4-7690-5821-c3d1-9a8e1217d4aa.png">

同じ色でもRGB色空間によってRGB値が違うことが分かります。

実務における注意点

デザイナーさんからもらったデザイン指示書にRGB値が書かれていた場合、それをそのままコーディングするのではなく、何のRGB色空間かも合わせて確認する必要があります。

また、コーディングする際はRGB値がどのRGB色空間上で指定されるのかを確認する必要があります。
たとえば、iOSのUIColorクラスには init(displayP3Red:green:blue:alpha:) というイニシャライザーがあり<sup>3</sup> Display P3 空間でRGB値を指定したい場合はこちらを使用します。

受け取ったRGB色空間とコーディングの際に使用するRGB色空間が違うときは、RGB値を適宜変換する必要があります。

参考にした書籍

色についての基本的な知識はこちらの本から得ました。
分かりやすく深い知識が得られるのでおすすめです。
色彩心理学入門―ニュートンとゲーテの流れを追って

<br>


<small id="note1">1: 「RGB色空間」という表現は英語版Wikipediaを参考にしました。

sRGB (standard Red Green Blue) is an RGB color space that HP and Microsoft created cooperatively in 1996 to use on monitors, printers, and the Internet.
https://en.wikipedia.org/wiki/SRGB
</small>

<small id="note2">2: https://nikonimglib.com/nvnxi/onlinehelp/ja/nk146000.html
</small>

<small id="note3">3: https://developer.apple.com/documentation/uikit/uicolor/1648568-init
</small>

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@mishimayの技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!