カラーパレットでイイ感じの配色を作り出そう(その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)と同じくフォトショップに貼り付けてから色を抽出

(長くなってきたので次回に続く)