1. プログラマのための
「色」選択入門
2011/8/28

2. 自己紹介
Twitter： @saucerjp
名前：オバラ ツカサ
フリーのデザイナしています。
紙物とか、特殊紙とか。最近はweb

3. 目的
プログラマが色選択する必要がある時に、どうやっ
て色を選んで良いか悩むと言う話を良く耳にします。
それはもしかして、色が無限にあるように見えている
からなんじゃないでしょうか。
それなら、色の入門的な部分を知ってもらい、無限
に見えていた「色」を身近にして、センス(なんとな
くクリック)だけに頼らない色選択方法を覚えちゃい
ましょう。
開発者にも、もっと色と仲良くなってもらいたい！

4. 目標
Basic 16 Colors（Red,Greenなど）、
Web Safe Color（216色）やRGBカラースライダを、
なるべく使わずに色を選択できるようになりたい。

5. 色の話を始めるその前に、
簡単な光と色の関係について

6. 人間の感じる色とは
人間が色を感じるのは、
光を眼球の奥、網膜にあ
る錐体細胞部分が、可視
光の刺激を受けたときに
色と感じます。
簡単に言うと目の中に色
を感じる細胞があるって
事です。（厳密には違います）
※明るさを感じるのは桿体細胞

7. じゃあ、人間が色と感じる
可視光ってなに？

8. 可視光とは
人間が見ることのできる範囲の波長の事
おおよそ380nmぐらい∼750nmぐらいの範囲
（これが人間が感じ得る色の全て）
※紫∼赤でそれより外はそれぞれ紫外線、赤外線

9. 凄くざっくりとした言い方をすれば、
色は紫、青、緑、黄、赤のどれかでしかないです。
人間は可視光の範囲の波長が目に飛び込んでくる
と色と感じます。
テレビやPCディスプレイ、印刷物で色を表現す
るっていうことは、結局はこの波長を作り出すっ
てことなんです。

10. じゃあ、じゃあ、実際にテレビや印刷物は
どうやってその波長の色を作っているの？

11. 色を表現する方法
（加法混色と減法混色）
この後簡単に解説しますが、この２つをちゃんと理解し
てもらうには、波長の話をいっぱいしないといけなくて
時間が足りないので、今回は「色を自在に表現するには
2種類の方法が有るんだなぁ」で、良いと思います。

12. 加法混色とは
波長を加える事で色を表現する方法
テレビやパソコンのディスプレ
イなど自ら光って色を出すのが
加法混色です。
赤R、緑G、青Bがすべて重なる
と白になるってやつですね。
みなさんが開発中のモニタで表
現される色は、全て加法混色で
の色表現です。

13. 減法混色とは
波長を吸収する事で色を表現する方法
印刷物や絵の具、クレヨンなど、光が
無いと見えない色は、減法混色です。
シアン、マゼンダ、イエローがすべて
重なると黒になるってやつですね。
ただ、印刷の場合はこの三色の混色で
は黒として薄いので黒インクを別途追
加してCMYKとなります。

14. なので、「Webサイトをプリントして確
認してみよう」って事をすると、色表現
方法は、加法混色（モニタ）から減法混
色（紙）に変換されています。

15. 色を選ぶために
最低限覚えたい２つの事

16. 「色相・彩度・明度」
と
「色相環」

17. ひとつめ

18. 色相・彩度・明度
この３つの違いを理解すると、色の
持つパラメータがスッキリ分解され
て色を理解しやすくなります。

19. これを簡単に理解するために、
HSBスライダを使います。
Macならテキストエディット開いて、
フォーマット＞フォント＞カラーパネルを表示、です。

20. 色相について
スライダのH(色相)部分
色相は赤、黄、緑、青、紫といった色の違いです。
0∼360 で色味が変化します。

21. 彩度について
スライダのS(彩度)部分
色の鮮やかさです。
0∼100％で0に近づくほど色味は失われ、
0で無彩色（グレー）となります
※解説はしませんが、彩度はこの後説明する明度に連動して変化します。

22. 明度について
スライダのB(明度)部分
色の明るさです。
0∼100％で0が黒、100が白となります。
彩度がゼロの場合はグレースケールですね。

23. ふたつめ

24. 色相環
さっき出てきた色相の分布を知るのに便利です。
近似色やら補色やらは瞬間で理解できます。
カラーバリエーションなども考えやすくなります。

25. 色相環とは
「色相・彩度・明度」で出てきた色相部分を
順序立てて円にして並べたものを色相環と言います。

26. 使い方

27. カラフルなものを作りたければ、
72 づつ5色選ぶとか…
緑っぽいサイトを作りたければ、
40 以内で5色選ぶとか…

28. 近似色とは
読んだままで近い色の事です。
図で言うと、例えば5Rの近似
色は5RPとか5YRとかです。
角度のほうが直感的です。選ん
だ色から左右40 くらいまでで
しょうか。
最初に選んだ色の印象を損なわ
ずに色展開できます。
※どこまでが近似色って範囲はさまざまですが、40 位までとい
う認識で良いと思います。

29. 補色とは
選んだ色から一番遠い色です。
図で言うと、例えば5Rの補色
は5BGです。
角度で言うと、選んだ色から
180 です。
アクセントに良く使われます。

30. さて、やっとここから本題…

31. プログラマのための
「色」選択入門

32. 今回登場した、HSBスライダ(色相・彩度・明度)と「色相
環」を使えば、まず、色相環からベースの色相を選んで、
それを好みの明るさ(暗さ)にして、鮮やかさを調節して、
さらに色相環を使って、「近似色相」や「補色」を選択し
て、また明るさや鮮やかさを調節…

33. って、これは普通にプロの色選択だっ！

34. HSBでの色選択の何が難しいって？
それは彩度のコントロール。

35. HSBスライダで彩度100％、明度100％固定で、色相のみ15 づつ24段階移動した場合
こんなに彩度が違う!
彩度を調節しながら、24段階移動した場合

36. だから、バランスの良い
色を作るのって難しいんですね。

37. と言うことで、HSBスライダは諦めて、
簡単にトーンの合った色を選択できる
Webアプリを作りました。
色に凄い興味が出ちゃった！って方は、
是非HSBスライダをグリグリして色を作ってみてください。

38. Web Color Palette
今回説明した、「色相・彩度・明度」
と「色相環」を理解していれば難なく
使えるアプリにしているつもりです。
http://saucer.jp/wcp
に置いてありますが、できれば今日、
ゆる∼いライセンスをつけて、Git Hub
に公開して、機能を向上させていけた
らなって思ってます。
では、使い方の説明を…