カラーパレットでイイ感じの配色を作り出そう（その1：カラーコードの説明）

そめ先生ェ～　タイトル画面を
作ってみたんすけど
………。
テヘッ　ブルーが好きなので
青色を中心に考えてみたっす
喝ぁーーーっ！！
ヒッ！？


皆さんは色彩のセンスをお持ちだろうか。プログラミングはできても絵心がなかったり、色のセンスがわからない……という人は多い。オシャレとかよくわかんねーし、とりあえず黒っぽい服装を着れば闇に溶け込めて安心するぜ……という人もいるかもしれない。

しかし何も色彩のセンスがなくても、色の組み合わせをコンピューターに任せてしまえばいいのだ。一定の色の組み合わせのことをカラーパレットというのだが、世の中にはイイ感じのカラーパレットを自動的に作成する便利サイトがいくつかあり、テキトーにボタンをポチポチするだけでも綺麗なカラーパレットを作り出せる。中高生にも気軽に使えるものをいくつか紹介しようと思うが、まずは基礎知識として「カラーコード」というものを説明しておく。

カラーコードとは

簡単に言うと色にはそれぞれ番号がある。番号は主に3種類ある。「赤」を例に3つの番号を説明しよう。



  • カラーコード：#FF0000
6ケタの色番号。16進数なので0～Fで表される。最初の2ケタが赤、次の2ケタが緑、最後の2ケタが青の強さを表す。#FF0000は最初の2ケタが最大値のFFで表記されているので「真っ赤」となる。#FFFFFなら全ての色が最大で白に、#000000はその逆で黒になる。

  • RGB数値：R:255 G:0 B:0
カラーコードを10進数で表記したもの。Red、Green、Blueの3色の強さを表している。Rが最大の255なので「真っ赤」となる。全て255なら白に、全て0なら黒になる。

  • CMYK数値：C:0% M:100% Y:100% K:0%
印刷用の色の数値。Adobe Illustlatorなど印刷ソフトなどで使われる。簡単に言えばカラーコードとRGBはPCの画面表示用、CMYKは物体に印刷する用の色だ。UnityではCMYKはあまり気にしなくていいかも。

なるほどー
そういえばUnityでも
マテリアルの色とかで
指定してた気がするっす



RGBとカラーコードが表示されている

カラーコードは万国共通のものなので、インターネットで「カラーコード　表」とか検索すればサイトが出てくる。例えば原色大辞典など。

色は数字で表すことができる、
ということを覚えておいてくれ


カラーコードの取得方法

例えばUnityのサイトに特徴的な緑色が表示されているとして、この色の番号を調べるにはどうしたらいいだろうか？その方法を3つ紹介する。

  • 1）キーボードのPrintScreenキーで画面をキャプチャし、ペイントツールに貼り付けて調べる
簡単なのでこちらのページを
見てみてくれ
電気女子（はまこ）先生ェ……！
ありがとうございます……！



PrintScreenキーはキーボードの右上の方にある。Prt Scとか表記されていることも。このキーを押すとモニタ全体を画像としてコピーしてくれるので（音は鳴りません）、ペイントツールを開いて「貼り付け」やCtrl+Vを押すとペーストできる。ちなみにAlt+PrintScreenで、現在アクティブになっているウィンドウだけをキャプチャできる


少しわかりづらいが、プリントスクリーンでインターハイブログを表示したWebブラウザ画面をコピーし、ペイントツールに貼り付けてから色を抽出している

  • 2）画像ファイルをカラーコード抽出サイトにドラッグする
イロミルというサイトに
画像ファイルをつっこんでみてくれ
簡単にできたっす！
でも数値がちょっとブレるっすね～
正確に出すには
1）の方法がおすすめだ


  • 3）Adobe Photoshop等で画像を開いてスポイトツールで色を取得し、番号を見る
そめ先生はフォトショップ持ってるから
これかな



1）と同じくフォトショップに貼り付けてから色を抽出

（長くなってきたので次回に続く）