カラ―コードについて
- 色の重要性とその種類について
- 色が与える心理的イメージ
- 背景色と文字色の関係
- カラ―コード検索とカラ―ピッカー
カラ―コードを紹介していきます。
さすがに1670万色全部を紹介するのはムリなので、ここではWEBセーフカラーのみを紹介します。
左の桁から2列ずつ、それぞれ赤・緑・青の3原色を16進数で表していて、数字が大きいほど対応する色の強味が増していくようになっています。
| カラ―コード一覧表（WEBセーフカラーのみ） | |||||
|---|---|---|---|---|---|
| #000000 | #330000 | #660000 | #990000 | #CC0000 | #FF0000 |
| #000033 | #330033 | #660033 | #990033 | #CC0033 | #FF0033 |
| #000066 | #330066 | #660066 | #990066 | #CC0066 | #FF0066 |
| #000099 | #330099 | #660099 | #990099 | #CC0099 | #FF0099 |
| #0000CC | #3300CC | #6600CC | #9900CC | #CC00CC | #FF00CC |
| #0000FF | #3300FF | #6600FF | #9900FF | #CC00FF | #FF00FF |
| #003300 | #333300 | #663300 | #993300 | #CC3300 | #FF3300 |
| #003333 | #003333 | #663333 | #993333 | CC3333 | #FF3333 |
| #003366 | #333366 | #663366 | #993366 | #CC3366 | #FF3366 |
| #003399 | #333399 | #663399 | #993399 | #CC3399 | #FF3399 |
| #0033CC | #3333CC | #6633CC | #9933CC | #CC33CC | #FF33CC |
| #0033FF | #3333FF | #6633FF | #9933FF | #CC33FF | #FF33FF |
| #006600 | #336600 | #666600 | #996600 | #CC6600 | #FF6600 |
| #006633 | #336633 | #666633 | #996633 | #CC6633 | #FF6633 |
| #006666 | #336666 | #666666 | #996666 | #CC6666 | #FF6666 |
| #006699 | #336699 | #666699 | #996699 | #CC6699 | #FF6699 |
| #0066CC | #3366CC | #6666CC | #9966CC | #CC66CC | #FF66CC |
| #0066FF | #3366FF | #6666FF | #9966FF | #CC66FF | #FF66FF |
| #009900 | #339900 | #669900 | #999900 | #CC9900 | #FF9900 |
| #009933 | #339933 | #669933 | #999933 | #CC9933 | #FF9933 |
| #009966 | #339966 | #669966 | #999966 | #CC9966 | #FF9966 |
| #009999 | #339999 | #669999 | #999999 | #CC9999 | #FF9999 |
| #0099CC | #3399CC | #6699CC | #9999CC | #CC99CC | #FF99CC |
| #0099FF | #3399FF | #6699FF | #9999FF | #CC99FF | #FF99FF |
| #00CC00 | #33CC00 | #66CC00 | #99CC00 | #CCCC00 | #FFCC00 |
| #00CC33 | #33CC33 | #66CC33 | #99CC33 | #CCCC33 | #FFCC33 |
| #00CC66 | #33CC66 | #66CC66 | #99CC66 | #CCCC66 | #FFCC66 |
| #00CC99 | #33CC99 | #66CC99 | #99CC99 | #CCCC99 | #FFCC99 |
| #00CCCC | #33CCCC | #66CCCC | #99CCCC | #CCCCCC | #FFCCCC |
| #00CCFF | #33CCFF | #66CCFF | #99CCFF | #CCCCFF | #FFCCFF |
| #00FF00 | #33FF00 | #66FF00 | #99FF00 | #CCFF00 | #FFFF00 |
| #00FF33 | #33FF33 | #66FF33 | #99FF33 | #CCFF33 | #FFFF33 |
| #00FF66 | #33FF66 | #66FF66 | #99FF66 | #CCFF66 | #FFFF66 |
| #00FF99 | #33FF99 | #66FF99 | #99FF99 | #CCFF99 | #FFFF99 |
| #00FFCC | #33FFCC | #66FFCC | #99FFCC | #CCFFCC | #FFFFCC |
| #00FFFF | #33FFFF | #66FFFF | #99FFFF | #CCFFFF | #FFFFFF |
グレースケールの色について
次に、グレースケールの色合いだけを抜き取って紹介しておきます。文字の色や枠線等によく使われる色だと思うので参考にしてみてください。グレースケールの色は『Ｒ・Ｇ・Ｂ』を3種類とも同じ数値にしてあげれば作ることができます。数値が小さければ暗く、大きければ明るくなっていきます。
| グレースケール | |||||
|---|---|---|---|---|---|
| #000000 | #333333 | #666666 | #999999 | #CCCCCC | #FFFFFF |
| #101010 | #202020 | #303030 | #D0D0D0 | #E0E0E0 | #F0F0F0 |
| #353535 | #535353 | #757575 | #ABABAB | #B3B3B3 | #F3F3F3 |
カラ―ピッカーとは？
web上で使用できる色の数は256×256×256=16,777,216色あります。
この中から使用したい色を選んでいくわけですが、1個1個色番号を入力して色を確認していたのでは大変なことになってしまいます。
そこで、カラ―ピッカーの出番です。カラ―ピッカーというのは、赤・緑・青の3色を自由自在に混ぜ合わせて目で確認することができる、とっても便利な道具です。
下にカラ―ピッカーを用意したので、試しに使ってみて下さい。
|
|||||||||||||||||||||||||||||
これは、『PhotoShop-like JavaScript Color Picker』というプログラムで、マウスを使って好きな色を選べば、その色の色番号が分かるようになっています。
＜ダウンロード元はこちら＞(英語サイト)
http://johndyer.name/photoshop-like-javascript-color-picker/
【PhotoShop-like JavaScript Color Pickerの使い方】
①向かって左側にある○をマウスでドラッグすると、大まかな色を決めることができます。
②右側の『HSB』はHSB色空間といって、それぞれ『H=色相』『S=彩度』『B=明度』を表しています。
③その下の『RGB』は3原色『RED』『GREEN』『BLUE』を表していて、それぞれチェックボックスを選択して、レバーを上下すれば微調整を行う事ができます。また、一番右側の数値入力ボックスに直接数字を打ちこむこともできます。
④右上の正方形の中の色が作成した色で、右下の『＃○○○○○○』の部分が色番号になります。
