コンピュータの画面上に表示される色は、赤・緑・青の三原色の明るさで表される。それぞれ256段階で計16777216色の24ビットカラー方式が一般的だ。
色を数値で表したカラーコードを知っていれば、ソフトの配色変更画面や画像編集ソフトの描画色設定欄に入力することで、手軽に同じ色を再現出来る。
今回は、Ingressの各部で使われている色のカラーコードを調べてみたぞ。
アプリの画面デザインをIngress風にカスタマイズしたいときや、Ingress風の告知画像やポスターを作成したい場合などに参考になるだろう。
属性による配色
Ingressで「色」と言われてまず思い浮かぶのは、Enlightenedの緑とResistanceの青だろう。また、レゾネーターなどのレベルやMODのレアリティごとの色分けも馴染み深い。これらの色は、アプリ版とWebのIntel Mapとで微妙に色合いが違っているが、今回はアプリ版で調査したカラーコードを紹介するぞ。
- ███ #2BED1A Enlightened
- ███ #00BFFF Resistance
- ███ #FFCF59 レベル1
- ███ #FFA630 レベル2
- ███ #FF7314 レベル3
- ███ #E30000 レベル4
- ███ #FC2991 レベル5
- ███ #EB26CC レベル6
- ███ #C224E0 レベル7
- ███ #9626F5 レベル8
- ███ #B3B3B3 Very Common
- ███ #8CFFBF Common
- ███ #B08CFF Rare
- ███ #FF8CF7 Very Rare
インターフェイスの配色
Ingressのインターフェイスでよく見かけるのが、水色と黄色だ。これらの色は、Ingressアプリ内でも部位によって微妙に明るさなどが異なるようだが、今回は主要な箇所のカラーコードを調査した。
- ███ #00AEEF アプリアイコンの濃い部分
- ███ #75D3F6 アプリアイコンの明るい部分
- ███ #00F2FF インターフェイスの枠など
- ███ #91FFFF ボタンなどの文字
- ███ #FCF28C レベルやAPなど
- ███ #008780 次レベルまでの必要APなど
- ███ #00BAB5 ステータス項目名
- ███ #FFD652 ステータス値など
- ███ #F58F2B リモートポータルビュー
- ███ #6EE7C3 グリフハック成功
- ███ #FF5555 グリフハック失敗
- ███ #FFAE37 ミッションのマーカーなど
- ███ #BB9661 ミッションポータルの説明
- ███ #052322 ミッション項目背景
- ███ #0C6964 ミッション項目枠
- ███ #170E01 完了済みミッション背景
- ███ #57380A 完了済みミッション枠
実績メダルの配色
ハック数などの数値が一定に達することで獲得できるブロンズからブラックまでの5色のメダルは、ランクによって枠や図柄の基本色と背景部分の色が違う。図柄は枠と同じ色がベースだが、徐々に白みがかっていくグラデーションがかけられているぞ。
赤や青などの部分にもグラデーションがかかっているが、以下の表では一番濃い部分の色を掲載している。
なお、ブラックメダルだけは、枠にもグラデーションが適用されているようだ。
- ███ #FF9994 メダルの赤い部分
- ███ #02CFB9 メダルの青い部分
- ███ #CAB0FF Guardianメダルの薄紫の部分
- ███ #842C78 Trekkerメダルの紫の部分
- ███ #647EA0 Translatorメダルの紺色の部分
- ███ #FBB040 Translator/Recruiterメダルのオレンジの明るい部分
- ███ #DB9775 ブロンズメダルの枠など
- ███ #49200B ブロンズメダルの背景
- ███ #A3BBC1 シルバーメダルの枠など
- ███ #394142 シルバーメダルの背景
- ███ #F8D188 ゴールドメダルの枠など
- ███ #6D4D28 ゴールドメダルの背景
- ███ #EFEFEF プラチナメダルの外枠
- ███ #939393 プラチナメダルの枠など
- ███ #282828 プラチナメダルの背景
- ███ #3A393A ブラックメダルの外枠の最上部
- ███ #868481 ブラックメダルの外枠の最下部
- ███ #1D1C1D ブラックメダルの内枠の最上部など
- ███ #51504E ブラックメダルの外枠の最下部
- ███ #000000 ブラックメダルの背景
今回の表では、三原色を2桁の16進数で表して赤緑青の順に繋げた形式のカラーコードを掲載したが、ソフトの色指定画面では0~255の10進数で指定する必要がある場合もある。
「カラーピッカー」と呼ばれるツールを使えば、このようなカラーコードの形式の変換を行えるぞ。他にも、色合いを変えずに明るさや鮮やかさだけを変えるなど様々な色作りが可能なので、カラーデザインを調節するときはぜひ活用しよう。
・ColorPicker.com – Quick Online Color Picker Tool